Unidad 3. PrimerProyecto. Nuestra primera aplicacio n Android

Transcripción

1 Unidad 3. PrimerProyecto. Nuestra primera aplicacio n Android Jose A. Montenegro Dpto. Lenguajes y Ciencias de la Computacio n ETSI Informa tica. Universidad de Ma laga monte@lcc.uma.es 14 de abril de 2012 Digitally signed by Jose A. Montenegro Date: :26:12 CEST Reason: Curso Android CEP 2012 Location: Málaga Jose A Montenegro (monte@lcc.uma.es) Curso Android CEP-Ma laga. 1/39

2 Índice 1 Creando el Proyecto 2 Componentes del proyecto 3 Hola mundo al detalle Contenido detallado de PrimerProyecto 4 Probando nuestra Aplicación Ejecución de la Aplicación Vista Emulador y Dispositivos Pruebas de Conceptos y Prácticas José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 2/39

3 Sección 1 Creando el Proyecto José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 3/39

4 Creando el Proyecto Pasos para crear proyecto 1 En Eclipse, escoger F ile New AndroidP roject. Aparecerá una ventana para creación nuevo proyecto. 2 Rellenar el nombre del proyecto, como PrimerProyecto. 3 Seleccionar una de las versiones de las SDK instaladas. 4 Rellenar el nombre de la aplicación, como PrimerProyecto. 5 Rellenar el nombre del paquere, como es.uma.primerproyecto. 6 Crear la actividad (Activity) principal en el mismo paso, asegurarse que la opción Create Activity está marcada. José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 4/39

5 Creando el Proyecto Nuevo proyecto Una vez que tenemos ejecutado Eclipse es necesario ejecutar Wizard mediante File --> New Project. Podemos ver en la figura la selección de Android Project. Figura 1: Ejecución del Wizard para crear Proyecto Android José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 5/39

6 Creando el Proyecto Configuración de los valores del proyecto Project name Nombre del Proyecto no de la aplicación Workspace Carpeta donde están los proyectos Eclipse. Target name Imágenes de Android instaladas. Es necesaria escoger una. Application name Nombre Aplicación. Package name Nombre del paquete de java. Activity El elemento principal de una aplicación Android. Minimum SDK version Mínima versión del SDK necesaria para ejecutar la aplicación. Figura 2: Cfg Proyecto José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 6/39

7 Creando el Proyecto Sección 2 Componentes del proyecto José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 7/39

8 Componentes del proyecto Componentes del proyecto I Una vez configurado los valores del proyecto pulsamos el botón Next >. Eclipse generará un proyecto básico con la estructura que muestra la figura. src Contiene el código fuente de la aplicación organizado en paquetes. Incluye en nuestro caso PrimerProyectoActivity.java, que es archivo por defecto que ejecuta la aplicación (Activity). gen Archivo generados automáticamente por Java, utilizar solo lectura. Incluye archivo recursos R. Figura 3: Contenido Proyecto José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 8/39

9 Componentes del proyecto Componentes del proyecto II Android Library/ Carpeta que contiene la referencia a SDK Android. assets/ Directorio que almacena recursos necesarios para la aplicación p.ej archivos multimedia. Accesible de la clase del sistema AssetManager. AndroidManifiest.xml Archivo que contiene la descripción de la aplicación y valores de configuración que veremos en detalle más delante. José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 9/39

10 Componentes del proyecto Componentes del proyecto III res Directorio que almacena los recursos utilizados por el Interfaz Gráfico (UI). Está organiza en subcarpetas con documentos xml, cada uno dedicado a las siguientes definiciones: anim : Animaciones. color : Colores. layout : Interfaz de usuario. menu : Menús de la aplicación. values : Definición de estilos, cadenas de texto etc. Y además elementos que almacenan ficheros con elementos específicos: drawable : Imágenes. raw : Binarios. xml : XML. José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 10/39

11 Componentes del proyecto Sección 3 Hola mundo al detalle José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 11/39

12 Hola mundo al detalle Hola mundo al detalle Para comprender mejor la aplicación generada por el entorno pasaremos a ver en detalle los siguientes ficheros: AndroidManifest.xml : Comunica al sistema que PrimerProyectoActivity es el primer elemento a ejecutar cuando inicie la aplicación. PrimerProyectoActivity.java : Código Java de la aplicación../res/layout/main.xml : Descripción del interfaz gráfico../res/values/strings.xml : Valores de las cadenas de texto. Clase R,java : Creada automáticamente por la SDK, no tiene que ser modificada. José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 12/39

13 Hola mundo al detalle Contenido detallado de PrimerProyecto AndroidManifest.xml (android.intent.action.main android.intent.category.launcher) 1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest xmlns:android=" 3 package="es.uma" android:versioncode="1" android:versionname="1.0"> 4 <uses-sdk android:minsdkversion="3" /> 5 <application android:icon="@drawable/icon" 6 android:label="@string/app_name"> 7 <activity android:name=".primerproyectoactivity" 8 android:label="@string/app_name"> 9 <intent-filter> 0 <action android:name="android.intent.action.main" /> 1 <category android:name="android.intent.category.launcher" /> 2 </intent-filter> 3 </activity> 4 </application> 5 </manifest> José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 13/39

14 Hola mundo al detalle Contenido detallado de PrimerProyecto PrimerProyectoActivity.java 1 package es.uma.primerproyecto; 2 3 import android.app.activity; 4 import android.os.bundle; 5 6 public class PrimerProyectoActivity extends Activity { 7 /** Called when the activity is first created. */ 9 public void oncreate(bundle savedinstancestate) { 0 super.oncreate(savedinstancestate); 1 setcontentview(r.layout.main); 2 } 3 } José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 14/39

15 Hola mundo al detalle Contenido detallado de PrimerProyecto Todas las actividades extiende la clase abstracta Activity o alguna de sus subclases. El punto de entrada de cada actividad es el método oncreate(). Debemos sobreescribir el método para inicializar la actividad, para configurar el UI, crear los métodos de los botones, inicializar los parámetros y comenzar las hebras. José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 15/39

16 Hola mundo al detalle Contenido detallado de PrimerProyecto Si la actividad principal no es creada con el proyecto o debemos añadir otra actividad, los pasos para crear una actividad serán: 1 Crear una clase que extiende Activity. En Eclipse, sobre el proyecto con el botón derecho, escoger New Class, y especificar android.app.activity como clase padre.) 2 Sobreescribir el método oncreate(). En Eclipse, este puede ser realizando seleccionado la clase y con el botón derecho escoger Source Override/ImplementMethods..., y seleccionar el método oncreate().) Figura 4: Sobreescribir el método. José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 16/39

17 Hola mundo al detalle Contenido detallado de PrimerProyecto Como la mayoría de los métodos que sobreescribimos, debemos invocar al método de la clase padre, o una excepción es lanzada en tiempo de ejecución. En este caso super.oncreate() debe ser invocado primero para inicializar la actividad. 1 package es.uma.primerproyecto; 2 3 import android.app.activity; 4 import android.os.bundle; 5 6 public class PrimerProyectoActivity extends Activity { 7 /** Called when the activity is first created. */ 9 public void oncreate(bundle savedinstancestate) { 0 super.oncreate(savedinstancestate); 1 setcontentview(r.layout.main); 2 } 3 } Listing 1: src/es/uma/primerproyectoactivity.java José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 17/39

18 Hola mundo al detalle Contenido detallado de PrimerProyecto Si utilizamos una UI, especificamos el diseño (layout) en un archivo XML en el directorio res/layout/.en este caso es denominado main.xml,tal y como muestra el siguiente listado. Establecemos el diseño de la actividad utilizando el método setcontentview(), pasándole el ID del recurso del archivo XML. En este caso R.layout.main, como vimos en el listado anterior. 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android=" 3 android:orientation="vertical" 4 android:layout_width="fill_parent" 5 android:layout_height="fill_parent" 6 > 7 <TextView 8 android:layout_width="fill_parent" 9 android:layout_height="wrap_content" 0 android:text="@string/hello" 1 /> 2 </LinearLayout> Listing 2: res/layout/main.xml José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 18/39

19 Hola mundo al detalle Contenido detallado de PrimerProyecto El siguiente paso es declarar las propiedades de la actividad en el archivo XML AndroidManifest XML. Los recursos son definidos en el archivo strings.xml en la carpeta res/values/ folder, como mostramos en el siguiente listado. Por tanto tenemos un lugar donde almacenamos todas las cadenas que necesitamos cambiar o reutilizar. 1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3 <string name="hello">hola Mundo, PrimerProyectoActivity!</string> 4 <string name="app_name">primerproyecto</string> 5 </resources> Listing 3: res/values/strings.xml José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 19/39

20 Hola mundo al detalle Contenido detallado de PrimerProyecto Una vez compilado el proyecto, las referencias a los recursos son referenciados a una clase denominada R.java. La aplicación Asset Packaging Tool (aapt) auto genera este archivo. 1 package es.uma; 2 3 public final class R { 4 public static final class attr { 5 } 6 public static final class drawable { 7 public static final int icon=0x7f020000; 8 } 9 public static final class layout { 0 public static final int main=0x7f030000; 1 } 2 public static final class string { 3 public static final int app_name=0x7f040001; 4 public static final int hello=0x7f040000; 5 } 6 } Listing 4: Clase R José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 20/39

21 Hola mundo al detalle Contenido detallado de PrimerProyecto En R.java cada recurso es mapeado a un único valor. De esta forma, la clase R.java proporciona una forma de referenciar recursos externos al código Java. Por ejemplo, para referencia el archivo main.xml en java, utilizamos el entero R.layout.main. Para referenciar el mismo elemento en XML, utilizaremos la Recurso Referencia en Java Referencia en XML res/layout/main.xml button R.id.home button string name= hello Tabla 1: Comparativa de referencias de los elementos en Java y XML José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 21/39

22 Hola mundo al detalle Contenido detallado de PrimerProyecto Figura 5: Main.xml formato visual Eclipse José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 22/39

23 Hola mundo al detalle Contenido detallado de PrimerProyecto Figura 6: string.xml formato visual Eclipse José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 23/39

24 Hola mundo al detalle Contenido detallado de PrimerProyecto 1 2 AndroidManifest.xml <ac5vity> android.intent.ac5on.main android.intent.category.launcher 4 PrimerProyectoAc5vity.java setcontentview(r.layout.main); 3./res/values/strings.xml <string name="hello">hello World, PrimerProyectoAc5vity!</string>./res/layout/main.xml <TextView android:text="@string/hello" /> Figura 7: Vinculación de los archivos de la aplicación José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 24/39

25 Hola mundo al detalle Contenido detallado de PrimerProyecto Sección 4 Probando nuestra Aplicación José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 25/39

26 Probando nuestra Aplicación Ejecución de la Aplicación Ejecución de la Aplicación Simplemente ejecutando la sentencia Run eclipse generará un archivo PrimerProyecto.apk que será trasladado al Emulador y finalmente es ejecutado, como muestran las siguientes imágenes 1, 2,3. La figura 1 muestra el contenido del archivo PrimerProyecto.apk, que en realidad es un archivo comprimido con formato zip. Podemos ver que la aplicación tiene un tamaño de unos 8K. Figura 8: Contenido de la aplicación PrimerProyecto.apk José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 26/39

27 Probando nuestra Aplicación Ejecución de la Aplicación Detalle del contenido del archivo PrimerProyecto.apk El archivo PrimerProyecto.apk contiene los siguientes elementos: AndroidManifest.xml : Copia del manifiesto del proyecto en formato wbxml 1. classes.dex : Dalvik Executable Format. Conversión del código Java a código optimizado para Dalvik. resources.arsc : Archivo que contiene recursos pre-compilados. res/drawable : Icono de la aplicación. res/layout : Copia del archivo main.xml del proyecto en formato wbxml. META-INF : Directorio donde se almacena la información (firma) que permite asegurar la integridad de la aplicación.apk. 1 AXMLPrinter2, apktool, o Androguard José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 27/39

28 Probando nuestra Aplicación Vista Emulador y Dispositivos PrimerProyecto en Emulador Android Figura 9: PrimerProyecto en Android José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 28/39

29 Probando nuestra Aplicación Vista Emulador y Dispositivos PrimerProyecto en Simulador Android 3.2. Figura 10: PrimerProyecto en Android 3.2 José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 29/39

30 Probando nuestra Aplicación Vista Emulador y Dispositivos PrimerProyecto en Dispositivo Android HTC Desire Figura 11: PrimerProyecto en HTC Desire José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 30/39

31 Probando nuestra Aplicación Pruebas de Conceptos y Prácticas Pruebas de concepto Para realizar un repaso de los elementos del proyecto inicial, vamos a realizar una prueba de conceptos muy básica. Las modificaciones serán realizadas inicialmente en el archivo string.xml mostrado en listado 3, y después modificaremos el archivo PrimerProyectoActivity.java mostrado en el listado 1. La prueba consta de la la modificación del mensaje a mostrar de forma estática (compilación) y dinámica (ejecución). Para ello modificaremos los atributos xml o utilizaremos los métodos de la clase Java. José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 31/39

32 Probando nuestra Aplicación Pruebas de Conceptos y Prácticas Pruebas de concepto: Modificación Valores string.xml. I Ejercicio 1 Primero modificaremos la cadena hello definida en la ĺınea 3 (archivo string.xml), sustituyendo la cadena Hola Mundo, PrimerProyectoActivity! Qué inteligentes son los alumnos del curso del CEP!. El resultado de la modificación es mostrado en la figura 1. Hemos modificado el mensaje mostrado por la aplicación. Figura 12: Modificación de la Cadena Hello José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 32/39

33 Probando nuestra Aplicación Pruebas de Conceptos y Prácticas Pruebas de concepto: Modificación Valores string.xml. II Ejercicio 2 Ahora modificaremos la cadena app name definida en la ĺınea 4 (archivo string.xml), sustituyendo la cadena PrimerProyecto CursoCEP2012. El resultado de la modificación es mostrado en la figura 2. Hemos modificado el nombre de la aplicación. Figura 13: Modificación de la Cadena app name José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 33/39

34 Probando nuestra Aplicación Pruebas de Conceptos y Prácticas Pruebas de concepto: Modificación del texto mostrado. I Hemos visto como modificar el texto mostrado por pantalla de nuestra aplicación mediante el código xml. Ahora veremos como es posible realizar la modificación desde Java, permitiendo realizar modificaciones en tiempo de ejecución de los elementos. Para realizar las modificaciones haremos uso de las equivalencias mostrada en la tabla 1. R.id.TextoBienvenida José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 34/39

35 Probando nuestra Aplicación Pruebas de Conceptos y Prácticas Pruebas de concepto: Modificación del texto mostrado. II Los pasos a realizar son: 1 Añadir identificador a la entrada de texto que muestra el mensaje, debido en que este caso no posee ninguno. 1 <TextView Método Visual: pulsar botón derecho en el texto y veremos la figura 6. Método textual: Añadir un atributo identificador (id) al elemento TextView del archivo main.xml. 2 android:id="@+id/textobienvenida" Listing 5: Añadir identificador a TextView 2 Finalmente hacemos uso del método findviewbyid. José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 35/39

36 Probando nuestra Aplicación Pruebas de Conceptos y Prácticas Pruebas de concepto: Modificación del texto mostrado. III Figura 14: Modo visual para cambiar ID Añadimos al archivo PrimerProyecto.java, las siguientes sentencias. 1 TextView txt = (TextView) findviewbyid(r.id.textobienvenida); 2 txt.settext("hola"); Listing 6: Modificación mensaje mostrado mediante Java José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 36/39

37 Probando nuestra Aplicación Pruebas de Conceptos y Prácticas Pruebas de concepto: Tamaño del texto mostrado. I Observamos en el listado 6 como obtenemos el objeto mediante el identificador del Texto, utilizando el método findviewbyid. Esté método realiza un recorrido por el árbol xml hasta encontrar el identificador, por lo que un uso continuado en determinadas situaciones supone un decremento de la eficiencia de la aplicación. Al igual que hemos modificado el mensaje a mostrar, tenemos acceso a todos los métodos del objeto. De forma similar si queremos modificar la longitud del mensaje a 45pixels, ejecutaría la sentencia. 1 txt.settextsize(45); Listing 7: Modificación tamaño mensaje mostrado mediante Java José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 37/39

38 Probando nuestra Aplicación Pruebas de Conceptos y Prácticas Ejercicio 3 En vez del código Java utilizado anteriormente, vamos a realizar un cambio del tamaño del mensaje mediante el archivo xml, Además modificaremos el color del mensaje utilizando las dos modalidades, mediante el código en Java y el archivo xml. Una descripción detallada de los atributos XML y los métodos de TextView puede ser consultada en AndroidSDK. José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 38/39

39 José A. Montenegro Montes Dpto. Lenguajes y Ciencias de la Computación ETSI Informática. Universidad de Málaga monte@lcc.uma.es José A Montenegro (monte@lcc.uma.es) Curso Android CEP-Málaga. 39/39