Instructores

Harlen Joan Pardo Bergamin

ANDROID

COMENZANDO CON ANDROID STUDIO

OBJETIVOS:

Reconocer el entorno grafico de android utilizando el IDE de desarrollo ECLIPSE.

Realizar una interface gráfica donde se procesen datos de usuarios y clientes utilizando controles en Android como los menú label y botones.

Comenzando con Android Studio Android Studio es el nuevo IDE (Integrated Development Environment - Entorno de

Desarrollo Integrado) que Google ha puesto a disposición de los desarrolladores de Android

de forma gratuita. Android Studio se basa en IntelliJ IDEA, un IDE que también nos ofrece

un buen entorno de desarrollo Android. En este tutorial mostraremos como crear un nuevo

proyecto Android y como sacar partido a las características que Android Studio nos ofrece.

1. Configuración del proyecto

Antes de comenzar a explorar Android Studio es necesario descargarlo e instalarlo. Ten en

cuenta que es necesario tener instalado JDK 6 o superior para poder instalarlo. Si trabajas

con Windows, debes ejecutar el fichero .exe y seguir los pasos del asistente de instalación.

Si usas OS X, monta el disco imagen haciendo doble click sobre el y arrastra Android Studio

la carpeta de Aplicaciones

Una vez completados los pasos anteriores de forma satisfactoria, en entorno de desarrollo

debería estar instalado correctamente. Por lo que ya estarías preparado para crear tu

primera aplicación Android utilizando Android Studio. Al arrancar Android Studio por primera

vez, se nos abrirá una pantalla de bienvenida ofreciéndonos unas cuantas opciones para

comenzar.

Para este tutorial vamos a escoger la opción New Project (Nuevo proyecto). Sin embargo,

podemos escoger Import Project (Importar proyecto) si queremos importar un proyecto de,

por ejemplo, Eclipse dentro de Android Studio. Android Studio convertirá el proyecto Eclipse

en un proyecto Android Studio, añadiendo todos los ficheros de configuración necesarios.

will convert the Eclipse project to an Android Studio project, adding the necessary

configuration files for you.

Si seleccionamos Open Project (Abrir proyecto) de la lista de opciones, podremos abrir

proyectos creados tanto con Android Studio como con IntelliJ IDEA. Escogiendo Check out

from Version Control (Inicializar desde Control de versiones), podremos inicializar una

copia de un proyecto que este bajo un sistema de control de versiones. Esto es una forma

rápida de ponerse al día con un proyecto existente.

Para comenzar, seleccionamos New Project de la lista de opciones. Esto nos mostrará una

lista de opciones para configurar un nuevo proyecto. En este tutorial vamos a crear una

aplicación simple para mostrar algunas de las características más importantes de Android

Studio. Estoy seguro de que estarás de acuerdo conmigo en que no existe un nombre mejor

para nuestro proyecto que HelloWorld.

Como puedes ver en la imagen anterior he establecido el nombre de la aplicación

a HelloWorld y también el nombre del módulo a HelloWorld. Si no estás familiarizado con

IntelliJ IDEA no sabrás exactamente que es un módulo. Un módulo una unidad de

funcionalidad simple que puede ser compilada, ejecutada, testeada y depurada de forma

independiente. Los módulos contienen el código fuente, los scripts de creación y cualquier

cosa adicional necesaria para poder realizar su tarea específica.

Cuando creamos un nuevo proyecto también podemos establecer el nombre del paquete

del proyecto.. Por defecto, Android Studio establece el último elemento del nombre del

paquete del proyecto como nombre del módulo, pero podemos cambiarlo y establecer el

nombre que queramos..

Otras configuraciones son la ubicación del proyecto en nuestro ordenador, la versión de

SDK mínima y objetivo, la versión de SDK con la que será compilado el proyecto y el tema

del proyecto. También podremos decirle a Android Studio que nos cree una

clase Activity y un icono de inicio, y si el proyecto usará GridLayout, Fragments, un

Navigation Drawer, o una Action Bar.

Para esta aplicación no vamos a crear un icono personalizado, por lo que desmarcamos la

opción Create custom launch icon. Pulsamos Next para continuar con la configuración de

nuestro proyecto.

Como dejamos seleccionada la opción Create activity en el paso anterior, nos preguntará

por la configuración de la clase Activity que Android Studio creará.

Como vamos a comenzar con una clase Activity , podemos pulsar Next para seguir con

el siguiente paso en el proceso de configuración, en el cual se nos preguntará el nombre de

la clase Activity , el layout principal, y el fragment layout. También podemos establecer

el tipo de navegación, que dejaremos a None para este proyecto. Si miramos la siguiente

imagen veremos cómo debería ser la configuración.

Después de pulsar Finish, se abrirá la interfaz de usuario de Android Studio con el explorar

de proyectos a la izquierda y el editor de código a la derecha. Una vez configurado el

proyecto en Android Studio, es hora de explorar algunas de las características clave.

2. Dispositivos Android Virtuales

Un Dispositivo Android Virtual o AVD, en sus siglas en inglés, es una configuración de

emulador que nos permite simular un dispositivo Android. Esto nos va a permitir ejecutar y

testear nuestras aplicaciones en un amplio abanico de dispositivos de forma mucho más

sencilla. En un Dispositivo Android Virtual podemos especificar tanto el hardware como

software que el Emulador Android necesita emular.

La forma preferida para crear un Dispositivo Android Virtual es con el AVD Manager, al cual

podemos acceder en Android Studio seleccionando Android > AVD Manageren el

menú Tools.

Si el entorno de desarrollo está configurado correctamente se abrirá el Administrador de

Dispositivos Android Virtuales (AVD Manager), el cual será similar al que aparece en la

siguiente imagen.

Para crear un nuevo, pulsamos el botón New... de la sección derecha, daremos un nombre

al AVD, y configuraremos el dispositivo virtual como aparece abajo. Pulsamos OK para crear

nuestro primer AVD.

Para utilizar el recién creado AVD, lo seleccionamos en la lista del administrador de AVD y

pulsamos el botón Start... de la derecha. Si hemos configurado correctamente el AVD, el

emulador de Android se abrirá tal cual aparece en la siguiente imagen.

Con el emulador de Android funcionando, es hora de ejecutar nuestra aplicación

seleccionando Run 'helloworld' dentro del menú Run. Así de fácil es ejecutar una

aplicación en el emulador de Android.

3. Diseño en vivo.

La característica de diseño en vivo de Android Studio nos permite previsualizar la interfaz

de usuario de nuestra aplicación sin necesidad de ejecutarla en un dispositivo o en el

emulador. La diseño en vivo es una potente herramienta que nos ahorrará literalmente

horas. Ver la interfaz de usuario utilizando esta funcionalidad es mucho más rápido que

cualquier otra forma.

Para trabajar con el diseño en vivo, hacemos doble click sobre el fichero XML que contiene

el diseño y seleccionamos la pestaña Text de la parte de abajo del espacio de trabajo.

Seleccionamos la pestaña Preview de la derecha para previsualizar el diseño

actual. Cualquier cambio que realicemos sobre el fichero XML con el diseño se reflejará en

la previsualización de la derecha. Si miramos en la siguiente imagen nos podremos hacer

una mejor idea de esta interesante característica.

Existen unas cuantas ventajas más de este diseño en vivo que merece la pena destacar.

Podemos, por ejemplo, crear una variación de nuestro fichero XML de diseño en el que

estamos trabajando seleccionando una opción del primer menú del panel Preview.

Podemos, por ejemplo, crear una vista separada para la versión en horizontal y vertical y

Android Studio nos creará las carpetas y ficheros necesarios.

El segundo menú en el panel Preview nos permite cambiar el tamaño del dispositivo que se

muestra en el panel Preview. El tercer menú nos permite cambiar la orientación del

dispositivo que aparece en el panel, lo que hace muy sencillo ver nuestro diseño utilizando

orientaciones y temas diferentes.

El cuarto menú del panel Preview nos da un acceso rápido al Activity o fragment en el

que usamos el diseño. El panel Preview, además, nos permite cambiar el lenguaje utilizado

en el diseño en vivo lo que hace sencillo en previsualizar nuestro diseño en un idioma

diferente. El menú que aparece más a la derecha nos permite cambiar la versión de la API.

El panel Preview también incluye controles para acercar o alejar el diseño, refrescar el panel

o tomar una imagen del mismo.

4. Plantillas

Android Studio proporciona a los desarrolladores unas cuantas plantillas para acelerar el

desarrollo. Estas plantillas crean de forma automática una clase Activity y los

ficheros XML necesarios. Podemos usar estas plantillas para crear una aplicación Android

básica, la cual podemos ejecutar posteriormente en un dispositivo o en el emulador.

Con Android Studio, podemos utilizar una plantilla cuando creemos una nueva

clase Activity . Pulsando con el botón derecho del ratón sobre el nombre del paquete en

el explorador de proyectos en la parte izquierda, seleccionamos New del menú, y

escogemos Activity de la lista de opciones. Android Studio nos mostrará una lista de

plantillas, tales como Blank Activity, Fullscreen Activity, y Tabbed Activity, para crear

una clase Activity en blanco, a pantalla completa o con pestañas respectivamente.

También podemos seleccionar Image Asset en el menú, lo que abrirá el asistente para

guiarnos en el proceso de creación. Vamos a mostrar como crear una nueva

clase Activity basada en la plantilla Login Activity. Seleccionamos la opciónLogin

Activity de la lista de plantillas Activity para ejecutar el asistente.

Como podemos ver en la imagen anterior, le hemos asignado el nombreLoginActivity a

la Activity , establecido a activity_login el Layout Name y establecido el título

del Activity a Sign In. La opción Include Google+ sign in está marcada por defecto. La

desmarcaremos ya que no vamos a utilizar esta característica en nuestro ejemplo.

Opcionalmente, podemos establecer el Hierarchical Parent de nuestra nueva Activity .

Esto nos permitirá navegar hacia atrás si pulsamos sobre el botón "volver" de nuestro

dispositivo. Dejaremos este campo vacío. Después de pulsar sobreFinish, Android Studio

creará los ficheros y directorios necesarios por nosotros. Si todo ha ido bien, deberíamos

ver una nueva Activity y un nuevo Layout in nuestro proyecto.

El siguiente paso es configurar la nueva clase Activity en el

ficheroAndroidManifest.xml ya que la usaremos como nuestra Activity principal cuando

ejecutemos nuestra aplicación. Como podemos ver en el fichero de abajo, nuestra

clase LoginActivity tiene su propio nodo de configuración.

01

02

03

04

05

06

07

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.tuts.HelloWorld.MainActivity"

08

09

10

11

12

13

14

15

16

17

18

19

20

android:label="@string/app_name" >

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

<activity

android:name="com.tuts.HelloWorld.LoginActivity"

android:label="@string/title_activity_login"

android:windowSoftInputMode="adjustResize|stateVisible" >

</activity>

</application>

Para hacer que nuestra aplicación ejecute la clase LoginActivity que acabamos de crear,

eliminamos el nodo de configuración de la clase LoginActivity y

reemplazamos com.tuts.HelloWorld.MainActivity con com.tuts.HelloWorld.Login

Activity . El resultado de esto es que la aplicación usará ahora la

clase LoginActivity como su Activity principal.

01

02

03

04

05

06

07

08

09

10

11

12

13

14

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="za.co.helloworld.LoginActivity"

android:label="@string/app_name" >

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>

Cuando construyamos y ejecutemos nuestra aplicación en el emulador, deberíamos ver una

pantalla similar a la que aparece abajo. Esto significará que hemos sustituido correctamente

la clase Activity en blanco con la nueva clase LoginActivity que hemos creado.

5. Herramientas Lint

Testear nuestro código es una cosa, pero es igualmente importante aplicar buenas prácticas

cuando escribimos código. Esto aumentará el rendimiento y la estabilidad general de

nuestra aplicación. Además, una estructura de proyecto correcta nos facilitará el

mantenimiento.

Android Studio incluye Android Lint, un analizador estático que analizará el código fuente

de nuestro proyecto. Esta herramienta puede detectar errores potenciales y otros problemas

en el código que el compilador puede pasar por alto.

La imagen siguiente, por ejemplo, nos dice que la LinearLayout del diseño no se usa. Lo

interesante de <b>Android Lint</b> es que no da una razón del aviso o error, lo que hace

que sea más sencillo de corregir o resolver.

Es recomendable ejecutar la herramienta lint de Android Studio de vez en cuando para

chequear los problemas potenciales de nuestro proyecto. La herramienta lint incluso nos

dirá si tenemos imágenes o traducciones duplicadas.

Para ejecutar la herramienta lint, seleccionamos Inspect Code… del menú Analyzede

Android Studio para iniciar el proceso. Cuando Android Studio finalice de inspeccionar

nuestro proyecto nos mostrará el resultado en la parte baja de la ventana. Debemos tener

en cuenta que además de Android Lint, Android Studio realiza uno cuantos chequeos

adicionales también. Simplemente pulsando doble click sobre uno de los problemas el

sistema nos llevará al fichero donde se encuentra localizado.

6. Editor de Diseño Mejorado

Android Studio cuenta con un editor de diseño mejorado en el cual podemos arrastrar y

soltar los componentes de la interfaz. Además, podemos previsualizar diseños en muchas

configuraciones de pantalla, como hemos visto anteriormente en este tutorial.

El editor de texto mejorado es muy sencillo de utilizar. En primer lugar necesitamos un

diseño con el que trabajar. Miramos la carpeta layout dentro de la carpeta res de nuestro

proyecto, pulsamos con el botón derecho del ratón en la carpeta layout , y

seleccionamos New > Layout resource file del menú que aparece.

Le damos un nombre al nuevo diseño, establecemos su elemento raíz, y

pulsamos OK. Android Studio nos abrirá de forma automática el editor de diseño a la

derecha.

En la parte baja del editor deberíamos ver dos pestañas, Design y Text. Pulsando sobre la

pestaña Text nos mostrará el editor, permitiéndonos hacer cambios en el diseño que hemos

seleccionado.

Pulsando sobre la pestaña Design nos llevará a otro editor que nos mostrará una

previsualización del diseño. Para añadir elementos al diseño, los arrastramos desde la lista

de elementos de la izquierda al diseño en la derecha. Así de simple.