CIÓN LÍDERES CORPORACIÓN LÍ

(1)

1

Entorno de desarrollo Android (Android Studio)

Para empezar con este Curso de Programación Android, vamos a describir los pasos básicos para disponer en nuestro PC del entorno y las herramientas necesarias para comenzar a programar aplicaciones para la plataforma Android.

No voy a ser exhaustivo, ya que existen muy buenos tutoriales sobre la instalación de Java, Android Studio y el SDK de Android, incluida la documentación oficial de desarrollo de Android, por lo que tan sólo enumeraré los pasos necesarios de instalación y configuración, y proporcionaré los enlaces a las distintas herramientas. Vamos allá.

Paso 1. Descarga e instalación de Java.

Si aún no tienes instalado ninguna versión del JDK (Java Development Kit) puedes descargarla gratuitamente desde la web de Oracle.

Aunque ya está disponible Java 8, para el desarrollo en Android nos seguiremos

quedando por ahora con Java 7. En el momento de escribir este manual la revisión más reciente de esta serie es la versión 7 update 79 (si hubiera disponible un update posterior podríamos usarlo sin problema), que deberemos descargar para nuestra versión concreta del sistema operativo. Por ejemplo, para Windows 64 bits descargaremos el ejecutable marcado como “Windows x64” cuyo nombre de fichero es “jdk-7u79-windows-x64.exe“.

La instalación no tiene ninguna dificultad, se trata de un instalador estándar de Windows donde tan sólo hay que aceptar, pantalla por pantalla, todas las opciones que ofrece por defecto.

El siguiente paso es opcional, pero puede evitarnos algún que otro problema en el futuro.

Crearemos una nueva variable de entorno llamada JAVA_HOME y cuyo valor sea la ruta donde hemos instalado el JDK, por ejemplo “C:\Program Files\Java\jdk1.7.0_79“. Para añadir una variable de entorno del sistema en Windows podemos acceder al Panel de Control / Sistema y Seguridad / Sistema / Configuración avanzada del sistema / Opciones Avanzadas /

Variables de entorno. Una vez en la ventana de Variables de Entorno pulsamos el botón

“Nueva…” del apartado de Variables del Sistema y añadimos la nueva variable con los valores indicados:

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(2)

2

Paso 2. Descarga e instalación de Android Studio y el SDK de Android.

Descargaremos Android Studio accediendo a la web de desarrolladores de Android, y dirigiéndonos a la sección dedicada al SDK de la plataforma. Descargaremos la versión más reciente del instalador correspondiente a nuestro sistema operativo pulsando el botón verde

“Download Android Studio” y aceptando en la pantalla siguiente los términos de la licencia.

Para instalar la aplicación ejecutamos el instalador descargado (en mi caso el fichero se llama “android-studio-bundle-145.3330264-windows.exe “) y seguimos el asistente aceptando todas las opciones seleccionadas por defecto. Durante el proceso se instalará el SDK de Android, algunos componentes adicionales para el desarrollo sobre la plataforma, y por supuesto el entorno de desarrollo Android Studio.

Durante la instalación tendremos que indicar también las rutas donde queremos instalar tanto Android Studio como el SDK de Android. Para evitar posibles problemas futuros mi recomendación personal es seleccionar rutas que no contengan espacios en blanco.

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(3)

3

En el último paso de la instalación, marcaremos la opción “Start Android Studio” y pulsaremos el botón “Finish” de forma que se iniciará automáticamente la aplicación. Es posible que nos aparezca en este momento un cuadro de diálogo consultando si queremos reutilizar la configuración de alguna versión anterior del entorno. Para realizar una

instalación limpia seleccionaremos la opción “I do not have a previous version…“.

Tras esto, se iniciará el asistente de inicio de Android Studio.

Pulsamos Next y en el siguiente paso seleccionamos el modo de instalación “Custom”:

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(4)

4

En el siguiente paso tendremos que decidir el tema visual que utilizará la aplicación. Mi recomendación personal es utilizar el tema oscuro, llamado “Darcula”, aunque de cualquier forma es algo que podremos cambiar más adelante:

En la siguiente pantalla del asistente seleccionaremos los componentes que queremos instalar. Nos aseguraremos de que en el campo “Android SDK Location” indicamos la ruta donde instalamos antes el SDK, y marcamos únicamente los componentes “Android SDK” y

“Performance (Intel HAXM)” (si aparece disponible).

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(5)

5

Instalar Intel HAXM (Opcional)

Si nuestro sistema está preparado para ello, en esta pantalla nos aparecerá un componente adicional llamado “Performance (Intel HAXM)”.

Intel HAXM (Hardware Accelerated Execution Manager) es un sistema de virtualización que nos ayudará a mejorar el rendimiento del emulador de Android (más adelante hablaremos de esto), y siempre que nuestro sistema lo soporte es muy recomendable instalarlo. Si lo seleccionamos, en el siguiente paso del asistente se podrá indicar además la cantidad de memoria que reservaremos para este componente, donde dejaremos seleccionada la opción por defecto:

Pasamos al siguiente paso, revisamos el resumen de opciones seleccionadas durante el asistente, y pulsamos el botón Finish para comenzar con la descarga e instalación de los elementos necesarios.

Esperaremos a que finalice y pulsamos de nuevo el botón Finish para terminar por fin con la instalación inicial.

Tras finalizar el asistente de inicio nos aparecerá la pantalla de bienvenida de Android Studio:

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(6)

6

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(7)

7

Actualización de Android Studio (Opcional)

Este paso también es opcional, aunque recomendable. Podemos comprobar si existe alguna actualización de Android Studio pulsando la opción “Check for Update” que aparece dentro del menú inferior “Configure”. En caso de existir alguna actualización se nos mostrará información sobre ella en una ventana similar a la siguiente:

Para instalar la actualización simplemente pulsaríamos el botón “Update and restart“.

Tras la actualización, Android Studio se reiniciará y volveremos a aparecer en la pantalla de bienvenida.

Paso 3. Configuración inicial de Android Studio.

Lo siguiente que haremos antes de empezar a utilizar el IDE será asegurarnos de que están correctamente configuradas las rutas a los SDK de Java y Android.

Para ello accederemos al menú “Configure” de la pantalla de bienvenida, entraremos en el submenú “Project Defaults” y pulsaremos sobre la opción “Project Structure”. En la ventana de opciones que aparece revisaremos el apartado “SDK Location” asegurándonos de que tenemos correctamente configuradas las rutas al JDK y al SDK de Android. A continuación muestro la configuración en mi caso, aunque puede variar según las rutas que hayáis utilizado para instalar los distintos componentes.

Tras la revisión pulsamos el botón OK para aceptar la configuración y volvemos al menú de la pantalla de bienvenida de Android Studio.

(El Android NDK (Native Development Kit) permite a los desarrolladores reutilizar código escrito en C/C++

introduciéndolo en las aplicaciones a través de JNI (Java Native Interface).) Paso 4. Instalar/actualizar componentes del SDK de Android.

El siguiente paso será actualizar algunos componentes del SDK de Android e instalar otros adicionales que nos pueden ser necesarios o útiles para el desarrollo de nuestras aplicaciones.

Para ello accederemos de nuevo al menú “Configure” y pulsaremos esta vez sobre la opción “SDK Manager”, lo que nos permitirá acceder al SDK Manager de Android. Con esta herramienta

podremos instalar, desinstalar, o actualizar todos los componentes disponibles como parte del SDK de Android. Las últimas opciones de Android Studio incorporan una ventana de opciones propia

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(8)

8

para acceder al SDK Manager, pero en mi caso sigo prefiriendo la antigua aplicación. Para acceder a ella pulsamos sobre el enlace “Launch Standalone SDK Manager” situado en la parte inferior de la pantalla.

Tras pulsar sobre esta opción nos aparecerá el SDK Manager tradicional:

Los componentes principales que, como mínimo, deberemos seleccionar para instalar/actualizar serán los siguientes:

1. Android SDK Tools

2. Android SDK Platform-tools

3. Android SDK Build-tools (la versión más reciente disponible) 4. Una o más versiones de la plataforma Android

5. Android Support Repository (extras) 6. Google Repository (extras)

7. Google Play Services (extras)

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(9)

9

El punto 4 es uno de los más importantes, ya que contiene los componentes y librerías necesarias para desarrollar sobre cada una de las versiones concretas de Android. Así, si quisiéramos probar nuestras aplicaciones por ejemplo sobre Android 4.4 y 6.0 tendríamos que descargar las dos plataformas correspondientes a dichas versiones. Mi consejo personal es siempre instalar al menos 2 plataformas: la correspondiente a la última versión disponible de Android, y la correspondiente a la mínima versión de Android que queremos que soporte nuestra aplicación, esto nos permitirá probar nuestras aplicaciones sobre ambas versiones para intentar asegurarnos de que funcionará correctamente. Intentaré que todo lo expuesto en este curso sea compatible al menos desde la versión 4.x (más concretamente desde la API 15 en adelante), por lo que en nuestro caso instalaremos, además de versión estable más reciente (Versión 6.0 – API 23), la plataforma para la versión 5.1 (API 22), y alguna para la versión 4.x, por ejemplo la 4.4.2 (API 19).

A modo de referencia, en mi caso seleccionaré los siguientes componentes/versiones (algunos pueden estar ya instalados por defecto):

1. Android SDK Tools (Rev. 25.1.1) 2. Android SDK Platform-tools (Rev. 23.1) 3. Android SDK Build-tools (Rev. 23.0.3) 4. Android 6.0 (API 23)

1. SDK Platform 2. Google APIs

3. Google APIs Intel x86 Atom System Image 5. Android 5.1.1 (API 22)

1. SDK Platform 2. Google APIs

3. Google APIs Intel x86 Atom System Image 6. Android 4.4.2 (API 19)

1. SDK Platform

2. Google APIs (x86 System Image) 7. Extras

1. Android Support Repository (Rev. 29) 2. Android Support Library (Rev. 23.2.1) 3. Google Play Services (Rev. 29) 4. Google Repository (Rev. 25)

Si nuestro PC no fuera compatible con HAXM, podemos sustituir los componentes 4.3, 5.3 y 6.2 de la lista anterior por los dos siguientes (la funcionalidad será la misma aunque el rendimiento será más lento):

 4.3. Google APIs ARM EABI v7a System Image

 5.3. Google APIs ARM EABI v7a System Image

 6.2. Google APIs (ARM System Image)

Seleccionaremos los componentes que queremos instalar o actualizar, pulsaremos el botón “Install packages…”, aceptaremos las licencias correspondientes, y esperaremos a que finalice la descarga e instalación. Una vez finalizado el proceso es recomendable cerrar el SDK Manager y

reiniciar Android Studio.

Con este paso ya tendríamos preparadas todas las herramientas necesarias para comenzar a desarrollar aplicaciones Android. En próximos capitulos veremos como crear un nuevo proyecto, la estructura y componentes de un proyecto Android, y crearemos y probaremos sobre el emulador una aplicación sencilla para poner en práctica todos los conceptos aprendidos.

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(10)

1

Estructura de un proyecto Android

Seguimos con el Curso de Programación Android. Para empezar a comprender cómo se construye una aplicación Android vamos a crear un nuevo proyecto en Android Studio y echaremos un vistazo a la estructura general del proyecto creado por defecto.

Para crear un nuevo proyecto ejecutaremos Android Studio y desde la pantalla de

bienvenida pulsaremos la opción “Start a new Android Studio project” para iniciar el asistente de creación de un nuevo proyecto.

Si ya habíamos abierto anteriormente Android Studio es posible que se abra directamente la aplicación principal en vez de la pantalla de bienvenida. En ese caso accederemos al menú “File / New project…” para crear el nuevo proyecto.

El asistente de creación del proyecto nos guiará por las distintas opciones de creación y configuración de un nuevo proyecto Android.

En la primera pantalla indicaremos, por este orden, el nombre de la aplicación, el dominio de la compañía, y la ruta donde crear el projecto. El segundo de los datos indicados tan sólo se utilizará como paquete de nuestras clases java. Así, si por ejemplo indicamos como en mi

caso android.vidapogosoft.net, el paquete java principal utilizado para mis clases será net.

vidapogosoft.android.holausuario. En tu caso puedes utilizar cualquier otro dominio.

En la siguiente pantalla del asistente configuraremos las plataformas y APIs que va a utilizar nuestra aplicación. Nosotros nos centraremos en aplicaciones para teléfonos y tablets, en cuyo caso tan sólo tendremos que seleccionar la API mínima (es decir, la versión mínima de Android) que soportará la aplicación. Como ya indiqué en el capítulo sobre la instalación del entorno de desarrollo, en este curso nos centraremos en Android 5.0.0 como versión mínima (API 16).

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(11)

2

La versión mínima que seleccionemos en esta pantalla implicará que nuestra aplicación se pueda ejecutar en más o menos dispositivos. De esta forma, cuanto menor sea ésta, a más dispositivos podrá llegar nuestra aplicación, pero más complicado será conseguir que se ejecute correctamente en todas las versiones de Android. Para hacernos una idea del número de dispositivos que

cubrimos con cada versión podemos pulsar sobre el enlace “Help me choose”, que mostrará el porcentaje de dispositivos que ejecutan actualmente cada versión de Android. Por ejemplo, en el momento de escribir este artículo, si seleccionamos como API mínima la 15 conseguiríamos cubrir un 94,0% de los dispositivos actuales. Como información adicional, si pulsamos sobre cada versión de Android en esta pantalla podremos ver una lista de las novedades introducidas por dicha versión.

En la siguiente pantalla del asistente elegiremos el tipo de actividad principal de la aplicación.

Entenderemos por ahora que una actividad es una “ventana” o “pantalla” de la aplicación. Para empezar seleccionaremos Empty Activity, que es el tipo más sencillo.

Por último, en el siguiente paso del asistente indicaremos los datos asociados a esta actividad principal que acabamos de elegir, indicando el nombre de su clase java asociada (Activity Name) y

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(12)

3

el nombre de su layout xml (algo así como la interfaz gráfica de la actividad, lo veremos más adelante). No nos preocuparemos mucho por ahora de todos estos datos por lo que podemos dejar todos los valores por defecto. Más adelante en el curso explicaremos cómo y para qué utilizar estos elementos.

Una vez configurado todo pulsamos el botón Finish y Android Studio creará por nosotros toda la estructura del proyecto y los elementos indispensables que debe contener. Si todo va bien aparecerá la pantalla principal de Android Studio con el nuevo proyecto creado.

En ocasiones Android Studio no realiza correctamente esta primera carga del proyecto y es posible que os encontréis con un error del tipo “Rendering Problems…“. Para solucionarlo no tenéis más que cerrar la ventana del editor gráfico y volverla a abrir pulsando sobre el fichero

“activity_main.xml” que podéis ver en el explorador de la parte izquierda.

En la parte izquierda, podemos observar todos los elementos creados inicialmente para el nuevo proyecto Android, sin embargo por defecto los vemos de una forma un tanto peculiar que podría llevarnos a confusión. Para entender mejor la estructura del proyecto vamos a cambiar

momentáneamente la forma en la que Android Studio nos la muestra. Para ello, pulsaremos sobre la lista desplegable situada en la parte superior izquierda, y cambiaremos la vista de proyecto al modo “Project”.

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(13)

4

Tras hacer esto, la estructura del proyecto cambia un poco de aspecto y pasa a ser como se observa en la siguiente imagen:

En los siguientes apartados describiremos los elementos principales de esta estructura.

Lo primero que debemos distinguir son los conceptos de proyecto y módulo. La

entidad proyecto es única, y engloba a todos los demás elementos. Dentro de un proyecto podemos incluir varios módulos, que pueden representar aplicaciones distintas, versiones diferentes de una misma aplicación, o distintos componentes de un sistema (aplicación móvil, aplicación servidor, librerías, …). En la mayoría de los casos, trabajaremos con un proyecto que contendrá un sólo módulo correspondiente a nuestra aplicación principal. Por ejemplo en este caso que estamos creando tenemos el proyecto “android-hola-usuario” que contiene al módulo “app”

que contendrá todo el software de la aplicación de ejemplo.

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(14)

5

A continuación describiremos los contenidos principales de nuestro módulo principal.

Carpeta /app/src/main/java

Esta carpeta contendrá todo el código fuente de la aplicación, clases auxiliares, etc. Inicialmente, Android Studio creará por nosotros el código básico de la pantalla (actividad o activity) principal de la aplicación, que recordemos que en nuestro caso era MainActivity, y siempre bajo la estructura del paquete java definido durante la creación del proyecto.

Carpeta /app/src/main/res/

Contiene todos los ficheros de recursos necesarios para el proyecto: imágenes, layouts, cadenas de texto, etc. Los diferentes tipos de recursos se pueden distribuir entre las siguientes

subcarpetas:

Carpeta Descripción

/res/drawable/

Contiene las imágenes y otros elementos gráficos usados por la aplicación. Para poder definir diferentes recursos dependiendo de la resolución y densidad de la pantalla del dispositivo se suele dividir en varias subcarpetas:

 /drawable (recursos independientes de la densidad)

 /drawable-ldpi (densidad baja)

 /drawable-mdpi (densidad media)

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(15)

6

 /drawable-hdpi (densidad alta)

 /drawable-xhdpi (densidad muy alta)

 /drawable-xxhdpi (densidad muy muy alta :)

/res/mipmap/

Contiene los iconos de lanzamiento de la aplicación (el icono que aparecerá en el menú de aplicaciones del dispositivo) para las distintas densidades de pantalla existentes. Al igual que en el caso de las carpetas /drawable, se dividirá en varias subcarpetas dependiendo de la densidad de pantalla:

 /mipmap-mdpi

 /mipmap-hdpi

 /mipmap-xhdpi

 …

/res/layout/

Contiene los ficheros de definición XML de las diferentes pantallas de la interfaz gráfica. Para definir distintos layouts dependiendo de la orientación del dispositivo se puede dividir también en subcarpetas:

 /layout (vertical)

 /layout-land (horizontal)

/res/anim/

/res/animator/

Contienen la definición de las animaciones utilizadas por la aplicación.

/res/color/ Contiene ficheros XML de definición de listas de colores según estado.

/res/menu/ Contiene la definición XML de los menús de la aplicación.

/res/xml/ Contiene otros ficheros XML de datos utilizados por la aplicación.

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(16)

7 /res/raw/

Contiene recursos adicionales, normalmente en formato distinto a XML, que no se incluyan en el resto de carpetas de recursos.

/res/values/

Contiene otros ficheros XML de recursos de la aplicación, como por ejemplo cadenas de texto (strings.xml), estilos (styles.xml), colores (colors.xml), arrays de valores (arrays.xml), tamaños (dimens.xml), etc.

No todas estas carpetas tienen por qué aparecer en cada proyecto Android, tan sólo las que se necesiten. Iremos viendo durante el curso qué tipo de elementos se pueden incluir en cada una de ellas y cómo se utilizan.

Como ejemplo, para un proyecto nuevo Android como el que hemos creado, tendremos por defecto los siguientes recursos para la aplicación:

Como se puede observar, existen algunas carpetas en cuyo nombre se incluye un sufijo adicional, como por ejemplo “values-w820dp”. Estos, y otros sufijos, se emplean para definir recursos independientes para determinados dispositivos según sus características. De esta forma, por ejemplo, los recursos incluidos en la carpeta “values-w820dp” se aplicarían sólo a pantallas con más de 820dp de ancho, o los incluidos en una carpeta llamada “values-v11” se aplicarían tan sólo a dispositivos cuya versión de Android sea la 3.0 (API 11) o superior. Al igual que

estos sufijos “-w” y “–v” existen otros muchos para referirse a otras características del terminal, puede consultarse la lista completa en la documentación oficial del Android.

Entre los recursos creados por defecto cabe destacar los layouts, en nuestro caso sólo tendremos por ahora el llamado “activity_main.xml”, que contienen la definición de la interfaz gráfica de la pantalla principal de la aplicación. Si hacemos doble clic sobre este fichero Android Studio nos mostrará esta interfaz en su editor gráfico, y como podremos comprobar, en principio contiene tan sólo una etiqueta de texto con el mensaje “Hello World!”.

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(17)

8

Pulsando sobre las pestañas inferiores “Design” y “Text” podremos alternar entre el editor gráfico (tipo arrastrar-y-soltar), mostrado en la imagen anterior, y el editor XML que se muestra en la imagen siguiente:

Durante el curso no utilizaremos demasiado el editor gráfico, sino que modificaremos la interfaz de nuestras pantallas manipulando directamente su fichero XML asociado. Esto en principio puede parecer mucho más complicado que utilizar el editor gráfico [no es nada complicado en realidad], pero nos permitirá aprender muchos de los entresijos de Android más rápidamente.

Fichero /app/src/main/AndroidManifest.xml

Contiene la definición en XML de muchos de los aspectos principales de la aplicación, como por ejemplo su identificación (nombre, icono, …), sus componentes (pantallas, servicios, …), o los permisos necesarios para su ejecución. Veremos más adelante más detalles de este fichero.

Fichero /app/build.gradle

Contiene información necesaria para la compilación del proyecto, por ejemplo la versión del SDK de Android utilizada para compilar, la mínima versión de Android que soportará la aplicación, referencias a las librerías externas utilizadas, etc. Más adelante veremos también más detalles de este fichero.

En un proyecto pueden existir varios ficheros build.gradle, para definir determinados parámetros a distintos niveles. Por ejemplo, en nuestro proyecto podemos ver que existe un

fichero build.gradle a nivel de proyecto, y otro a nivel de módulo dentro de la carpeta /app. El primero de ellos definirá parámetros globales a todos los módulos del proyecto, y el segundo sólo tendrá efecto para cada módulo en particular.

Carpeta /app/libs

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(18)

9

Puede contener las librerías java externas (ficheros .jar) que utilice nuestra aplicación.

Normalmente no incluiremos directamente aquí ninguna librería, sino que haremos referencia a ellas en el fichero build.gradledescrito en el punto anterior, de forma que entren en el proceso de compilación de nuestra aplicación. Veremos algún ejemplo más adelante.

Carpeta /app/build/

Contiene una serie de elementos de código generados automáticamente al compilar el proyecto. Cada vez que compilamos nuestro proyecto, la maquinaria de compilación de Android genera por nosotros una serie de ficheros fuente java dirigidos, entre otras muchas cosas, al control de los recursos de la aplicación. Importante: dado que estos ficheros se generan automáticamente tras cada compilación del proyecto es importante que no se modifiquen manualmente bajo ninguna circunstancia.

A destacar sobre todo el fichero que aparece desplegado en la imagen anterior, llamado “R.java”, donde se define la clase R. Esta clase R contendrá en todo momento una serie de constantes con los identificadores (ID) de todos los recursos de la aplicación incluidos en la carpeta

/app/src/main/res/, de forma que podamos acceder fácilmente a estos recursos desde nuestro código java a través de dicho dato. Así, por ejemplo, la

constante R.layout.activity_main contendrá el ID del layout “activity_main.xml” contenido en la carpeta /app/src/main/res/layout/.

Y con esto todos los elementos principales de un proyecto Android. No pierdas de vista este proyecto de ejemplo que hemos creado ya que lo utilizaremos en breve como base para crear nuestra primera aplicación.

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(19)

1

Interfaz de usuario en Android:

Controles básicos (I)

En el capítulo anterior del curso vimos los distintos tipos de layouts con los que contamos en Android para distribuir los controles de la interfaz por la pantalla del dispositivo. En los próximos capítulos vamos a hacer un repaso de los diferentes controles que pone a nuestra disposición la plataforma de desarrollo de este sistema operativo. Empezaremos con los controles más básicos y seguiremos posteriormente con algunos algo más elaborados.

En este primer avance sobre el tema nos vamos a centrar en los diferentes tipos de botones y cómo podemos personalizarlos. El SDK de Android nos proporciona tres tipos de botones: los clásicos de texto (Button), los que pueden contener una imagen (ImageButton), y los de tipo on/off (ToggleButton y Switch).

No vamos a comentar mucho sobre ellos dado que son controles de sobra conocidos por todos, ni vamos a enumerar todas sus propiedades porque existen decenas. A modo de referencia, a medida que los vayamos comentando iré poniendo enlaces a su página de la documentación oficial de Android para poder consultar todas sus propiedades en caso de necesidad.

Control Button [API]

Un control de tipo Button es el botón más básico que podemos utilizar y normalmente contiene un simple texto. En el ejemplo siguiente definimos un botón con el texto “Click” asignando su propiedad android:text. Además de esta propiedad podríamos utilizar muchas otras como el color de fondo (android:background), estilo de fuente (android:typeface), color de fuente (android:textcolor), tamaño de fuente (android:textSize), etc.

1 2 3 4

<Buttonandroid:id="@+id/BtnBotonSimple"

android:text="@string/click"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

Este botón quedaría como se muestra en la siguiente imagen:

Control ToggleButton [API]

Un control de tipo ToggleButton es un tipo de botón que puede permanecer en dos posibles estados, pulsado o no_pulsado. En este caso, en vez de definir un sólo texto para el control definiremos dos, dependiendo de su estado. Así, podremos asignar las

propiedades android:textOn y android:textoOffpara definir ambos textos. Veamos un ejemplo a continuación.

1 2 3 4 5

<ToggleButtonandroid:id="@+id/BtnToggle"

android:textOn="@string/on"

android:textOff="@string/off"

El botón se mostraría de alguna de las dos formas siguientes, dependiendo de su estado:

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(20)

2

Control Switch [API]

Un control Switch es muy similar al ToggleButton anterior, donde tan sólo cambia su aspecto visual, que en vez de mostrar un estado u otro sobre el mismo espacio, se muestra en forma de deslizador o interruptor. Su uso sería completamente análogo al ya comentado:

1 2 3 4 5

<Switchandroid:id="@+id/BtnSwitch"

Y su aspecto sería el siguiente:

Control ImageButton [API]

En un control de tipo ImageButton podremos definir una imagen a mostrar en vez de un texto, para lo que deberemos asignar la propiedad android:src. Normalmente asignaremos esta propiedad con el descriptor de algún recurso que hayamos incluido en las carpetas /res/drawable.

Así, por ejemplo, en nuestro caso vamos a incluir una imagen llamada “ic_estrella.png” por lo que haremos referencia al recurso “@drawable/ic_estrella“. Adicionalmente, al tratarse de un control de tipo imagen también deberíamos acostumbrarnos a asignar la

propiedad android:contentDescription con una descripción textual de la imagen, de forma que nuestra aplicación sea lo más accesible posible.

1 2 3 4 5

<ImageButtonandroid:id="@+id/BtnImagen"

android:layout_height="wrap_content"

android:contentDescription="@string/icono_ok"

android:src="@drawable/ic_estrella"/>

En una aplicación el botón anterior se mostraría de la siguiente forma:

Añadir imágenes a un proyecto de Android Studio

Android Studio incorpora una utilidad llamada Asset Studio con la que podemos añadir

rápidamente a un proyecto algunas imágenes o iconos estandar de entre una lista bastante amplia de muestras disponibles, o utilizar nuestras propias imágenes personalizadas. Podemos acceder a esta utilidad haciendo por ejemplo click derecho sobre la carpeta /main/res del proyecto y seleccionando la opción New / Image Asset:

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(21)

3

Esto nos da acceso a Asset Studio, donde podremos indicar el tipo de imagen a añadir (icono de lanzador, icono de action bar, icono de notificación, …), el origen de la imagen (Image = Fichero externo, Clipart = Colección de iconos estandar, Text = Texto personalizado), el tema de nuestra aplicación (lo que afectará al color de fondo y primer plano de los iconos seleccionados), y el nombre del recurso a incluir en el proyecto.

Así, en nuestro caso de ejemplo, seleccioné “Clipart” como origen de la imagen, seleccioné el icono de estrella mediante el botón “Choose”, e indiqué el nombre “ic_estrella”:

Al pulsar el botón Next el sistema consulta en qué módulo del proyecto y en qué carpeta de recursos del módulo colocará los recursos creados para el icono. Además, como podemos ver en la siguiente imagen Asset Studio se encarga de crear el icono para las distintas densidades de pixeles y colocarlo en su carpeta de recursos correspondiente.

Cabe decir además, que aunque existe este tipo específico de botón para imágenes, también es posible añadir una imagen a un botón normal de tipo Button, a modo de elemento suplementario al texto (compound drawable). Por ejemplo, si quisiéramos añadir un icono a la izquierda del texto de un botón utilizaríamos la propiedad android:drawableLeft indicando como valor el descriptor (ID) de la imagen que queremos mostrar, y si fuera necesario podríamos indicar también el espacio entre la imagen y el texto mediante la propiedad android:drawablePadding:

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(22)

4 1

2 3 4 5 6

<Buttonandroid:id="@+id/BtnBotonMasImagen"

android:text="@string/click"

android:drawableLeft="@drawable/ic_estrella"

android:drawablePadding="5dp"

El botón mostrado en este caso sería similar a éste:

Eventos de un botón

Como podéis imaginar, aunque estos controles pueden lanzar muchos otros eventos, el más común de todos ellos y el que querremos capturar en la mayoría de las ocasiones es el

evento onClick, que se lanza cada vez que el usuario pulsa el botón. Para definir la lógica de este evento tendremos que implementarla definiendo un nuevo objeto View.OnClickListener() y asociándolo al botón mediante el método setOnClickListener(). La forma más habitual de hacer esto es la siguiente:

1 2 3 4 5 6 7 8

btnBotonSimple = (Button)findViewById(R.id.BtnBotonSimple);

btnBotonSimple.setOnClickListener(newView.OnClickListener() { publicvoidonClick(View arg0)

{

lblMensaje.setText("Botón Simple pulsado!");

} });

En el caso de un botón de tipo ToggleButton o Switch suele ser de utilidad conocer en qué estado ha quedado el botón tras ser pulsado, para lo que podemos utilizar su método isChecked(). En el siguiente ejemplo se comprueba el estado del botón tras ser pulsado y se realizan acciones distintas según el resultado.

1 2 3 4 5 6 7 8 9 10 11

btnToggle = (ToggleButton)findViewById(R.id.BtnToggle);

btnToggle.setOnClickListener(newView.OnClickListener() { publicvoidonClick(View arg0)

{

if(btnToggle.isChecked())

lblMensaje.setText("Botón Toggle: ON");

else

lblMensaje.setText("Botón Toggle: OFF");

} });

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(23)

5

Personalizar el aspecto un botón (y otros controles)

En las imágenes mostradas durante este apartado hemos visto el aspecto que presentan por defecto los diferentes tipos de botones disponibles. Pero, ¿y si quisiéramos personalizar su aspecto más allá de cambiar un poco el tipo o el color de la letra o el fondo?

Para cambiar la forma de un botón podríamos simplemente asignar una imagen a la

propiedad android:background, pero esta solución no nos serviría de mucho porque siempre se mostraría la misma imagen incluso con el botón pulsado, dando poca sensación de elemento

“clickable“.

La solución perfecta pasaría por tanto por definir diferentes imágenes de fondo dependiendo del estado del botón. Pues bien, Android nos da total libertad para hacer esto mediante el uso de selectores. Un selector se define mediante un fichero XML localizado en la

carpeta /res/drawable, y en él se pueden establecer los diferentes valores de una propiedad determinada de un control dependiendo de su estado.

Por ejemplo, si quisiéramos dar un aspecto diferente a nuestro botón ToggleButton, para que sea de color azul y con esquinas redondeadas, podríamos diseñar las imágenes necesarias para los estados “pulsado” (en el ejemplo toggle_on.9.png) y “no pulsado” (en el

ejemplo toggle_off.9.png) y crear un selector como el siguiente:

1 2 3 4

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

<itemandroid:state_checked="false"

android:drawable="@drawable/toggle_off"/>

<itemandroid:state_checked="true"

android:drawable="@drawable/toggle_on"/>

</selector>

En el código anterior vemos cómo se asigna a cada posible estado del botón una imagen (un elemento drawable) determinada. Así, por ejemplo, para el estado “pulsado”

(state_checked=”true”) se asigna la imagen toggle_on.

Este selector lo guardamos por ejemplo en un fichero llamado toggle_style.xml y lo colocamos como un recurso más en nuestra carpeta de recursos /res/drawable. Hecho esto, tan sólo bastaría hacer referencia a este nuevo recurso que hemos creado en la propiedad android:background del botón:

1 2 3 4 5 6

<ToggleButtonandroid:id="@+id/BtnPersonalizado"

android:background="@drawable/toggle_style"/>

En la siguiente imagen vemos el aspecto por defecto de nuestro ToggleButton personalizado con los cambios indicados:

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(24)

6

Botones sin borde

Otra forma de personalizar los controles en Android es utilizando estilos. Los estilos merecen un capítulo a parte, pero comentaremos aquí algunos muy utilizados en las últimas versiones de Android, concretamente en el tema que nos ocupa de los botones.

En determinadas ocasiones, como por ejemplo cuando se utilizan botones dentro de otros

elementos como listas o tablas, es interesante contar con todas la funcionalidad de un botón pero prescindiendo sus bordes de forma que adquiera un aspecto plano y se intergre mejor con el diseño de la interfaz. Para ello, podemos utilizar el estilo borderlessButtonStyle como estilo del botón (propiedad style), de forma que éste se mostrará sin bordes pero conservará otros detalles como el cambio de apariencia al ser pulsado. Veamos cómo se definiría por ejemplo

un ImageButton sin borde:

1 2 3 4 5 6

<ImageButtonandroid:id="@+id/BtnSinBorde"

android:contentDescription="@string/icono_ok"

android:src="@drawable/ic_estrella"

style="?android:borderlessButtonStyle"/>

En la siguiente imagen vemos cómo quedaría este botón integrado dentro de un LinearLayout y alineado a la derecha:

El separador vertical que se muestra entre el texto y el botón se consigue utilizando las propiedades showDividers, divider, y dividerPadding del layout contenedor (para mayor claridad puede consultarse el código completo):

1 2 3 4 5 6 7 8

<LinearLayout

android:id="@+id/BarraBtnSinBorde"

android:layout_width="match_parent"

android:orientation="horizontal"

android:showDividers="middle"

android:divider="?android:dividerVertical"

android:dividerPadding="6dp">

Otro lugar muy habitual donde encontrar botones sin borde es en las llamadas barras de botones (button bar) que muestran muchas aplicaciones. Para definir una barra de botones, utilizaremos normalmente como contenedor un LinearLayout horizontal e incluiremos dentro de éste los botones (Button) necesarios, asignando a cada elelemento su estilo correspondiente, en este caso buttonBarStyle para el contenedor, y buttonBarButtonStyle para los botones. En nuetro ejemplo crearemos una barra con dos botones, Aceptary Cancelar, que quedaría así:

1 2 3 4 5 6 7 8 9 10

<LinearLayout

android:id="@+id/BarraBotones"

android:orientation="horizontal"

android:layout_alignParentBottom="true"

style="?android:attr/buttonBarStyle">

<Buttonandroid:id="@+id/BtnAceptar"

android:layout_weight="1"

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(25)

7 11

12 13 14 15 16 17 18 19 20 21

android:text="@string/Aceptar"

style="?android:attr/buttonBarButtonStyle"/>

<Buttonandroid:id="@+id/BtnCancelar"

android:layout_weight="1"

android:text="@string/Cancelar"

style="?android:attr/buttonBarButtonStyle"/>

</LinearLayout>

Visualmente el resultado sería el siguiente:

Botones flotantes (Floating Action Button / FAB)

Como contenido extra de este capítulo voy a hacer mención a un nuevo “tipo de botón” aparecido a raiz de la nueva filosofía de diseño Android llamada Material Design. Me refiero a los botones de acción flotantes que están incorporando muchas aplicaciones, sobre todo tras su actualización a Android 5 Lollipop.

Con la reciente publicación por parte de Google de la librería Design Support Library, añadir este tipo de botones a nuestras aplicaciones es algo de lo más sencillo, y además aseguramos su compatibilidad no sólo con Android 5.x sino también con versiones anteriores. En esta librería se incluye un nuevo componente llamado FloatingActionButton con la funcionalidad y aspecto deseados.

Lo primero que tendremos que hacer para utilizarlo será añadir la librería indicada a nuestro proyecto.

Añadir librerías externas a un proyecto de Android Studio

Para hacer uso de una librería externa en un proyecto de Android Studio tenemos dos posibilidades: añadir el fichero jar de la librería a la carpeta /libs del módulo, o bien añadir la referencia a la librería (si está disponible) como dependencia en el fichero build.gradle del módulo (en la mayoría de ocasiones usaremos esta segunda opción). En este caso, añadiremos a nuestro fichero build.gradle la siguiente línea en el apartado dependencies:

dependencies {

… compile ‘com.android.support:design:22.2.0’

}

Una vez añadida la referencia a la librería, salvamos el fichero y nos aseguramos de pulsar la opción “Sync Now” que nos aparecerá en la parte superior derecha del editor de código:

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(26)

8

Tras esto, Android Studio se encargará de descargar automáticamente los ficheros necesarios y cuando sea necesario para que podamos hacer uso de la librería.

Una vez añadida la librería al proyecto como se describe en la nota anterior, podremos añadir un botón flotante a nuestra interfaz añadiendo un nuevo elemento a nuestro layout

principal activity_main.xml de la siguiente forma:

1 2 3 4 5 6 7

<android.support.design.widget.FloatingActionButton android:id="@+id/fab"

android:src="@drawable/ic_add"

app:fabSize="normal"

app:borderWidth="0dp"/>

La propiedad más relevante, al igual que en el caso de un ImageButton, es android:src, con la que podemos asignar al control la imagen/icono a mostrar. En mi caso de ejemplo he utilizado un nuevo icono (ic_add) añadido al proyecto de la misma forma que explicamos al principio del artículo.

Vemos también la propiedad app:fabSize. Esta propiedad puede recibir los valores “normal” y

“mini“, que determinan el tamaño del control dentro de los dos tamaños estandar definidos en las especificaciones de Material Design.

La última propiedad asignada, app:borderWidth=”0dp”, es necesaria temporalmente (en el momento de actualizar este artículo la versión actual de la librería es la 22.2) para evitar que el botón flotante aparezca sin sombra o con aspecto no estandar en algunas versiones de Android (por ejemplo APIs 16 o 22). Previsiblemente, este error lo corregirán en la siguiente versión de la librería, por lo que puede que en un futuro muy próximo ya no sea necesario asignar esta propiedad.

¿Y como seleccionamos el color del botón? Pues bien, si no indicamos nada, el botón

flotante tomará por defecto el accent color si lo hemos definido en el tema de la aplicación (más información en el artículo sobre la Action Bar) o el color de selección actual. Si queremos utilizar otro color debemos hacerlo desde el código java de la aplicación, por ejemplo en el onCreate() de la actividad principal, llamando al método setBackgroundTintList() del

control FloatingActionButton.

1 2 3 4

fabButton = (FloatingActionButton)findViewById(R.id.fab);

fabButton.setBackgroundTintList(

getResources().getColorStateList(R.color.fab_color));

Como parámetro debemos pasarle un objeto de tipo ColorStateList, que no es más que un selector de color (similar al selector que creamos antes para el ToggleButon personalizado) que crearemos en la carpeta /res/color por ejemplo con el nombre fab_color.xml y que

recuperaremos en nuestro código mediante el método getResources().getColorStateList().

1 2 3 4

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

<itemandroid:state_pressed="true"android:color="#B90000"/>

<itemandroid:color="#FF0000"/>

</selector>

Como podemos ver, en el selector hemos definido el color normal del botón y su color cuando está pulsado.

Para terminar, en la imagen siguiente se muestra la aplicación de ejemplo completa, donde se puede comprobar el aspecto de cada uno de los tipos de botón comentados:

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(27)

9

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(28)

1

Interfaz de usuario en Android:

Controles básicos (III)

Tras hablar de varios de los controles indispensables en cualquier aplicación Android, como son los botones y los cuadros de texto, en este artículo vamos a ver cómo utilizar otros dos tipos de controles básicos en muchas aplicaciones, los checkboxes y los radio buttons.

Control CheckBox [API]

Un control checkbox se suele utilizar para marcar o desmarcar opciones en una aplicación, y en Android está representado por la clase del mismo nombre, CheckBox. La forma de definirlo en nuestra interfaz y los métodos disponibles para manipularlos desde nuestro código son análogos a los ya comentados para el

control ToggleButton.

De esta forma, para definir un control de este tipo en

nuestro layout podemos utilizar el código siguiente, que define un checkbox con el texto “Márcame”:

1 2 3 4 5

<CheckBoxandroid:id="@+id/ChkMarcame"

android:text="@string/marcame"

android:checked="false"/>

En cuanto a la personalización del control podemos decir que éste extiende [indirectamente] del control TextView, por lo que todas las opciones de formato ya comentadas en artículos anteriores son válidas también para este control. Además, podremos utilizar la propiedad android:checked para inicializar el estado del control a marcado (true) o desmarcado (false). Si no establecemos esta propiedad el control aparecerá por defecto en estado desmarcado.

En el código de la aplicación podremos hacer uso de los métodos isChecked() para conocer el estado del control,

y setChecked(estado) para establecer un estado concreto para el control.

1 2

if(checkBox.isChecked()) { checkBox.setChecked(false);

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(29)

2 3 ^}

En cuanto a los posibles eventos que puede lanzar este

control, onClick vuelve a ser el más interesante ya que nos indicará cuándo se ha pulsado sobre el checkbox. Dentro de este evento consultaremos normalmente el estado del control

con isChecked() como acabamos de ver.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

cbMarcame = (CheckBox)findViewById(R.id.ChkMarcame);

cbMarcame.setOnClickListener(newView.OnClickListener() { @Override

publicvoidonClick(View view) {

booleanisChecked = ((CheckBox)view).isChecked();

if(isChecked) {

cbMarcame.setText("Checkbox marcado!");

} else{

cbMarcame.setText("Checkbox desmarcado!");

} } });

Otro evento que podríamos utilizar es onCheckedChanged, que nos informa de que ha cambiado el estado del control. Para implementar las acciones de este evento podríamos utilizar la siguiente lógica, donde tras capturar el evento, y dependiendo del nuevo estado del control (variable isChecked recibida como parámetro), haremos una acción u otra:

1 2 3 4 5 6 7 8 9 10 11 12

cbMarcame = (CheckBox)findViewById(R.id.ChkMarcame);

cbMarcame.setOnCheckedChangeListener(newCheckBox.OnCheckedChangeListener() { publicvoidonCheckedChanged(CompoundButton buttonView, booleanisChecked) { if(isChecked) {

cbMarcame.setText("Checkbox marcado!");

} else{

cbMarcame.setText("Checkbox desmarcado!");

} } });

Control RadioButton [API]

Al igual que los controles checkbox, un radio button puede estar marcado o desmarcado, pero en este caso suelen utilizarse dentro de un grupo de opciones donde una, y sólo una, de ellas debe estar marcada obligatoriamente, es decir, que si se marca una de las

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(30)

3 opciones se desmarcará automáticamente la que estuviera activa anteriormente. En Android, un grupo de botones radio button se define mediante un elemento RadioGroup, que a su vez contendrá todos los elementos RadioButton necesarios. Veamos un ejemplo de cómo definir un grupo de dos controles radiobutton en nuestra

interfaz:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<RadioGroupandroid:id="@+id/GrbGrupo1"

android:orientation="vertical"

android:layout_height="match_parent">

<RadioButtonandroid:id="@+id/RbOpcion1"

android:text="@string/opcion_1"/>

<RadioButtonandroid:id="@+id/RbOpcion2"

android:text="@string/opcion_2"/>

</RadioGroup>

En primer lugar vemos cómo podemos definir el grupo de controles indicando su orientación (vertical u horizontal) al igual que ocurría por ejemplo con un LinearLayout. Tras esto, se añaden todos los objetos RadioButton necesarios indicando su ID mediante la propiedad android:id y su texto mediante android:text.

Una vez definida la interfaz podremos manipular el control desde nuestro código java haciendo uso de los diferentes métodos del control RadioGroup, los más importantes: check(id) para marcar una opción determinada mediante su ID, clearCheck() para

desmarcar todas las opciones, y getCheckedRadioButtonId() que como su nombre indica devolverá el ID de la opción marcada (o el valor -1 si no hay ninguna marcada). Veamos un ejemplo:

1 2 3 4

RadioGroup rg = (RadioGroup)findViewById(R.id.GrbGrupo1);

rg.clearCheck();

rg.check(R.id.RbOpcion1);

intidSeleccionado = rg.getCheckedRadioButtonId();

En cuanto a los eventos lanzados, recurriremos nuevamente al

evento onClick para saber cuándo se pulsa cada uno de los botones del grupo. Normalmente utilizaremos un mismo listener para todos los radiobutton del grupo, por lo que lo definiremos de forma

independiente y después lo asignaremos a todos los botones.

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(31)

4 1

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

privateTextView lblMensaje;

privateRadioButton rbOpcion1;

privateRadioButton rbOpcion2;

//...

lblMensaje = (TextView)findViewById(R.id.LblSeleccion);

rbOpcion1 = (RadioButton)findViewById(R.id.RbOpcion1);

rbOpcion2 = (RadioButton)findViewById(R.id.RbOpcion2);

View.OnClickListener list = newView.OnClickListener() { @Override

publicvoidonClick(View view) { String opcion = "";

switch(view.getId()) { caseR.id.RbOpcion1:

opcion = "opción 1";

break;

caseR.id.RbOpcion2:

break;

}

lblMensaje.setText("ID opción seleccionada: "+ opcion);

} };

rbOpcion1.setOnClickListener(list);

rbOpcion2.setOnClickListener(list);

Al igual que en el caso de los checkboxes, también podremos utilizar el evento onCheckedChange, que nos informará de los cambios en el elemento seleccionado dentro de un grupo. La diferencia aquí es que este evento está asociado al RadioGroup, y no a los

diferentes RadioButton del grupo. Veamos cómo tratar este evento haciendo por ejemplo que una etiqueta de texto cambie de valor al seleccionar cada opción:

1 2 3 4 5 6 7 8 9 10 11 12

rgOpciones = (RadioGroup)findViewById(R.id.GrbGrupo1);

rgOpciones.setOnCheckedChangeListener(newRadioGroup.OnCheckedChangeListener() { publicvoidonCheckedChanged(RadioGroup group, intcheckedId) {

String opcion = "";

switch(checkedId) { caseR.id.RbOpcion1:

break;

caseR.id.RbOpcion2:

break;

}

CORPORACIÓN LÍDERES CORPORACIÓN LÍDERES

(32)

5 13

14 15 16 17

lblMensaje.setText("ID opción seleccionada: "+ opcion);

} });

Veamos finalmente una imagen del aspecto de estos dos nuevos tipos de controles básicos que hemos comentado en este artículo: