Reporte de prácticas. Aplicaciones Android en Eclipse.

Práctica 1.

Iniciamos Eclipse y abrimos una carpeta nueva para guardar nuestras aplicaciones. abrimos File> New> Android Application Project, guardamos el nombre y se abre nuestro nuevo proyecto Android.

Dejamos el texto de "Hello World!" y agregamos 10 objetos de Form Widgets y Text Fields a nuestra pantalla para ir conociendo cómo son algunos de ellos. Yo agregue un TextView, varios Plain Text y un Button.

Práctica 2. Hola Mundo. 

Iniciamos Eclipse y abrimos nuestra carpeta ya creada. Abrimos File> New> Android Application Project y guardamos nuestra práctica con el nombre de "ProyectoHolaMundo". Di doble click en el texto que aparecía en la pantalla y te lleva directamente al código de la aplicación. Vas hasta el penúltimo renglón y borras el escrito que aparecía en la pantalla para cambiarlo por "Hola Mundo...!!!". Guardamos y en la estructura de carpetas que esta hacia la izquierda seleccionas "ProyectoHolaMundo" y despues "RunAs>2AndroidApplication" y te abre una nueva ventana con botones y una pantalla donde sale el texto que ingresamos anteriormente.

Layouts.

Práctica 3. 

Iniciamos Eclipse y abrimos nuestra carpeta. Abrimos File> New> Android Application Project y se abre nuestro nuevo proyecto Android. Nos vamos a la carpeta de Activity_main.xml, en la pestaña de abajo con el mismo nombre nos aparece el codigo de la aplicacion, el cual borraremos todo. Regresamos a la pestaña de "Graphical Layout" y aparecerá en gris, es normal. Abren la carpeta encontrada en "Palette" llamada "Layouts" y seleccionamos "GridLayout" para arrastrarlo hacia la pantalla en gris. Después de eso abrimos la carpeta de "Form Widgets" y aplicamos 5 figuras a nuestro Layout ya aplicado.

Práctica 3.2

Borramos el código que se encuentra en la pestaña de Activity_main.xml y regresamos a insertar un nuevo Layout en nuestra pantalla gris. Insertamos el Layout "Table Row" y tres nuevos objetos de "Form Widgets".

Práctica 4. Datos Personales. 

(Layout horizontal y vertical)

Repetimos los pasos de la práctica 3, pero esta vez agregamos en lugar de un "GridLayout" un "Layout horizontal" al cual le agregaremos el objeto de "Text Medium", damos sobre los objetos click derecho> Editar texto y escribimos en el último recuadro "Nombre", "Apellido Paterno", "Apellido Materno", "Sexo" y "Edad" que son los datos personales que se le pueden pedir a cualquier persona. 

Al borrar el código y aplicar un Layout vertical no se pueden agregar varios objetos bien distribuidos a él.

Práctica 5. Agenda Personal.

Iniciamos Eclipse y abrimos nuestra carpeta ya creada. Abrimos File> New> Android Application Project y guardamos nuestra práctica 5 con el nombre de Agenda Personal. Insertamos en el Layout varios "Medium Text" de la carpeta "Form Widgets" y escribimos los textos de "Nombre", "Numero de celular", "Numero de casa", "Correo Electrónico" y "Domicilio" que son los datos mas importantes que requerimos de una persona. Seguido de cada uno de los textos agregamos los objetos "Person Name", "Plain Text", "Phone", "Postal Address" para que se puedan ingresar los datos que se piden.

Práctica 6. Hospital.

Iniciamos Eclipse y abrimos nuestra carpeta ya creada. Abrimos File> New> Android Application Project y guardamos nuestra práctica 6 con el nombre de Hospital. Insertamos en el Layout varios "Medium Text" de la carpeta "Form Widgets" y escribimos los textos de "Nombre del paciente", "Edad", "Sexo", "Diagnóstico" y "Tipo de Sangre" que son los datos que se piden cuando un paciente es ingresado a un hospital. Seguido de cada uno de los textos agregamos los objetos "Person Name", "Plain Text" y dos "Radio Button" a los cuales les editamos el texto dando click derecho> Editar texto por "Masculino" y "Femenino" para elegir entre los dos.

Práctica 7. Escuela.

Iniciamos Eclipse y abrimos nuestra carpeta ya creada. Abrimos File> New> Android Application Project y guardamos nuestra práctica 7 con el nombre de Escuela. Insertamos en el Layout varios "Medium Text" de la carpeta "Form Widgets" y escribimos los textos de "Nombre del alumno", "Grado", "Grupo", "Nombre del tutor", "Telefono cel tutor" y "Dirección" que son los datos mas importantes que se deben tener de cada alumno en un escuela. Seguido de cada uno de los textos agregamos los objetos "Person Name", "Plain Text", "Phone" y "Postal Address" que nos dan la opción de ingresar los datos requeridos.

Práctica 8. Banco.

Iniciamos Eclipse y abrimos nuestra carpeta ya creada. Abrimos File> New> Android Application Project y guardamos nuestra práctica 8 con el nombre de Banco. Insertamos en el Layout varios "Medium Text" de la carpeta "Form Widgets" y escribimos los textos de "Nombre del cliente", "No. de Cuenta", "No. de Teléfono", "Dirección" y "Referencias" que son los datos que se piden en un banco para cualquier tramite que vayan a solicitar. Seguido de cada uno de los textos agregamos los objetos "Person Name", "Plain Text", "Phone" y "Postal Address" que nos dan la opción de ingresar los datos requeridos.

Práctica 9. Supermercado.

Iniciamos Eclipse y abrimos nuestra carpeta ya creada. Abrimos File> New> Android Application Project y guardamos nuestra práctica 9 con el nombre de Supermercado. Insertamos en el Layout varios "Medium Text" de la carpeta "Form Widgets" y escribimos los textos de "Nombre del Producto", "Código del producto", "Precio", "Cantidad", "Descuento", "Forma de Pago" y "Total" que son los datos que se utilizan para poder atender un supermercado. Seguido de cada uno de los textos agregamos los objetos "Plain Text" y dos "Radio Button" editando el texto a "Contado" y "Crédito" que irán en el Medium Text "forma de Pago".

Cómo configurar la máquina virtual.

Las máquinas virtuales son programas que imitan a un móvil (su parte software), y al bundle de Android trae instalado un gestor de máquinas llamado (Android Virtual Devide Manager), y se puede encontrar en la barra superior de este entorno.

Al hacer clic en este icono, nos abre una ventana nueva, en la cual nos muestra la lista de los dispositivos que hemos creado.

Para crear nuestra primera máquina virtual, simplemente le damos al botón “New…” y nos aparecen unas opciones que debemos completar varios campos.

• AVD Name: El primero es el nombre con el que queremos denominar el emulador de Android.

Lo denominamos con un nombre distintivo, ya que podemos tener muchas máquinas virtuales, y queremos diferenciarlas por sistema operativos, dpis, tamaño de la pantalla o tipo de dispositivo.

• Device: El siguiente campo a rellenar es para que escojamos el dispositivo que queramos.

Podemos elegir el dispositivo que mejor se ajuste a nuestras necesidades, tenemos los móviles de Google, los nexus, y otros genéricos por tipo de pantalla, pulgadas, o densidad de pixeles por pulgada.

• Target: Aquí elegimos la versión de Android que nos convenga, o que queramos instalar al dispositivo.

Las versiones de Android las tenemos que tener descargadas desde el SDK Manager, lo cual explicamos en el anterior post, y está linkeado al principio de este documento.

• CPU/ABI: Aquí podremos elegir el tipo de procesador que usará la máquina virtual.

Los siguientes parámetros son menos importantes que estos primeros, pero debemos configurarlos, como la RAM del dispositivo, que recomiendo poner 512 MB, o si queremos que la cámara sea nuestra webcam y demás.

Lo último importante que debemos asignar es usar la GPU de nuestro ordenador, para que la máquina sea más fluida.

Una vez hecho esto, tendremos nuestra máquina lista para probar nuestras aplicaciones Android, y así no tener que usar nuestro móvil.

Layout

Layout es un término de la lengua inglesa que no forma parte del diccionario de la Real Academia Española (RAE). El concepto puede traducirse como “disposición” o “plan” y tiene un uso extendido en el ámbito de la tecnología.

La noción de Layout suele utilizarse para nombrar al esquema de distribución de los elementos dentro un diseño. Es habitual que un diseñador que se dedica a la creación de páginas web desarrolle un Layout y se lo presente a su cliente para que éste lo apruebe y decida sobre la distribución de los contenidos.

El Layout, en este sentido, puede ser una especie de plantilla que presenta tablas o espacios en blanco. La idea es que, a partir del Layout, la página web comience a desarrollarse con sus contenidos específicos. El Layout puede estar compuesto, por ejemplo, por un rectángulo a modo de cabezal y por tres columnas. Dicho esquema es genérico y puede usarse para desarrollar múltiples sitios web.

Tipos de Layout para Aplicación Android en Eclipse

Vamos a ver distintos tipos de Layout que podemos utilizar en nuestro desarrollo para una plataforma Android. Los tipos de los que disponemos son:

•            Layout Lineal
•          Table Layout
•         Absolute Layout
•          Relative Layout
•          Frame Layout

Layout Lineal

Es el Layout más simple que podemos utilizar. Como su nombre indica, los elementos se irán colocando uno detrás de otro, pero sí que podemos indicar si la colocación lineal se hará de forma vertical u horizontal.

Para ponerlo de forma vertical, en la propiedad “orientation” hay que indicarle el valor “vertical”.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

         android:orientation="vertical" android:layout_width="fill_parent"

         android:layout_height="fill_parent">

         <Button android:text="Button01" android:id="@+id/Button01"

                 android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

         <Button android:text="Button02" android:id="@+id/Button02"

                 android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</LinearLayout>

Si lo que queremos es darle una orientación horizontal, el valor de la propiedad será “horizontal”.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

         android:orientation="horizontal" android:layout_width="fill_parent"

         android:layout_height="fill_parent">

         <Button android:text="Button01" android:id="@+id/Button01"

                 android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

         <Button android:text="Button02" android:id="@+id/Button02"

                 android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</LinearLayout>

Table Layout

Es un modelo de organización basado en una organización con tablas. El diseño lo organizaremos en filas (elemento TableRow) y dentro de cada fila, pondremos los elementos.

<?xml version="1.0" encoding="utf-8"?>

<TableLayout android:id="@+id/TableLayout01"

         android:layout_width="fill_parent" android:layout_height="fill_parent"

         xmlns:android="http://schemas.android.com/apk/res/android">

         <TableRow android:id="@+id/TableRow01">

                 <TextView android:id="@+id/TextView01" android:text="First Name:"

                          android:width="100px" />

                 <EditText android:id="@+id/EditText01" android:width="220px" />

         </TableRow>

         <TableRow android:id="@+id/TableRow02">

                 <TextView android:id="@+id/TextView02" android:text="Second Name:" />

                 <EditText android:id="@+id/EditText02" />

         </TableRow>

         <TableRow android:id="@+id/TableRow03">

                 <Button android:id="@+id/Button01"

            android:layout_width="wrap_content"

                          android:layout_height="wrap_content" android:text="Submit" />

                 <Button android:id="@+id/Button02"

            android:layout_width="wrap_content"

                          android:layout_height="wrap_content" android:text="Reset"

                          android:width="100px" />

         </TableRow>

</TableLayout>

Layout Relativo

Este es el layout más flexibles de todos. Los elementos se colocan relativos a otro elemento o a otro Layout.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout android:id="@+id/RelativeLayout01"

         android:layout_width="fill_parent" android:layout_height="fill_parent"

         xmlns:android="http://schemas.android.com/apk/res/android">

         <TextView android:id="@+id/TextView01"

        android:layout_width="wrap_content"

                 android:layout_height="wrap_content" android:text="First Name:"

                 android:width="100px" />

         <EditText android:id="@+id/EditText01" android:layout_width="220px"

                 android:layout_height="wrap_content"

        android:layout_toRightOf="@+id/TextView01"

                 android:layout_below="@+id/RelativeLayout01" />

         <EditText android:id="@+id/EditText02" android:layout_width="220px"

                 android:layout_height="wrap_content"

        android:layout_below="@+id/EditText01"

                 android:layout_alignLeft="@+id/EditText01" />

         <TextView android:id="@+id/TextView02"

        android:layout_width="wrap_content"

                 android:layout_height="wrap_content" android:text="Second Name:"

                 android:width="100px" android:layout_below="@+id/EditText01"

                 android:layout_toLeftOf="@+id/EditText02" />

         <Button android:text="Submit" android:id="@+id/Button01"

                 android:layout_width="100px" android:layout_height="wrap_content"

                 android:layout_below="@id/EditText02"

        android:layout_alignLeft="@id/EditText02" />

         <Button android:text="Reset" android:id="@+id/Button02"

                 android:layout_width="100px" android:layout_height="wrap_content"

                 android:layout_below="@id/EditText02"

        android:layout_alignRight="@id/EditText02" />

</RelativeLayout>

Absolute Layout

Es una capa donde se utilizan coordenadas X e Y para indicarle donde colocar los elementos dentro del diseño. En cada elemento del código se le indicará el valor de X y de Y.

<?xml version="1.0" encoding="utf-8"?>

<AbsoluteLayout android:id="@+id/AbsoluteLayout01"

         android:layout_width="fill_parent" android:layout_height="fill_parent"

         xmlns:android="http://schemas.android.com/apk/res/android">

         <EditText android:id="@+id/EditText01" android:layout_width="200px"

                 android:layout_height="wrap_content" android:layout_x="12px"

                 android:layout_y="12px" />

         <Button android:text="Search" android:id="@+id/Button01"

                 android:layout_width="100px" android:layout_height="wrap_content"

                 android:layout_x="220px" android:layout_y="12px" />

</AbsoluteLayout>

Frame Layout

Este Layout consiste en un marco que ocupa toda la pantalla, y donde los controles se dispondrán a partir de la esquina superior izquierda, por lo que es probable que haya elementos que se queden ocultos detrás de otros.

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout android:id="@+id/FrameLayout01"

         android:layout_width="fill_parent" android:layout_height="fill_parent"

         xmlns:android="http://schemas.android.com/apk/res/android">

         <ImageView android:id="@+id/ImageView01" android:src="@drawable/android"

                 android:layout_width="fill_parent"

        android:layout_height="fill_parent"

                 android:scaleType="center" />

         <TextView android:text="Android Partaker" android:id="@+id/TextView01"

                 android:layout_width="wrap_content"

        android:layout_height="wrap_content"

                 android:layout_marginBottom="20dip"

        android:layout_gravity="center_horizontal|bottom"

                 android:padding="10dip"

        android:textColor="#AA0000" android:textStyle="bold"

                 android:textSize="20px" android:background="#00000000" />

</FrameLayout>

Estructura de un proyecto Android en Eclipse

Cuando creamos un proyecto Android en Eclipse se genera automáticamente la estructura de carpetas necesarias para poder generar posteriormente la aplicación. 

En la siguiente imagen se muestran los elementos creados inicialmente para un nuevo proyecto Android:

Elementos principales

Carpeta/src/

Contiene todo el código fuente de la aplicación, código de la interfaz gráfica, clases auxiliares, etc. Inicialmente, Eclipse creará por nosotros el código básico de la pantalla (Activity) principal de la aplicación, siempre bajo la estructura del paquete java definido.

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 de deberán distribuir entre las siguientes carpetas:

• /res/drawable/. Contienen las imágenes de la aplicación. Se puede dividir en /drawable-ldpi,/drawable-mdpi y /drawable-hdpi para utilizar diferentes recursos dependiendo de la resolución del dispositivo.
• /res/layout/. Contienen los ficheros de definición de las diferentes pantallas de la interfaz gráfica. Se puede dividir en /layout y /layout-land para definir distintos layouts dependiendo de la orientación del dispositivo.
• /res/anim/. Contiene la definición de las animaciones utilizadas por la aplicación.
• /res/menu/. Contiene la definición de los menús de la aplicación.
• /res/values/. Contiene otros recursos de la aplicación como por ejemplo cadenas de texto (strings.xml), estilos (styles.xml), colores (colors.xml), etc.
• /res/xml/. Contiene los ficheros XML utilizados por la aplicación.
• /res/raw/. Contiene recursos adicionales, normalmente en formato distinto a XML, que no se incluyan en el resto de carpetas de recursos.

Como ejemplo, para un proyecto nuevo Android, se crean los siguientes recursos para la aplicación:

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 en java dirigidos al control de los recursos de la aplicación.

El más importante es el que se puede observar en la imagen, el fichero R.java, y la clase R.
Esta clase R contendrá en todo momento una serie de constantes con los ID de todos los recursos de la aplicación incluidos en la carpeta /res/, de forma que podamos acceder fácilmente a estos recursos desde nuestro código a través de este dato. Así, por ejemplo, la constante R.drawable.icon contendrá el ID de la imagen “icon.png”contenida en la carpeta /res/drawable/. Veamos como ejemplo la clase R creada por defecto para un proyecto nuevo:

public final class R {
public static final class attr {
}
public static final class drawable {
public static final int icon=0x7f020000;
}
public static final class layout {
public static final int main=0x7f030000;
}
public static final class string {
public static final int app_name=0x7f040001;
public static final int hello=0x7f040000;
}
}

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 /libs/
Contendrá las librerías auxiliares, normalmente en formato “.jar” que utilicemos en nuestra aplicación Android.

Fichero AndroidManifest.xml

Contiene la definición en XML de los aspectos principales de la aplicación, como por ejemplo su identificación (nombre, versión, icono, …), sus componentes (pantallas, mensajes, …), o los permisos necesarios para su ejecución. Veremos más adelante más detalles de este fichero.
En el siguiente post veremos los componentes software principales con los que podemos construir una aplicación Android.