PROYECTO UNO

Formularios

Layouts

GridLayout

Este tipo de layout fue incluido a partir de la API 14 (Android 4.0) y sus características son similares al TableLayout, ya que se utiliza igualmente para distribuir los diferentes elementos de la interfaz de forma tabular, distribuidos en filas y columnas. La diferencia entre ellos estriba en la forma que tiene el GridLayout de colocar y distribuir sus elementos hijos en el espacio disponible. En este caso, a diferencia del TableLayout indicaremos el número de filas y columnas como propiedades del layout, mediante android:rowCount y android:columnCount. Con estos datos ya no es necesario ningún tipo de elemento para indicar las filas, como hacíamos con el elemento TableRow del TableLayout, sino que los diferentes elementos hijos se irán colocando ordenadamente por filas o columnas (dependiendo de la propiedad android:orientation) hasta completar el número de filas o columnas indicadas en los atributos anteriores. Adicionalmente, igual que en el caso anterior, también tendremos disponibles las propiedades android:layout_rowSpan y android:layout_columnSpan para conseguir que una celda ocupe el lugar de varias filas o columnas.

Existe también una forma de indicar de forma explícita la fila y columna que debe ocupar un determinado elemento hijo contenido en el GridLayout, y se consigue utilizando los atributos android:layout_row y android:layout_column. De cualquier forma, salvo para configuraciones complejas del grid no suele ser necesario utilizar estas propiedades.

LinearLayout

El siguiente tipo de layout en cuanto a nivel de complejidad es el LinearLayout. Este layout apila uno tras otro todos sus elementos hijos en sentido horizontal o vertical según se establezca su propiedad android:orientation.

Al igual que en un FrameLayout, los elementos contenidos en un LinearLayout pueden establecer sus propiedades android:layout_width y android:layout_height para determinar sus dimensiones dentro del layout.

Pero en el caso de un LinearLayout, tendremos otro parámetro con el que jugar, la propiedad android:layout_weight. Esta propiedad nos va a permitir dar a los elementos contenidos en el layout unas dimensiones proporcionales entre ellas. Esto es más dificil de explicar que de comprender con un ejemplo. Si incluimos en un LinearLayout vertical dos cuadros de texto (EditText) y a uno de ellos le establecemos un layout_weight=”1″ y al otro un layout_weight=”2″ conseguiremos como efecto que toda la superficie del layout quede ocupada por los dos cuadros de texto y que además el segundo sea el doble (relación entre sus propiedades weight) de alto que el primero.

RelativeLayout

Este layout permite especificar la posición de cada elemento de forma relativa a su elemento padre o a cualquier otro elemento incluido en el propio layout. De esta forma, al incluir un nuevo elemento X podremos indicar por ejemplo que debe colocarse debajo del elemento Y y alineado a la derecha del layout padre. En un RelativeLayout tendremos un sinfín de propiedades para colocar cada control justo donde queramos.

FrameLayout

Éste es el más simple de todos los layouts de Android. Un FrameLayout coloca todos sus controles hijos alineados con su esquina superior izquierda, de forma que cada control quedará oculto por el control siguiente (a menos que éste último tenga transparencia). Por ello, suele utilizarse para mostrar un único control en su interior, a modo de contenedor (placeholder) sencillo para un sólo elemento sustituible, por ejemplo una imagen.

Los componentes incluidos en un FrameLayout podrán establecer sus propiedades android:layout_widthy android:layout_height, que podrán tomar los valores “match_parent” (para que el control hijo tome la dimensión de su layout contenedor) o “wrap_content” (para que el control hijo tome la dimensión de su contenido).

Include Other Layout

Si se refiere a la <include />, que sirve para incluir una "sub-árbol" en el lugar donde se declara. En general, se utiliza a menudo cuando se tiene un diseño que se puede reutilizar en otros diseños o declarada por separado para una mejor organización.

Cuenta con el atributo de diseño, donde se define la referencia al diseño que desee incluir.

Cuenta con el atributo de diseño, donde se define la referencia al diseño que desee incluir.

Fragment

Son componentes que funcionan dentro del ámbito de una Activity. Su finalidad es la de ampliar parte de la lógica utilizada para la navegación entre pantallas o Activities, pudiendo definir varios Fragments dentro de una misma Activity, interaccionando entre ellos. Fueron introducidos con la versión de Android 3.0 (API level 11), y representan el comportamiento de una porción de la interfaz de usuario asociada a una Activity.

Todo Fragment debe estar embebido dentro de una Activity, por lo que el ciclo de vida de un Fragment está ligado al de la Activity.

TableLayout

Un TableLayout permite distribuir sus elementos hijos de forma tabular, definiendo las filas y columnas necesarias, y la posición de cada componente dentro de la tabla.

La estructura de la tabla se define de forma similar a como se hace en HTML, es decir, indicando las filas que compondrán la tabla (objetos TableRow), y dentro de cada fila las columnas necesarias, con la salvedad de que no existe ningún objeto especial para definir una columna (algo así como un TableColumn) sino que directamente insertaremos los controles necesarios dentro del TableRow y cada componente insertado (que puede ser un control sencillo o incluso otro ViewGroup) corresponderá a una columna de la tabla. De esta forma, el número final de filas de la tabla se corresponderá con el número de elementos TableRowinsertados, y el número total de columnas quedará determinado por el número de componentes de la fila que más componentes contenga.

Por norma general, el ancho de cada columna se corresponderá con el ancho del mayor componente de dicha columna, pero existen una serie de propiedades que nos ayudarán a modificar este comportamiento.

TableRow

Al igual que en un LinearLayout, en un TableLayout se pueden incluir todo tipo de vistas. Sin embargo, hay una vista específica que sólo se puede utilizar en TableLayout y que es la que aporta la funcionalidad necesaria para crear la tabla: TableRow.

TableRow es, a su vez, otra especialización de LinearLayout. Esta vez de un LinearLayout horizontal. Así que resulta evidente que, lo que se nos vende como una estructura de tabla, es en realidad un grupo de LinearLayout horizontales dentro de un LinearLayout vertical.

Esta organización tampoco resulta tan extraña. De hecho, es muy similar a la de las tablas en HTML, con las que este diseño comparte otras características, como veremos a continuación.

Resulta evidente que cada TableRow representa una fila de la tabla y que las vistas que contengan harán las veces de columnas. En concreto, cada vista que se añade a un TableRow va a parar a una columna diferente. Por ese motivo se suele decir que cada celda de un TableLayout sólo puede contener una vista. No obstante, nada impide que cualquiera de esas vistas sea un diseño y que contenga, a su vez otras vistas dentro.

Lo que diferencia a TableLayout de una estructura similar creada con varios LinearLayout es el tratamiento global que le da a las vistas que se incluyen en todos los TableRow. Para empezar, aunque cada TableRow tenga una cantidad diferente de vistas en su interior, el conjunto se representará como una tabla donde todas las filas tienen el mismo número de columnas. La cantidad total de columnas que tendrá la tabla la determina el TableRow que más vistas incluya. De forma similar, el ancho de cada columna también vendrá determinado por la vista con mayor anchura de todas las incluidas en esa columna, aún estando en diferentes TableRow.

Space

El espacio es una subclase de vista ligera que se puede utilizar para crear intervalos entre los componentes en los diseños de propósito general.

Estructura de carpetas de un proyecto Android.

carpeta src: esta carpeta contendrá todo el código fuente de la aplicación, código de la interfaz grafica, clases auxiliares etc.

carpeta gen: contiene una serie de elementos de código generados automáticamente al compilar el proyecto. cada vez que generamos nuestro proyecto , la maquinaria de compilación de Android genera por nosotros una serie de ficheros fuente Java dirigidos al control de los recursos de la aplicación. Importante: dado que estos ficheros se generan automáticamente tras cada compilación del proyecto es importante que no se modifiquen manualmente bajo ninguna circunstancia.

carpeta assets: Contiene todos los demás ficheros auxiliares necesarios para la aplicación (y que se incluirán en su propio paquete), como por ejemplo ficheros de configuración, de datos, etc.
La diferencia entre los recursos incluidos en la carpeta /res/raw/ y los incluidos en la carpeta /assets/ es que para los primeros se generará un ID en la clase R y se deberá acceder a ellos con los diferentes métodos de acceso a recursos. Para los segundos sin embargo no se generarán ID y se podrá acceder a ellos por su ruta como a cualquier otro fichero del sistema. Usaremos uno u otro según las necesidades de nuestra aplicación.

carpeta bin: Ésta es otra de ésas carpetas que en principio no tendremos por qué tocar. Contiene los elementos compilados de la aplicación y otros ficheros auxiliares. Cabe destacar el fichero con extensión “.apk”, que es el ejecutable de la aplicación que se instalará en el dispositivo.

carpeta libs: Contendrá las librerías auxiliares, normalmente en formato “.jar” que utilicemos en nuestra aplicación Android.

carpeta res: Contiene todos los ficheros de recursos necesarios para el proyecto: imágenes, vídeos, cadenas de texto, etc. Los diferentes tipos de recursos se distribuyen entre las siguientes subcarpetas:

/res/drawable/: Contiene las imágenes [y otros elementos gráficos] usados en por la aplicación. Para definir diferentes recursos dependiendo de la resolución y densidad de la pantalla del dispositivo se suele dividir en varias subcarpetas:

• /drawable-ldpi (densidad baja)
• /drawable-mdpi (densidad media)
• /drawable-hdpi (densidad alta)
• /drawable-xhdpi (densidad muy alta)

/res/layout/: Contiene los ficheros de definición XML de las diferentes pantallas de la interfaz gráfica. Para definir distintos layouts dependiendo de la orientación del dispositivo se puede dividir en dos subcarpetas:

• /layout (vertical)
• /layout-land  (horizontal)

/res/menu/: Contiene la definición XML de los menús de la aplicación.

/res/values/: Contiene otros ficheros XML de recursos de la aplicación, como por ejemplo cadenas de texto (strings.xml), estilos (styles.xml), colores (colors.xml), arrays de valores (arrays.xml), etc.

Como crear tu primera aplicacion Android

Si quieres convertirte en un desarrollador de Android necesitas tener instalado Android Studio. Si ya tienes instalado Android Studio, es normal que te preguntes cómo crear mi primera aplicación en Android Studio. Pues bien, tras arrancar el programa nos aparecerá la opción de “Start a new Android Studio project”, que como bien sabemos significa arrancar con un nuevo proyecto en Android Studio. En el caso de que nos lleve directamente al programa, bastará con ir a File > New project.

Welcome to Android Studio

Crear mi primera aplicación en Android Studio

1. Nombre del proyecto

Como siempre, lo primero que haremos será indicar el nombre de nuestra aplicación. Indicaremos además nuestra compañía (nombre de la empresa o nuestro nombre si somos uno) y la localización del proyecto.

2. API de la aplicación

 Aquí seleccionaremos la API que vamos a emplear, dependiendo de la API que usemos tendremos disponibles unas u otras funcionalidades. En este caso, el mínimo de SDK seleccionado es la API 22 con Android 5.1.1, la última versión desarrollada en Android hasta el momento. Se aconseja elegir siempre una un poco anterior por si acaso, por ejemplo la 5.1.

3. Añadir activity

En esta ventana elegiremos el primer layout de nuestra aplicación, o lo que es lo mismo, la apariencia que tendrá nada más ejecutarla en el terminal. Elegiremos la primera, que es la estándar para crear un layout en blanco fácilmente editable.

4. MainActivity

 Una vez llegamos a este punto, toca elegir el nombre de la actividad principal y del layout principal. De forma predeterminada, se asignan los nombres anteriores, ya que se corresponden con el main de la aplicación por ser lo primero en crearse de cada caso.

Si pulsamos en finalizar, nuestro proyecto ya estará creado. Por defecto, nos aparecerá el siguiente layout:

Primer layout (.xml)

Por defecto en Android Studio se nos creará este primer layout en blanco que hemos elegido, con un hola mundo de manera predefinida. A partir de ahora, ya podemos comenzar a darle estilo a nuestra aplicación.

Main en java

El primer código en Java de la aplicación es este MainActivity, que definirá el comportamiento de nuestra aplicación. Los métodos que se crean por defecto son los siguientes:

• onCreate: en este método cargamos el layout anterior, además de otras funciones que veremos en un futuro
• onCreateOptionsMenu: cargamos el menú de nuestra aplicación, el action bar
• onOptionsItemSelected: definimos el comportamiento de los botones del menú en el action bar

Menú por defecto

 Por defecto en nuestra aplicación se incluye un menú, que es el menú típico en Android con los 3 puntos como vemos en la imagen anterior. Tendremos la posibilidad de elegir si añadir más opciones o dejarlo como está. Como ya os conté en el punto anterior, en el método onOptionsItemSelected() se definirá el comportamiento de estos botones.

Icono de la aplicación

 Nuestra aplicación por defecto también vendrá con un ic_launcher.png, que es el icono de nuestra aplicación. Por defecto tendremos un androide verde, pero sino siempre podremos cambiarlo, ya que se encuentra en la carpeta de drawable o mipmap (depende de la API). Es importante que sea un archivo .png y con un nombre sin caracteres extraños o mayúsculas, sino nos saltará un error.

Run ‘app’

Tras crear la aplicación, ya podemos probarla en nuestro terminal Android u optar por un emulador del propio Android Studio. Para ejecutar la aplicación, tendremos que hacer clic en “Run”, el icono verde de Play:

Si todo ha ido bien compilará sin errores y se abrirá en nuestro terminal (que debemos conectar por USB para que reconozca), además de activar la depuración USB y permitir el reconocimiento de huella digital para que ambos dispositivos se vinculen. Si esto ocurre, nos aparecerá en la siguiente lista para elegir, sino podemos optar por el emulador (clic en Launch emulator y crear un nuevo device)

Elegir dispositivo

App en el móvil

Si todo ha ido bien, así se verá esta aplicación (predeterminada) en nuestro móvil:

Y esto ha sido todo para crear este primer proyecto en Android Studio. Cómo veis, no hemos tenido que tocar código o layout, simplemente basta con seguir los pasos para crear nuestro primer proyecto y ejecutarlo, para ver el resultado. Ahora ya podemos comenzar a añadirle comportamiento a nuestro primer proyecto.

Pasos para configurar la PC para desarrollar AM para Android

El primer paso para configurar nuestra computadora es descargar e instalar JDK. Lo descargamos en http://www.oracle.com en descargas de Java y luego lo instalamos en nuestra pc.

El segundo paso es descargar e instalar SDK, que este será de http://www.android.com y pulsamos el botón "Get SDK" y lo descargamos para windows y de igual manera lo instalamos.

El tercer paso es configurarlo, se ejecuta el administrador del SDK y bajamos algunas versiones de Android.

En el paso número cuatro descargamos eclipse en http://www.eclipse.org y nos vamos a "descargas". Cuando descarguemos el archivo comprimido abrimos eclipse y elegimos el workspace que deseamos usar.

El paso cinco es instalar el plug in, el cuál nos va a permitir integrar el SDK con otras herramientas de desarrollo para Android con eclipse. Dentro de eclipse en "help" ponemos "instalar nuevo software" y le ponemos un nombre y una dirección e instalamos.

El paso seis es configurar las preferencias de eclipse en "preferences" e ingresamos la ruta del SDK y pasamos al séptimo paso que es configurar la máquina virtual y con el controlador del SDK agregamos más versiones de Android cuando queramos y con el AVDM damos clic en "nuevo" y le ponemos un nombre a nuestro plug in y configuramos la máquina virtual y si está correcto podemos iniciarla. 

Como descargar e instalar Eclipse paso por paso

Eclipse es un Ambiente de Desarrollo Integrado (conocido como Integrated Development Environment o IDE en inglés) el cual muy popular entre los programadores y desarrolladores de Java. Con el tiempo Eclipse se ha convertido en la principal herramienta usada por muchos desarrolladores a la hora de escribir código en Java incluso sobre NetBeans que es el IDE que viene con Java la versión oficial de Java. Sin embargo la página para descargar Eclipse y las instrucciones para instalarlo están en inglés. Es por ello que en este artículo te mostraremos cómo descargar e instalar Eclipse IDE en español.

El primer paso es visitar la página de Eclipse en http://www.eclipse.org. Así que ve a tu navegador y visita esta página la cual debe verse como muestra la Imagen #1.

Una vez estés en la página de Eclipse, fíjate en la parte derecha de la ventana. Allí verás un botón color naranja, el cual dice “Download”. Este es el botón a presionar para poder descargar Eclipse. Así que dale clic al botón “Download” como muestra la Imagen #2.

Al darle clic al botón “Download”, pasarás a la página de selección del sistema operativo y la versión. Aquí verás un texto que dice “Eclipse … Release for” y al lado un menú desplegable. El menú desplegable es para que escojas tu sistema operativo. Seas usuario de Windows, Linux o Mac la buena noticia es que Eclipse está disponible para todos esos sistemas operativos. Selecciona tu sistema operativo del menú desplegable como muestra la Imagen #3.

Luego notarás más abajo, que se te muestra el sistema operativo seleccionado así como las arquitecturas de las versiones de Eclipse, es decir 32 bit y 64 bit. Selecciona la que corresponda según tu computadora. En las PCs modernas comúnmente debes seleccionar 64-bits. Si tu PC es un poco antigua es posible que solo tenga soporte para 32-bits. Haz la selección que corresponda como muestra la Imagen #4.

Ahora pasarás a la página de la descarga en sí. Aquí verás a mano izquierda un botón que dice “Download”. Haz clic en el mismo como muestra la Imagen #5.

Al darle clic al botón “Download” comenzará la descarga. El archivo pesa algunos 40MB así que dale tiempo a que termine. Una vez el archivo de Eclipse esté descargado, dale clic al mismo como muestra la Imagen #6.

Al darle clic al archivo descargado de Eclipse, se activará el eclipseinstaller o instalador de Eclipse. Antes, instalar Eclipse era algo complicado. Pero ahora este instalador te guiará en el proceso para instalar el IDE de una forma fácil y amena. Puedes ver el instalador en la Imagen #7.

La siguiente pantalla del instalador de Eclipse te mostrará todas las versiones disponibles de esta herramienta. En este artículo estamos bajo la presunción de que eres un desarrollador de Java. Por lo tanto debes seleccionar la primera opción, la que dice “Eclipse IDE for Java Developers” la cual se muestra en la Imagen #8.

Cuando le des clic a la opción “Eclipse IDE for Java Developers“, pasarás a la ventana de preferencias. El primer campo que verás allí es el que dice “Installation folder” seguido de una caja de texto y un botoncito con un icono de carpeta. En este campo indicarás la carpeta donde deseas instalar Eclipse. Por lo general debes instalarlo en la carpeta por defecto salvo que desees instalarlo en otra. Para cambiar la carpeta haz clic en el botón que ves a mano derecha y selecciona la carpeta correspondiente. Puedes ver este campo en la Imagen #9.

El otro campo es una casilla que dice “create start menu entry“. Esta casilla lo que hace es anclar Eclipse al menú Inicio. Si así lo deseas deja la casilla marcada, de lo contrario desmárcala. Puedes ver esta casilla en la Imagen #10.

La otra casilla es la que dice “create desktop shortcut“. Esta casilla lo que haces es crear un acceso directo en el Escritorio. Si así lo deseas, deja la casilla marcada. De lo contrario desmarca la casilla “create desktop shortcut“. Esta casilla se muestra en la Imagen #11.

Una vez configures todas las opciones, dale clic al botón “Install” como muestra la imagen #12.

Ahora pasarás a la ventana de la licencia. Entonces desplázate hasta la parte inferior derecha de dicha ventana y allí verás un botón que dice “Accept Now“. Dale clic a dicho botón para aceptar la licencia y proseguir con la instalación, como puedes observar en la Imagen #13.

A continuación Eclipse procederá a instalarse en tu sistema. La instalación demora unos minutos así que sé paciente. Verás una barra de progreso verde, como muestra la Imagen #14.

Una vez termine, la barra de progreso verde se transformará en un botón verde con el texto “Launch” Dale clic al botón “Launch” para lanzar Eclipse, tal y como muestra la Imagen #15.

Al darle clic al botón “Launch“, Eclipse iniciará y verás una ventana como la mostrada en la Imagen #16.

A partir de este momento ya podrás usar Eclipse. Esperamos que este artículo sobre cómo descargar e instalar Eclipse IDE te haya sido útil.