Curso Android por Adrían Catalán - muestra HTML

TOME EN CUENTA: Esta es una vista previa en HTML y algunos elementos como enlaces o números de página pueden ser incorrectos.
Para la versión completa, descargue el libro en PDF, ePub, Kindle
index-1_1.jpg

index-2_1.jpg

index-2_2.jpg

index-2_3.jpg

index-2_4.jpg

CURSO ANDROID

2

SOBRE LA GUÍA

Curso Android:

Desarrollo de aplicaciones móviles

Versión 1 / junio 2011

Nivel: Básico / Intermedio

El Curso Android se encuentra en línea en:

http://www.maestrosdelweb.com/editorial/curso-android

Un proyecto de Maestros del Web

Ð Edición: Stephanie Falla Aroche

Ð Diseño y diagramación: Iván E. Mendoza

Ð Autor: Adrián Catalán

Este trabajo se encuentra bajo una licencia Creative Commons

Atribución-NoComercial-CompartirIgual 3.0 Unported (CC BY-NC-SA 3.0)

El logotipo de Android es compartido por Google bajo licencia Creative Commons por Atribución.

Contacto

http://www.maestrosdelweb.com/sitio/correo/

Redes sociales

Facebook: http://www.facebook.com/maestrosdelweb

Twitter: http://www.twitter.com/maestros

index-3_1.jpg

index-3_2.jpg

index-3_3.jpg

index-3_4.jpg

index-3_5.jpg

CURSO ANDROID

3

SOBRE EL AUTOR

Adrián Catalán

Guatemalteco, Ingeniero en Sistemas con una Maestría en Tecnologías de Información con especialidad en Seguridad informática y Redes de Computadoras de la Universidad Galileo.

Es catedrático de cursos sobre arquitectura de computadoras, máquinas y lenguajes, compiladores, bases de datos, ingeniería de software, desarrollo web, sistemas operativos, redes, voz sobre IP, seguridad informática y métodos forenses en IT.

Desarrollador de software, apasionado por aplicaciones web (Ruby On Rails) y móviles (Android), fundador del grupo de tecnologías de Google en Guatemala(GTUG) y co fundador de Elemental Geeks es un firme creyente del infinito talento hispanoamericano, consciente de la necesidad de fomentarlo y darlo a conocer.

Puedes comunicarte a través de redes sociales:

Email: adriancatalan@gmail.com

Facebook: adrian.catalan

Twitter: @ykro

index-4_1.jpg

CURSO ANDROID

4

ÍNDICE

1 | Sobre la guía ....................................................................................... 2

2 | Sobre el autor .....................................................................................3

3 | Construir un lector de feeds simple ................................................... 5

4 | Aumentar la funcionalidad de un lector de feeds ........................... 23

5 | Trabajando con imágenes (cámara y galería) .................................. 44

6 | Grabación y reproducción de vídeo ..................................................55

7 | Geolocalización y utilización de mapas de Google .......................... 64

8 | Trabajar con el acelerómetro ...........................................................73

9 | Reproducción de sonido en un ciclo infinito ................................... 83

10 | Envío de email utilizando Android ................................................... 90

11 | Trabajando con APIs (Facebook y Twitter) ....................................... 99

12 | Conectándonos con Apis de Google ............................................... 117

13 | Comunidades android ................................................................... 134

14 | Otras guías de maestros del web ...................................................135

index-5_1.jpg

1

capítulo

Construir un lector de

feeds simple

index-6_1.jpg

index-6_2.jpg

CURSO ANDROID

6

CAPÍTULO 1

Construir un lector de feeds simple

Bienvenidos al primer capítulo del curso sobre Android daremos inicio con el funcionamiento de la arquitectura de esta plataforma móvil y los bloques básicos de una aplicación.

Kernel de Linux

En la base tenemos el kernel 2.6 de Linux, Android lo utiliza por su robustez demostrada y por la implementación de funciones básicas para cualquier sistema operativo, por ejemplo: seguridad, administración de memoria y procesos, implementación de conectividad de red (network stack) y varios interpretes (drivers) para comunicación con los dispositivos físicos(hardware).

Android utiliza como base el kernel de Linux pero los dos sistemas no son lo mismo, Android no cuenta con un sistema nativo de ventanas de Linux ni tiene soporte para glibc (libería estándar de C) ni tampoco es posible utilizar la mayoría de aplicaciones de GNU de Linux.

Además de todo lo ya implementado en el kernel de Linux, Android agrega algunas cosas específicas para plataformas móviles como la comunicación entre procesos (lograda a través del binder), la forma de manejar la memoria compartida (ashmem) y la administración de energía (con wakelocks). De las características únicas del kernel utilizado por Android encuentran más información en Android Kernel Features 1.

Librerías y ejecución

Sobre el kernel, tenemos un conjunto de librerías de C y C++ utilizadas por el sistema para varios fines 1 http://elinux.org/Android_Kernel_Features

index-7_1.jpg

index-7_2.jpg

index-7_3.jpg

CURSO ANDROID

7

como el manejo de la pantalla (surface manager), mapas de bits y tipos de letra (Free Type), gráficas en 2D y 3D (SGL y OpenGL), manejo de multimedia (Media Framework), almacenamiento de datos (SQLite) y un motor para las vistas web y el navegador (WebKit).

Junto a estas librerías, encontramos lo necesario para la ejecución de las aplicaciones a través de la máquina virtual Dalvik. Cada aplicación utiliza una instancia de la máquina virtual ejecutando un archivo DEX (Dalvik Executable) y el sistema está optimizado para que se ejecuten múltiples instancias de la máquina virtual. Se desarrolla en Java pero no se utiliza una máquina virtual de Sun para su ejecución ni tampoco archivos CLASS.

Estructura de aplicaciones

Sobre las librerías encontramos una estructura que nos brinda un contexto para desarrollar, este framework permite a los desarrolladores aprovechar un sistema de vistas ya construido, administrar notificaciones y acessar datos a través de proveedores de contenido entre otras cosas.

Aplicaciones

Las aplicaciones centrales que incluye el sistema por defecto son: teléfono, navegador, manejo de contactos, etc. En esta capa de la arquitectura es donde trabajaremos desarrollando aplicaciones.

Bloques básicos de una aplicación

Una vez vista la arquitectura, empezaremos con lo fundamental para desarrollar una aplicación. Los

index-8_1.jpg

index-8_2.jpg

CURSO ANDROID

8

componentes básicos de una aplicación son: activities, intents, views, services, content providers y broadcast receivers.

Si dominan bien estos términos pueden saltar directo al código.

Ð Activities1: son componentes de la interfaz que corresponde a una pantalla. Podemos visualizarlo como un mazo de cartas en el que tenemos varias cartas pero solamente una está hasta arriba.

Una aplicación para una lista de cosas por hacer (remember the milk) puede tener una actividad para ingresar las cosas por hacer y otra actividad para mostrar el listado, en conjunto estas actividades conforman la aplicación.

Ð Intents2: son mensajes que provocan notificaciones o cambios de estatus, que al ser recibidos por actividades o servicios pueden levantar procesos. De esta forma se unen componentes dentro de la misma aplicación o de diferentes aplicaciones.

Ð Views 3: son los componentes de la interfaz de usuario, diferentes vistas pueden agruparse a través de grupos logrando una jerarquía, esto se logra a través de la disposición de los componentes a través de un archivo XML.

Ð Services4 : son componentes que ejecutan operaciones en segundo plano y no tienen una interfaz 1 http://developer.android.com/guide/topics/fundamentals/activities.htm

2 http://developer.android.com/guide/topics/intents/intents-filters.html

3 http://developer.android.com/guide/topics/ui/index.html

4 http://developer.android.com/guide/topics/fundamentals/services.html

index-9_1.jpg

index-9_2.jpg

CURSO ANDROID

9

de usuario. Por ejemplo, al escuchar música, hay un servicio encargado de la reproducción que se ejecuta de fondo y la aplicación que manipulamos le manda mensajes a este servicio diciéndole que se detenga, pause o reproduzca la siguiente canción.

Ð Content Providers1: representan la abstracción para almacenar y obtener datos permanentes y aplicaciones diferentes. El sistema incluye algunos proveedores de contenido útiles (audio, video, etc) y además pueden desarrollarse nuevos.

Ð Manifest2: El archivo AndroidManifest.xml es donde se configura la aplicación, se agregan actividades, se asignan permisos, etc.

Ð Broadcast Receivers: son componentes que responden a avisos y anuncios de difusión (broadcast). Estos avisos provienen del sistema (batería baja, una llamada entrante, etc) y de aplicaciones (pasando avisos de una aplicación a otra). Aun que no muestran una interfaz de usuario algunas veces utilizan barras de progreso para mostrar avances. Estos se activan a través de mensajes asincrónicos llamados intents (mencionados arriba).

Ejemplo: Lector de feeds

La aplicación que realizaremos es un lector para el feed de Maestros del Web, queremos que al finalizar se vea de la siguiente forma:

1 http://developer.android.com/guide/topics/providers/content-providers.html

2 http://developer.android.com/guide/topics/manifest/manifest-intro.html

index-10_1.jpg

index-10_2.jpg

CURSO ANDROID

10

Disposición inicial

Arrancamos descargando el código base1 que debe ser importado hacia un proyecto nuevo. En mi caso, el código descargado lo tengo en el folder “/Users/ykro/Desktop/LectorFeedMDWBase”:

En este código encontrarás algunas cosas de ayuda para el desarrollo del proyecto. Si quisieran iniciar desde cero, con un proyecto nuevo, lo mínimo que deberían hacer para tenerlo listo es:

Ð Darle permiso a la aplicación para que pueda accesar a internet

Para hacer esto, vamos al archivo AndroidManifest.xml y justo antes de la etiqueta que cierra manifest colocamos:

<br />

<uses-permission android:name=”android.permission.INTERNET” /><br />

1 https://github.com/androidMDW/guia1base

index-11_1.jpg

CURSO ANDROID

11

Ð Tener un LinearLayout con orientación vertical en el archivo de diseño principal.

Para lograr esto, en el archivo /res/layout/main.xml es necesario tener:

<br />

<LinearLayout android:id=”@+id/LL01” android:layout_width=”fill_parent”

android:layout_height=”fill_parent” android:orientation=”vertical”

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

</LinearLayout>

Ð Tener una forma de reconocer XML.

En el código de demo se provee la clase src/com/android/mdw/demo/XMLParser.java. No vamos a repa-sar el código de cómo se hace el reconocimiento de XML, este parser tiene un funcionamiento general sin embargo para los fines de esta aplicación nos interesa que devuelva una lista simplemente encadenada (LinkedList de Java) y en cada posición un diccionario (HashMap de Java) porque de esa forma vamos a almacenar los datos.

Esto se logra a través de un método llamado parse() y adicional a esto, en el constructor el XMLParser debe recibir la dirección del feed que reconocerá.

Diseño

Trabajaremos con los siguientes views para lograr el objetivo.

Ð LinearLayout1: agrupa los elementos en un solo sentido (vertical u horizontal).

Ð ListView2: muestra los elementos en un listado vertical con scroll.

Ð TextView3: una etiqueta para colocar texto.

Ð Button4: un botón para presiona.

Vamos a colocar primero un LinearLayout con arreglo vertical y dentro de él dos cosas:

1 http://developer.android.com/guide/tutorials/views/index.html

2 http://www.maestrosdelweb.com/editorial/curso-android-construir-lector-de-feeds/

3 http://developer.android.com/reference/android/widget/TextView.html

4 http://developer.android.com/reference/android/widget/Button.html

index-12_1.jpg

index-12_2.jpg

CURSO ANDROID

12

1 | LinearLayout con arreglo horizontal (para la etiqueta y el botón).

2 | ListView para los elementos del feed.

Nuestro archivo /res/layout/main.xml quedaría entonces de la siguiente forma:

<br />

<?xml version=”1.0” encoding=”utf-8”?><br />

<LinearLayout android:id=”@+id/LL01”

android:layout_width=”fill_parent” android:layout_height=”fill_parent”

android:orientation=”vertical” xmlns:android=”http://schemas.android.com

/apk/res/android”>

<LinearLayout android:id=”@+id/LL02”

android:orientation=”horizontal” android:layout_width=”wrap_content”

android:layout_height=”wrap_content”>

<TextView android:id=”@+id/tvLoadTip”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content” android:text=”Presione

el botón para cargar datos”><br />

</TextView><br />

<Button android:id=”@+id/btnLoad”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”Enviar”><br />

</Button><br />

</LinearLayout>

<ListView android:id=”@+id/lstData”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content” android:padding=”5dip”>

</ListView>

</LinearLayout></p>

<p>

Es importante notar los identificadores que colocamos, ya que los utilizaremos más adelante.

index-13_1.jpg

index-13_2.jpg

CURSO ANDROID

13

Mostrar datos siguiendo el diseño

Luego de terminado el diseño podemos enfocarnos en el código que nos permitirá poblar el ListView con los elementos del feed que vamos a leer.

Trabajemos ahora en el archivo src/com/android/mdw/demo/Main.java.

Inicialmente encontramos 2 constantes que utilizaremos para guardar la información en un HashMap.

<br />

static final String DATA_TITLE = “T”;<br />

static final String DATA_LINK = “L”;<br />

Agregamos una estructura de datos estática para guardar la información del feed una vez la fuimos a traer y reconocimos.

<br />

static LinkedList<HashMap<String, String>> data;<br />

En una aplicación real esto no debería hacerse nunca, todo campo estático (variable de clase) debería ser final1 y en este caso no lo es porque lo asignaremos luego de que el parser devuelva la data. La forma correcta de realizar este almacenamiento volátil es utilizando clases de aplicación, algo que veremos en próximos capítulos y si se quisiera almacenamiento no volátil se tiene acceso a base de datos a través de SQLite. Haremos también una función auxiliar que recibe una lista de mapas, y utilizando esta data crea un adaptador para poblar al ListView del diseño.

<br />

private void setData(LinkedList<HashMap<String, String>> data){<br />

SimpleAdapter sAdapter = new SimpleAdapter(getApplicationContext(), data,<br

/>

android.R.layout.two_line_list_item,<br />

new String[] { DATA_TITLE, DATA_LINK },<br />

1 http://en.wikipedia.org/wiki/Final_%28Java%29

index-14_1.jpg

CURSO ANDROID

14

new int[] { android.R.id.text1, android.R.id.text2 });<br />

ListView lv = (ListView) findViewById(R.id.lstData);<br />

lv.setAdapter(sAdapter);<br />

}<br />

Nuestro objetivo final es tomar una vista (ListView) creada en el diseño y poblarla de datos a través de un adaptador . La información que representaremos por cada fila del listado es el título del artículo y el link del mismo. Para nuestro caso vamos a utilizar el adaptador simple (SimpleAdapter) que recibe 5

parámetros.

1 | Un contexto sobre el cual puede trabajar, lo obtenemos llamando a getApplicationContext()

2 | Un Listado de mapas con la data a mostrar, lo recibimos como parámetro en la función.

3 | Un Layout para cada fila, en este caso usaremos uno de los predeterminados de Android llamado android.R.layout.two_line_list_item este nos permite tener elementos con información en 2 líneas.

4 | Un arreglo de String con las llaves del diccionario que representarán los datos obtenidos de la lista especificada anteriormente.

5 | Un arreglo de int con los identificadores de los elementos de cada línea.

Con esta configuración, el adaptador nos dará elementos de 2 líneas mostrando en la primera el título del artículo y en la segunda el link del artículo. Esta configuración resulta muy útil porque todo está hecho, sin embargo no es personalizable, si queremos cambiar algunas cosas (fondo, color, letra, etc) de cada elemento sería necesario agregar otro layout para cada fila y si deseamos mostrar más información o no utilizar una lista de mapas entonces sería necesario hacer nuestro propio adaptador (esto lo haremos en próximos capítulos).

Carga de datos

La carga de datos nos tomará cierto tiempo, vamos a mostrarle un aviso de que los datos se están cargando. Queremos que el aviso se muestre y como tarea de fondo cargue los datos (esto NO es un servicio) vamos a necesitar de un hilo de ejecución1 que haga esta tarea.

1 http://download.oracle.com/javase/1.5.0/docs/api/java/lang/Thread.html

index-15_1.jpg

index-15_2.jpg

index-15_3.jpg

CURSO ANDROID

15

Android nos presenta la restricciones que no podemos alterar, los elementos de interfaz gráfica en un hilo de ejecución que no sea el principal por lo que es necesario utilizar un manejador para enviar un mensaje de un hilo a otro cuando la carga de datos haya terminado. Agregaremos entonces una variable para el diálogo de progreso es necesaria una variable global porque iniciamos el diálogo en una función y lo ocultamos en otra.

<br />

private ProgressDialog progressDialog;<br />

Otra para el manejador de mensajes entre hilos de ejecución:

<br />

private final Handler progressHandler = new Handler() {<br />

@SuppressWarnings(“unchecked”)<br />

public void handleMessage(Message msg) {<br />

if (msg.obj != null) {<br />

data = (LinkedList<HashMap<String, String>>)msg.obj;<br />

setData(data);<br />

}<br />

index-16_1.jpg

index-16_2.jpg

CURSO ANDROID

16

progressDialog.dismiss();<br />

}<br />

};<br />

Para el manejador, haremos una clase interna y anónima1 este tipo de clases las verán seguido para agregar funcionalidades que requieren de clases pero su tarea es tan pequeña que no vale la pena darle un nombre (y luego terminar con muchos nombres que se utilizan una sola vez).

Dentro de la clase Handler hemos agregado la anotación @SuppressWarnings(“unchecked”) para evitar una advertencia por la conversión de tipo (type casting) de objeto hacia lista realizada adelante. Es necesario implementar el método handleMessage(Message msg) y es aquí donde revisamos si viene un mensaje, lo convertimos a lista, llamamos al método setData previamente definido y cerramos el diálogo de progreso.

Por último, vamos a hacer una función auxiliar que inicia la carga de datos, muestra al usuario un diálogo de que se están cargando los datos y levanta un thread para lograr la carga.

<br />

private void loadData() {<br />

ProgressDialog progressDialog = ProgressDialog.show(<br />

Main.this,<br />

“”,<br />

“Por favor espere mientras se cargan los datos...”,<br />

true);</p>

<p> new Thread(new Runnable(){<br />

@Override<br />

public void run() {<br />

XMLParser parser = new XMLParser(feedUrl);<br />

Message msg = progressHandler.obtainMessage();<br />

msg.obj = parser.parse();<br />

progressHandler.sendMessage(msg);<br />

}}).start();<br />

1 http://www.google.com/url?q=http%3A%2F%2Fdownload.oracle.com%2Fjavase%2Ftutorial%2Fjava%2FjavaOO%2Fin

nerclasses.html&sa=D&sntz=1&usg=AFQjCNEbFcVxidDxasA0Rg3ED01_7EDHfA

index-17_1.jpg

index-17_2.jpg

CURSO ANDROID

17

}<br />

Para el diálogo de progreso, le enviamos 4 argumentos:

1 | Contexto, dado por la aplicación, como esta función la vamos a llamar desde una clase interna, el acceso es con el campo this de la clase Main.

2 | Título, no nos interesa que tenga título el aviso.

3 | Mensaje, le pedimos al usuario que espere.

4 | Indeterminado, no se puede cuantificar cuanto tiempo falta o cuanto progreso se ha logrado entonces el aviso será de duración indeterminada.

Luego tenemos un Thread a partir de otra clase interna y anónima que es una instancia de Runnable y definimos el método run donde se especifica lo que hará el hilo de ejecución y llamamos al método start para iniciarlo. En el método run instanciamos un parser nuevo de XML construimos un mensaje a partir del manejador y se lo enviamos con la data obtenida del parser.

Llamando todo desde la función onCreate

Trabajemos dentro de la función onCreate la cual se llama cuando la actividad es creada, primero le ponemos un bonito título a la ventana.

<br />

setTitle(“Lector de feed Maestros del Web”);<br />

El siguiente paso es asociarle una acción al botón para que cargue los datos, primero obtenemos el botón haciendo uso de la función findViewById con el identificador colocado en el diseño para posteriormente colocarle las acciones a realizar cuando se presione a través del método setOnClickListener. Este método recibe una instancia de la clase OnClickListener, de nuevo vamos a hacer una clase anónima y sobrecargaremos el método onClick.

<br />

Button btn = (Button) findViewById(R.id.btnLoad);<br />

btn.setOnClickListener(new OnClickListener() {<br />

@Override<br />

public void onClick(View v) {<br />

index-18_1.jpg

index-18_2.jpg

CURSO ANDROID

18

}<br />

});<br />

Dentro de la función onClick validaremos si el ListView ya tiene datos, si no los tiene los cargamos con una llamada a loadData pero si ya los tiene vamos a mostrarle un diálogo de alerta al usuario preguntando si está seguro que desea hacerlo.

<br />

ListView lv = (ListView) findViewById(R.id.lstData);<br />

if (lv.getAdapter() != null) {<br />

AlertDialog.Builder builder = new AlertDialog.Builder(Main.this);<br />

builder.setMessage(“ya ha cargado datos, ¿Está seguro de hacerlo de

nuevo?”)<br />

.setCancelable(false)<br />

.setPositiveButton(“Si”, new DialogInterface.OnClickListener()

{<br />

public void onClick(DialogInterface dialog, int

id) {<br />

loadData();<br />

}<br />

})<br />

.setNegativeButton(“No”, new DialogInterface.OnClickListener()

{<br />

public void onClick(DialogInterface dialog, int

id) {<br />

dialog.cancel();<br />

}<br />

})<br />

.create()<br />

.show();<br />

} else {<br />

loadData();<br />

}<br />

index-19_1.jpg

index-19_2.jpg

CURSO ANDROID

19

Para crear el diálogo de alerta, encadenamos llamadas a partir de un constructor AlertDialog.

Builder que recibe un contexto y de nuevo utilizamos Main.this.

Estas llamadas encadenadas nos permiten:

Ð Establecer un mensaje (setMessage)

Ð Obligar al usuario a responder y no solo cerrar (setCancelable)

Ð Colocar una acción cuando la respuesta es positiva (setPositiveButton)

Ð Colocar una acción cuando la respuesta es negativa (setNegativeButton)

Ð Crear el diálogo (create)

Ð Mostrar el diálogo (show)

Las más complicadas son las llamadas para colocar acciones ante una respuesta positiva o negativa.

Ambas requieren de un Listener que se disparara cuando el usuario presione el botón. Dentro del método onClick de otra clase anónima más, cuando es positivo llamamos a loadData y cuando es negativo ocultamos el diálogo.

El código completo queda de esta forma:

<br />

Button btn = (Button) findViewById(R.id.btnLoad);<br />

btn.setOnClickListener(new OnClickListener() {<br />

@Override<br />

public void onClick(View v) {<br />

ListView lv = (ListView) findViewById(R.id.lstData);<br />

if (lv.getAdapter() != null) {<br />

AlertDialog.Builder builder = new AlertDialog.Builder(Main.this);<br

/>

builder.setMessage(“ya ha cargado datos, ¿Está seguro de hacerlo de

nuevo?”)<br />

.setCancelable(false)<br />

.setPositiveButton(“Si”, new

DialogInterface.OnClickListener() {<br />

public void onClick(DialogInterface

index-20_1.jpg

index-20_2.jpg

CURSO ANDROID

20

dialog, int id) {<br />

loadData();<br />

}<br />

})<br />

.setNegativeButton(“No”, new

DialogInterface.OnClickListener() {<br />

public void onClick(DialogInterface

dialog, int id) {<br />

dialog.cancel();<br />

}<br />

})<br />

.create()<br />

.show();<br />

} else {<br />

loadData();<br />

}<br />

}<br />

});<br />

Para terminar, queremos aprovechar que contamos con el link de cada artículo y que cuando el usuario presione algún elemento en nuestra aplicación pueda visitarse el artículo vía el navegador.

<br />

ListView lv = (ListView) findViewById(R.id.lstData);<br />

lv.setOnItemClickListener(new OnItemClickListener() {<br />

@Override<br />

public void onItemClick(AdapterView<?> av, View v, int position, long id)

{<br />

HashMap<String, String> entry = data.get(position);<br />

Intent browserAction = new Intent(Intent.ACTION_VIEW,<br />

Uri.parse(entry.get(DATA_LINK)));<br />

startActivity(browserAction);<br />

}<br />

});<br />

index-21_1.jpg

index-21_2.png

index-21_3.jpg

CURSO ANDROID

21

Esto lo conseguimos modificando el evento de click sobre los ítems de la lista (setOnItemClickListener) primero obteniendo el elemento que ha sido presionado y luego con un intent de ACTION_VIEW1 este intent predefinido realiza la acción más obvia para mostrar datos al usuario, en nuestro caso se le envía un URI2 lo que permite visualizarlo con el navegador.

1 http://developer.android.com/reference/android/content/Intent.html#ACTION_VIEW

2 http://developer.android.com/reference/android/net/Uri.html

http://www.forosdelweb.com/f165/

https://github.com/androidMDW/guia1completo

index-22_1.jpg

CURSO ANDROID

22

Conclusión

En esta guía hemos visto varias cosas:

Ð Arquitectura de Android: conocimos la forma en que está construída la arquitectura.

Ð Bloques básicos de una aplicación: los elementos principales de una aplicación de Android.

Ð Manifest: aprendimos la forma y la ubicación del manifest, archivo para configuración de la aplicación.

Ð LinearLayout, TextView y Button: tuvimos un primer acercamiento a los elementos de la UI a través de estos 3 controles, una forma de manejar el diseño (layout) y dos controles para la interfaz de la aplicación.

Ð Eventos OnClick: aprendimos a manejar los eventos con listeners y asociar acciones para cuando el usuario interactúa con los elementos de la UI.

Ð Dialogs: iniciamos a trabajar con diálogos para mostrar avisos al usuario, en este caso únicamente de confirmación previo a la carga de datos.

Ð Threads y Handlers: el proceso de la carga y parsing de datos fue realizado con un thread extra y para la comunicación con el thread principal utilizamos un Message Handler.

Ð Iniciar otras activities: aprendimos el mecanismo necesario para iniciar otras activities aun que no fueran hechas por nosotros.

index-23_1.jpg

2

capítulo

Aumentar la

funcionalidad de un

lector de feeds

index-24_1.jpg

index-24_2.jpg

CURSO ANDROID

24

CAPÍTULO 2

Aumentar la funcionalidad de un lector de feeds

El lector de feed que desarrollaremos en este capítulo se diferencia del anterior porque permitiremos al usuario decidir si al presionar sobre un elemento quiere verlo en una vista previa dentro de la aplicación o en el navegador, para esta elección agregaremos un menú y personalizaremos el View de cada fila del resultado.

El ejemplo se verá de la siguiente manera:

Disposición inicial

Empecemos descargando el código1 que debe ser importado hacia un nuevo proyecto es muy similar al del capítulo anterior, pero revisemos las diferencias:

Ð El XMLParser ahora obtiene no solo el link y título de cada artículo, también su autor, fecha, descrip-1 https://github.com/androidMDW/guia2base

index-25_1.jpg

CURSO ANDROID

25

ción y una imagen.

Ð Para ser más ordenados, la información se guardará utilizando una clase de Java que represente a cada artículo llamada Element (src/com/android/mdw/demo/Element.java)

Ð La Activity principal (Main) hereda de ListActivity y no de Activity facilitando y permite caminos cortos para cosas específicas a una Activity que muestra un listado de cosas. Por lo mismo, en el layout es necesario un ListView con el identificador @android:id/list

Además, tiene las especificaciones de la guía anterior.

Ð Es necesario darle permiso a la aplicación para que pueda accesar a Internet, tener un LinearLayout con orientación vertical en el archivo de diseño principal por trabajar con una LisActivity también necesitamos el ListView con id @android:id/list y tener una forma de reconocer XML.

Diseño

Trabajamos con Views del capítulo anterior como: LinearLayout, ListView, TextView, Button y agregamos nuevas Views.

Ð ImageView1 : muestra una imagen que puede cargarse de diferentes fuentes para el ejemplo vamos a obtenerla de una dirección de Internet (etiqueta img de HTML dentro del artículo) revisar (2d Graphics2).

Ð Menu3 y MenuItem4 : en este capítulo aprenderás cómo hacer un menú de opciones en XML, revisar (Menus5 ).

Para el layout principal, repetimos el procedimiento del capítulo anterior de nuevo recordando que el identificador ( android:id) del ListView debe ser @android:id/list.

Además, necesitaremos 3 Views adicionales:

1 http://developer.android.com/reference/android/widget/ImageView.html

2 http://developer.android.com/guide/topics/graphics/2d-graphics.html

3 http://developer.android.com/reference/android/view/Menu.html

4 http://developer.android.com/reference/android/view/MenuItem.html

5 http://developer.android.com/guide/topics/ui/menus.html

index-26_1.jpg

index-26_2.jpg

index-26_3.jpg

CURSO ANDROID

26

Ð Para el menú menu.xml

Ð Para la vista previa dentro de la aplicación showelement.xml

Ð Para cada fila del listado row.xml

Para agregar estos Views, hacemos click derecho sobre la carpeta /res/layout luego New > (nuevo) y other… (otro):

En el diálogo que aparece seleccionamos archivo XML de Android y hacemos click en Next > (siguiente):

index-27_1.jpg

index-27_2.jpg

CURSO ANDROID

27

Escribimos el nombre del archivo (es importante incluir la extensión XML), en el ejemplo el nombre es menu.xml y hacemos click en el botón Finish (finalizar):

Este procedimiento es necesario cada vez que necesitemos un Layout nuevo, para esta aplicación serán necesarios 3: menu.xml, row.xml y showelement.xml describiremos a detalle cada uno de ellos.

View para el menú: menu.xml

Utiliza un elemento menú y dos elementos ítem para cada opción, le pondremos a cada ítem texto y el icono que trae por defecto la aplicación, el archivo XML debe quedar así:

<!--?xml version=”1.0” encoding=”utf-8”?-->

El menú debería verse de la siguiente forma:

index-28_1.jpg

index-28_2.jpg

index-28_3.jpg

CURSO ANDROID

28

View para preview: showelement.xml

En esta vista previa mostraremos el título del artículo, el autor y la descripción, necesitamos varios TextView dentro de un LinearLayout con orientación vertical, el archivo XML debe quedar así:

<!--?xml version=”1.0” encoding=”utf-8”?-->

La vista previa debería verse de la siguiente forma:

index-29_1.jpg

index-29_2.jpg

CURSO ANDROID

29

View para fila: row.xml

En este capítulo en cada una de las filas de la lista no mostraremos dos líneas como en el anterior, ahora vamos a tener una imagen del elemento y su título agrupados por un LinearLayout con orientación horizontal, el archivo XML debe quedar de la siguiente forma:

<!--?xml version=”1.0” encoding=”utf-8”?-->

Clases de apoyo

En esta versión del lector de feeds tenemos varias clases que apoyan para facilitar el desarrollo: Ð Element: guarda los datos de cada artículo en el listado.

Ð MyApp: clase de aplicación para representar datos volátiles dentro de la aplicación.

Ð MyAdapter: adaptador personalizado que permite mostrar la imagen en cada fila del listado.

Para la vista previa del artículo necesitamos otra Activity que es otra clase que llamaremos ShowElement.java para agregar una clase es necesario hacer click derecho sobre com.android.mdw.demo (bajo src) luego New (nuevo) y por último Class (clase).

Después colocamos el nombre “MyApp” para el ejemplo y la superclase (clase de la que hereda) android.

index-30_1.jpg

index-30_2.jpg

CURSO ANDROID

30

app.Application para el ejemplo y hacemos click en finalizar.

El proceso es necesario para MyApp, MyAdapter y ShowElement la clase Element va incluida, ahora veamos el contenido de cada una de estas clases:

Element

Haremos un objeto Element, para aumentar el orden porque ahora guardaremos más información de cada elemento del listado obtenido del feed. Esta clase está incluida en los archivos de prueba y no es muy complicada, maneja métodos para colocar y obtener los atributos de cada elemento como: Título, Enlace, Autor, Descripción, Fecha de publicación, Imagen.

SetImage es el método diferente y se debe a la forma en que obtenemos las imágenes. El parser XML

buscará dentro del contenido del artículo la primera ocurrencia de la etiqueta img de HTML y en algunos casos la única es la foto del autor del artículo.

index-31_1.jpg

index-31_2.jpg

CURSO ANDROID

31

Tomamos prestada la imagen del avatar de Twitter de @maestros1 el URL es:

http://a1.twimg.com/profile_images/82885809/mdw_hr_reasonably_small.png

La URL se recibe como parámetro en este método, si al tratar de obtener la imagen algo fallara entonces también se establece la imagen del avatar de Twitter. Para obtener la imagen en base a un URL se utiliza la ayuda de la función loadFromUrl que devuelve un Bitmap2 .

Este método abre una conexión hacia el URL especificado, luego decodifica el flujo (stream) de bytes recibido y en base a ellos construye un objeto Bitmap. El código de la clase Element (ya incluido en el código base de la guía) es el siguiente:

package com.android.mdw.demo;

import java.io.IOException;

import java.io.InputStream;

import java.net.MalformedURLException;

import java.net.URL;

import java.text.SimpleDateFormat;

import java.util.Date;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

public class Element {

static SimpleDateFormat FORMATTER = new SimpleDateFormat(“EEE, dd MMM yyyy

HH:mm:ss Z”);

private String title;

private String author;

private String link;

private Bitmap image;

private String description;

private Date date;

public String getTitle() {

return this.title;

1 http://twitter.com/maestros

2 http://developer.android.com/reference/android/graphics/Bitmap.html

index-32_1.jpg

CURSO ANDROID

32

}

public String getLink() {

return this.link;

}

public String getDescription() {

return this.description;

}

public String getDate() {

return FORMATTER.format(this.date);

}

public Bitmap getImage(){

return this.image;

}

public String getAuthor(){

return this.author;

}

public void setTitle(String title) {

this.title = title.trim();

}

public void setLink(String link) {

this.link = link;

}

public void setDescription(String description) {

this.description = description.trim();

}

public void setDate(String date) {

try {

this.date = FORMATTER.parse(date);

} catch (java.text.ParseException e) {

e.printStackTrace();

}

}

public void setImage(String image){

if (image.contains(“autor”)) {

image = “http://a1.twimg.com/profile_images/82885809

index-33_1.jpg

CURSO ANDROID

33

/mdw_hr_reasonably_small.png”;

}

try {

this.image = loadFromUrl(new URL(image));

} catch (Exception e) {

try {

this.image = loadFromUrl(new URL(“http://a1.twimg.com

/profile_images/82885809/mdw_hr_reasonably_small.png”));

} catch (MalformedURLException e1) {}

}

}

public void setAuthor(String author){

this.author = author;

}

public String toString(){

return this.title;

}

private Bitmap loadFromUrl(URL link) {

Bitmap bitmap = null;

InputStream in = null;

try {

in = link.openConnection().getInputStream();

bitmap = BitmapFactory.decodeStream(in, null, null);

in.close();

} catch (IOException e) {}

return bitmap;

}

}

MyApp

En el capítulo anterior el listado de artículo los representamos como una lista estática dentro de la clase de la activity principal, mencioné que esa no era la forma correcta por que debían utilizarse clases de aplicación y para eso utilizaremos MyApp.

index-34_1.jpg

index-34_2.jpg

CURSO ANDROID

34

No es posible utilizar una variable local o una variable de instancia porque la Activity1 es constante-mente destruida y creada de nuevo. Por ejemplo, al rotar el teléfono. A pesar de estar representado dentro de una clase esta información no deja de ser volátil, para almacenamiento permanente es necesario una base de datos de SQLite.

Para decirle a la aplicación que es de tipo MyApp es necesario editar el manifest AndroidManifest.xml y en los atributos de la etiqueta aplicación agregar android:name=”MyApp”

Inicialmente decía:

<application android:icon=”@drawable/icon” android:label=”@string/app_name”>

Al modificarlo debe decir:

<application android:icon=”@drawable/icon” android:label=”@string/app_name”

android:name=”MyApp”>

Dentro de la clase MyApp vamos a guardar dos cosas:

Ð El listado de los artículos

Ð La opción seleccionada por el usuario para visualizar el artículo (ya sea en una vista previa dentro de la aplicación o en el navegador)

Ð Además de estas dos variables de instancia, vamos a incluir métodos para guardar y devolver estas variables (getters y setters). Para representar la opción elegida por el usuario utilizaremos enteros dentro de la Activity principal, estos están incluidos en el código base y fueron definidos así: final static int APP_VIEW = 1;

final static int BROWSER_VIEW = 2;

Al iniciar la aplicación, colocaremos el valor de APP_VIEW en el campo que guarda la preferencia del usuario dentro de la clase de aplicación, el código de la clase MyApp queda de la siguiente forma: package com.android.mdw.demo;

import java.util.LinkedList;

1 http://developer.android.com/reference/android/app/Activity.html

index-35_1.jpg

CURSO ANDROID

35

import android.app.Application;

public class MyApp extends Application {

private LinkedList data = null;

private int selectedOption = Main.APP_VIEW;

public LinkedList getData(){

return this.data;

}

public void setData(LinkedList d){

this.data = d;

}

public int getSelectedOption(){

return this.selectedOption;

}

public void setSelectedOption(int selectedOption) {

this.selectedOption = selectedOption;

}

}

MyAdapter

La clase MyAdapter será una personalización de un ArrayAdapter1 , un adaptador que recibe un arreglo (o listado) de elementos. La clase MyAdapter hereda de ArrayAdapter<Element>, dentro de la clase manejaremos dos variables de instancia, un LayoutInflater2 esta clase se utilizar para instanciar el diseño a partir de un archivo de XML hacia un View y además un listado (LinkedList) de objetos (en este caso, artículos, representados por la clase Element).

Dentro del constructor, llamamos al padre (super) y asignamos a los campos (variables de instancia).

Además, dado que queremos personalizar la representación (rendering) de cada fila, necesitamos sobrecargar revisar (Override3 ) el método getView.

Dentro de este método, cuando sea necesario instanciamos el archivo de su diseño correspondiente row.xml y le asignamos valor a sus Views (imagen y texto) a partir de la información guardada en el 1 http://developer.android.com/reference/android/widget/ArrayAdapter.html

2 http://developer.android.com/reference/android/view/LayoutInflater.html

3 http://download.oracle.com/javase/tutorial/java/IandI/override.html

index-36_1.jpg

index-36_2.jpg

CURSO ANDROID

36

listado de artículos.

El código de la clase MyAdapter es el siguiente:

package com.android.mdw.demo;

import java.util.LinkedList;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class MyAdapter extends ArrayAdapter {

LayoutInflater inf;

LinkedList objects;

public MyAdapter(Context context, int resource,

int textViewResourceId,

LinkedList objects) {

super(context, resource, textViewResourceId, objects);

this.inf = LayoutInflater.from(context);

this.objects = objects;