Desarrollo en Android: Más allá del Hola Mundo!

Actualmente el desarrollo de aplicaciones para plataformas móviles es uno de los temas más atractivos para un desarrollador de software. En mi caso particular he optado por empezar mi “aventura” desarrollando una aplicación para Android debido a que es el sistema operativo móvil al que más habituado estoy y me parece una opción llamativa.

Es habitual que cuando se empieza a aprender un lenguaje de programación nuevo uno de los primeros ejemplos que se implemente es el conocido “HolaMundo”. Sin embargo, dado que Android utiliza lenguajes ya conocidos como Java o XML, considero de mayor utilidad explicar un poco el proceso que he seguido para empezar mi primera aplicación, así como algunos de los conceptos básicos que he aprendido por el camino.

La idea elegida la llamaré por ahora “Master List”. Consiste en una aplicación para hacer listas de la compra (sí, ya sé, hay muchas apps para hacer esto mismo y mucho más), pero con una innovadora variación respecto a las apps ya existentes: todas las listas de la compra se crean como subconjuntos de una lista “maestra” que contiene todos los artículos que habitualmente compra el usuario.

Empezando: idea inicial y navegación

Como muestro en la siguiente fotografía, el primer paso fue plasmar en papel de forma básica la idea del funcionamiento de Master List, junto con la navegación disponible para el usuario. Uno de los primeros pasos a la hora de diseñar y desarrollar una aplicación debe ser pensar qué puede ver y hacer el usuario de nuestra aplicación, para una vez teniendo esto, diseñar cómo queremos que sea la navegación del usuario por los distintos contenidos que le brindamos.

boceto

Si alguna vez hemos utilizado apps de Android en nuestro móvil, nos habremos dado cuenta de que la forma de navegar en ellas tiene bastantes similitudes. Esto ocurre al menos en las aplicaciones que siguen las “guidelines” de diseño que nos hacen llegar los responsables de Android, tratando de que la experiencia de usuario sea lo más coherente posible entre las distintas aplicaciones que una persona pueda tener instaladas en su terminal.

En cualquier caso, existen varias opciones entre las que elegir para nuestro diseño: pestañas fijas, pestañas móviles, un menú desplegable, etc. Dadas las características de mi aplicación yo he optado por usar lo que se denomina “Navigation Drawer”. Esta forma de navegación es la que podemos encontrar por ejemplo en la app de Google Play (y en muchas otras), que muestra las distintas opciones al usuario a través de un menú lateral oculto que aparece al hacer click sobre el icono de la aplicación o al arrastrar desde el lateral de la pantalla. Creo que es una opción apropiada porque de esta forma el usuario podrá acceder tanto a la lista maestra como al selector de listas de la compra creadas desde cualquier punto de la aplicación. Además, deja la puerta abierta a poder mostrar en ese menú más opciones, como podrían ser las listas más recientes, posibilidad que sería bastante incómoda de implementar usando pestañas por ejemplo. A continuación muestro el resultado de este tipo de navegación en el prototipo de Master List:

Screenshot_2014-03-30-20-28-44

Layouts o cómo mostrar nuestros “Views” en una “Activity”

¿Views?¿Activity? Sí, estos son otros 2 conceptos imprescindibles en el desarrollo de aplicaciones para Android.

Se llama Activity a cada una de las vistas (pantallas) que se muestran en nuestra aplicación, y éstas están formadas por distintos elementos o Views, como pueden ser textos (TextView), campos para que el usuario introduzca texto (EditText), imágenes, botones o cualquier otro elemento personalizado que deseemos implementar. La forma en la que estos elementos se disponen en la pantalla que ve el usuario es lo que se denomina Layout, y en Android existen varios tipos predeterminados: LinearLayout, RelativeLayout, GridView y ListView.

Si recordamos el diagrama en papel con el diseño inicial que mostré anteriormente se puede ver cómo encajarían estos cuatro tipos de layouts: “lineal” para mostrar los elementos de la lista maestra o del menú lateral, “relativo” para la pantalla de creación de nueva lista, “vista rejilla” para el selector de listas creadas, y “ListView” para la lista de elementos de cada lista, tal y como podemos ver en la siguiente captura de pantalla:

Screenshot_2014-03-30-20-28-31

Y ¿cómo se colocan estos Views en su sitio? Pues el código resultante es bastante legible, ya que se trata de un viejo conocido, XML, que muestra los distintos atributos que afectan al modo de mostrarse de cada elemento. En este caso quedaría así:

<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:orientation="vertical"
 tools:context=".MasterList" >
 
 <ListView
 android:id="@+id/master_listview"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1"/>

 <EditText
 android:id="@+id/newItem"
 android:layout_width="match_parent"
 android:layout_height="80dp"
 android:hint="@string/new_item">
 </EditText>
 
 </LinearLayout>

Quizá la parte más complicada es conocer los distintos atributos y posibilidades que nos brinda cada uno de los tipos de View existentes en Android. Nada que no pueda solucionarse con paciencia y mucha mucha práctica! Además, por el camino podemos ayudarnos del diseñador gráfico disponible, que permite previsualizar el resultado de nuestra composición (he de decir que me ha resultado particularmente cómodo trabajar directamente con el código XML hasta el momento).

Y ahora, ¿cómo navegamos a otra pantalla? Usa un Intent!

Vale, ya hemos creado un par de Activities (lista maestra y selector de listas), nuestro menú lateral de navegación, todo con sus respectivos layouts en XML… pero, los enlaces no hacen nada!

En Android, existen lo que se denominan Intents, que no son más que la forma de decir a nuestra aplicación que tenemos la intención de hacer algo. Pueden ser de 2 tipos: explícitos, si sabemos que Activity queremos lanzar a continuación, o implícitos, si únicamente sabemos lo que queremos hacer, pero no sabemos que aplicación externa se va a encargar de ello (por ejemplo: queremos enviar un email o hacer una llamada a un número de teléfono). En cualquiera de los 2 casos la solución pasa por crear un objeto de tipo Intent y ejecutar la llamada. Como ejemplo:

public void launchActivity(View view){
 Intent intent = new Intent(this,ShoppingLists.class);
 startActivity(intent);
 }

Este sencillo método se encarga de llamar a la clase que representa la Activity de listas de la compra (ShoppingLists.class) y la inicia. Se asocia el método al evento OnClick del View que queramos y listo, así de simple!

Screenshot_2014-03-30-20-29-14

Algunas reflexiones

Es importante tener en cuenta que esto sólo es el punto de partida de un largo camino de aprendizaje en el mundo de aplicaciones Android. Sin embargo, hasta ahora puedo decir que está siendo una buena experiencia a la hora de diseñar y desarrollar cosas similares a las que he podido ver en muchas ocasiones en otras aplicaciones de terceros. Además, sí me gustaría resaltar que al igual que en otras ocasiones la documentación de frameworks, librerías y demás deja bastante que desear, en este caso la documentación oficial de Android es bastante completa con guías, tutoriales y ejemplos. Una agradable sorpresa a la hora de empezar esta andadura, ya que facilita la resolución de los problemas que nos vamos encontrando.

Aunque no he profundizado demasiado en este primer post, también me ha parecido bastante limpia la forma de estructurar los distintos elementos de código de la aplicación. Por un lado, con la separación existente entre los layouts en XML y de forma independiente el código de las Activities (sí se quiere hacer así, siendo opcional) se consigue mucha claridad. También, los distintos recursos de la aplicación (imágenes, cadenas de texto, etc) se estructuran en distintas rutas bastante autoexplicativas, y por último, el archivo AndroidManifest.xml, centraliza la descripción de la aplicación, sus distintos elementos, requisitos, permisos, iconos… Hasta el momento tengo la impresión de que esta infraestructura permite tener un control bastante bueno de qué pasa en nuestra aplicación. Espero que no cambie!

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s