Acabas de comenzar a desarrollar apps

Android y ya quieres rendirte?

Tranquilo!
Esa es la sensacin ms comn entre todos los seres humanos cuando se aventuran en
algo que an no conocen.
As que es normal que te angusties y sientas ganas de abandonar. Ya te pasar con el
tiempo si aplicas lo que te digo en esta gua.

Te Mostrar Como Crear Tu Primer App

Ests emocionado porque instalaste Android Studio...
Al fin se han actualizado los componentes del SDK de Android y tambin se configur el
JDK de Java.
Con emocin creas un nuevo proyecto de prueba, luego lo ejecutas y puedes ver como tu
AVD reproduce un increble "Hello World!" .
Sientes esa gran satisfaccin de logro y sonres a la vida, ya que diste tus primeros pasos
en el desarrollo Android.
Lee tambin Instalar Android Studio
Pero qu pasa luego?...
intentas realizar ms acciones con tu miniaplicacin que Android Studio ha creado
automticamente, pero las carpetas y archivos que se encuentran en la jerarqua de tu
proyecto te abruman con extensiones y nombres raros.
Arrastras botones y campos de texto en la pestaa de diseo intentando llevar a cabo
alguna accin.
Navegas por todas las opciones del men superior, cambias variables, pruebas mtodos y
nada funciona.
Ni siquiera se te pasa por la cabeza leer la documentacin del sitio oficial o descargar un
libro para entender mejor de que va esa condenada estructura de un proyecto Android.
Pero no te preocupes, voy darte las luces necesarias para comprender la estructura de un
proyecto en Android Studio y la forma en que se compone un Mdulo de Aplicacin.

Los directorios principales en Android Studio

Al igual que otros IDEs, existe un panel donde se muestra la estructura del proyecto que se
ha generado para comenzar a desarrollar la aplicacin. Esta estructura representa la
jerarqua o esqueleto de tu espacio de trabajo y como desarrollador es primordial aprender
a moverte sobre l.
Qu archivos y carpetas contiene el proyecto?

Por el momento son los que ves anteriormente.

Quiere saber de qu se trata?
Bien,
.idea

Sistema de archivos de intelliJ IDEA que contiene los archivos de configuracin del
proyecto que se est desarrollando.
app

Representa el mdulo funcional de la aplicacin que se est desarrollando. Dentro

de ella se encuentra todos los directorios y archivos que componen el aplicativo.
Build

Guarda un historial de las construcciones generadas del mdulo.

gradle

Contiene el archivo gradle-wrapper para la construccin automtica de la

construccin.
.gitignore

Archivo de Git para ignorar el seguimiento de la versin de otros archivos.

build.gradle

Permite configurar las caractersticas del sistema de construccin Gradle, como la

inclusin de libreras de soporte, la certificacin de aplicaciones, versiones de
compilacin, etc.
gradle.properties

En este archivo se pueden aadir lneas de comando para modificar las opciones de
construccin de gradle.
gradlew

Script para iniciar gradle en el sistema operativo Unix.

gradlew.bat

Script para iniciar gradle en el sistema operativo Windows.

local.properties

Archivo del sistema de construccin que referencia la ubicacin del SDK en tu

computadora.
<NombreDelProyecto>.iml

Este archivo es parte del sistema de mdulos de IntelliJ. Su propsito es guardar

toda la metainformacin del mdulo que ser construido en el proyecto.
settings.gradle

Contiene la definicin de los subproyectos que se construirn. Normalmente solo

encontrars el modulo app.
Este resumen demuestra que no es complicado el propsito de cada archivo y directorio,
es ms, por el momento la mayora no interesan para comprender las bases del desarrollo
Android. Como principiante debes enfocarte en la lgica de la programacin.

Estructura de un Mdulo Android

Como acabas de ver, la carpeta app es la representacin del mdulo de ejecucin de
nuestra aplicacin y es all donde debemos enfocarnos a la hora de implementar la
aplicacin y obtener un archivo .apk .
Si despliegas su contenido se vern varios archivos y carpetas que componen la estructura
de la aplicacin. Veamos una breve definicin para cada uno:
Build

En esta carpeta se ubican los archivos de las construcciones que se generan del
mdulo. SU gestin es automtica por lo que no debemos preocuparnos por
modificar o crear dependencias aqu.
libs

Contiene libreras adicionales que defina el programador para extender las

caractersticas del mdulo.
src

Aqu se encuentran todos los archivos fuente Java de tu proyecto y los recursos
necesarios para integrar el funcionamiento de la aplicacin.
src/androidTest

Contiene los casos de prueba de la aplicacin. El framework de Android brinda

facilidad para generar casos de prueba con JUnit en tus aplicaciones.
src/main/java/<paquete>

Esta carpeta contiene el cdigo fuente java que construye la lgica y operatividad a
la aplicacin.
src/main/assets

No encontrars creado este directorio, pero puedes generarlo para guardar recursos
que tengan formato especial o sean tengan fines especficos, como archivos
binarios, texturas o texto plano.
src/res

Contiene subcarpetas clasificadas por el tipo de recursos que usar tu aplicacin.

Recursos como cadenas, enteros, imgenes, layouts, etc.
src/AndroidManifest.xml

Archivo estandarizado en las aplicaciones Android que define el alcance y

limitaciones de una aplicacin Android, como la cantidad de actividades que tiene,
las versiones de Android donde la aplicacin se ejecutar, los permisos que requiere
la aplicacin para acceder a datos externos, etc. ( Puedes ver ms en la seccin .)
.gitignore

Archivo de Git para ignorar el seguimiento de la versin de otros archivos.

app.iml

Representa la composicin del mdulo app para intelliJ.

build.gradle

Archivo de configuracin del sistema de construccin Gradle que permite

personalizar las caractersticas de dependencia del mdulo.
proguard-rules.pro

Archivo de configuracin que optimiza el cdigo del mdulo para generar apks ms
livianas.
Por ahora ignoraremos los archivos del Sistema de Construccin Gradle, las Pruebas
Unitarias, el Control de Versiones en Git y las Reglas ProGuard. La explicacin de cada uno
de estos temas es especializada, por lo que sern temas de otros ebooks o artculos. Quiero
que te concentres en los archivos fuente y los recursos, ya que son la base de las
aplicaciones.

Si te abrumas intentando comprender el significado de todas las instrucciones de esos

archivos raros te desenfocars del objetivo que es implementar el cdigo de tu primera
aplicacin Android.

Aqu est tu mapa de navegacin

Con frecuencia me encuentro personas que tienen un gran deseo por crear apps Android
pero no saben cmo abordar dicho objetivo.
Les abruma la cantidad de informacin que ronda en la web sin saber por dnde iniciar.
Si esa es tu situacin, tranquilo los siguientes son pasos que segn mi experiencia, debes
seguir:
Paso 1. Pregntate:
Soy graduado o estudiante de una profesin asociada a la programacin?
Si la respuesta es s, avanza al paso dos, de lo contrario pon atencin a lo siguiente:
Ser programador requiere como mnimo estudios de un campo llamado Algoritmia.
Adems se requiere un razonable nivel de pensamiento lgico y cuantitativo.
Esto tiene solucin?
Claramente. Busca un buen curso online, curso tcnico, blog, canal de youtube, etc. y
prctica lo ms que puedas. La idea es potenciar tu cerebro para la resolucin de
problemas.
De lo contrario en el mejor de los casos estars perdiendo tiempo aprendiendo
desarrollo Android sabiendo que existen prerrequisitos mnimos.
Anmate, con dedicacin y un ritmo constante es ms que posible.
Lectura recomendada: Fundamentos de Programacin deJoyanes
Paso 2. Perfecto, ya tienes clara la movida. Por el momento Google usa el lenguaje Java
para desarrollar apps, as que bscate un buen libro, videotutoriales y blogs para aprenderlo.
Lecturas recomendadas:

5 Libros en espaol para aprender a programar en Java

Introduccin A Java Para Desarrollo Android

Paso 3. Instala el entorno de desarrollo para Android. Por el momento este se compone del
SDK de Android, el JDK de Java y el IDE Android Studio. Es todo puedes ver como
configurarlos en conjunto aqu:
Click aqu para ver cmo preparar el entorno de desarrollo Android
Paso 4. Si ya ests listo, entonces comienza a devorarte el resto de este ebook.
Te mostrar como crear una pequea app de ejemplo que te mostrar a grandes rasgos la
actividad de un Android Developer.
Inicia la lectura y da tu primer paso para convertirte en beginner.

Recursos de una aplicacin Android

Los recursos son archivos externos destinados a soportar el comportamiento integral de
una aplicacin. Estos pueden ser imgenes, cadenas, audios, archivos de texto,
animaciones, etc. El hecho es que al ser independientes permiten a tu aplicacin adaptarse
a cualquier configuracin en distintos dispositivos mviles. Configuraciones como el
cambio de Orientacin de la Pantalla, la variacin del Idioma, seleccin de estndares de
Teclado, las Dimensiones de la Pantalla, y mucho ms.
Recuerda que en el apartado anterior vimos que por estndar se usa la carpeta res para
guardar todos estos recursos. En su interior contiene subdivisiones respecto al tipo de
recurso que se alberga. Cada uno de estos subdirectorios tiene un nombre especificado
para la lectura de la aplicacin Android.

Intentar crear carpetas de recursos distintas: Android trae automatizado y preconfigurado

los tipos y nombres de recursos que pueden usarse, por lo que no se reconoceran carpetas
con formatos distintos creadas por el programador.

Tipos de Recursos
La siguiente tabla ilustra los tipos de recursos ms usados en un proyecto Android:
Nombre del

Contenido

Directorio

animator/

Archivos XML que contienen definiciones sobre animaciones.

anim/

Archivos XML que contienen definiciones de otro tipo de

animaciones.

color/

Archivos XML que contienen definiciones de listas de estados

de colores.
Contiene mapas de bits ( .png , .9.png , .jpg , .gif ) o archivo

drawable/

XML que contienen definiciones de elementos especializados

en el API de dibujo de Android.

layout/

Archivos XML que contienen el diseo de interfaz de usuario.

menu/

Archivos XML que contienen la definicin de la estructura de

un men.

raw/

Archivos con otro tipo de extensin.

Archivos XML que contienen definiciones sobre valores
simples como colores, cadenas y nmeros enteros. A
continuacin algunas de las convenciones ms comunes:

values/

arrays.xml

para arreglos

colors.xml

para colores

dimens.xml

para medidas

strings.xml

styles.xml

para cadenas

para estilos de la aplicacin

xml/

Archivos XML que tienen como propsito ser ledos en tiempo

real para alguna tarea de parsing o estructuracin.

Un ejemplo de un recurso drawable es la imagen png que representa el icono de la

aplicacin. Si exploras su contenido notars que se le llamada ic_launcher.png .

Calificadores
Un calificador es una notacin gramatical que condiciona el uso de los recursos en una
aplicacin. Los calificadores estn directamente relacionados con las caractersticas del
dispositivo donde se ejecuta la aplicacin Android.
Como has visto cuando creas un nuevo proyecto en Android Studio, vienen una serie de
carpetas drawable con diferentes nombres. Cada especificacin aadida ms un guion es
un calificador que condiciona los recursos por el tipo de densidad de pantalla establecida.
Por ejemplo drawable-hdpi contendr los recursos drawables que la aplicacin usar si es
ejecutada en un dispositivo con alta densidad (ms de 240dpi para ser exactos).
En ese caso, el framework de Android ayudar a la aplicacin a elegir los drawables en el
directorio correspondiente.
La sintaxis para crear un calificador en un tipo de recurso es la siguiente:
<nombre_del_recurso>-<calificador>

Donde nombre_del_recurso es claramente el nombre del directorio, por ejemplo, values .

Y calificador es una notacin estandarizada que identifica el tipo de configuracin.
Si deseas usar varios calificadores debes separar por guiones cada uno, por ejemplo:
drawable-es-hdpi

El anterior ejemplo adapta un conjunto de drawables a un dispositivo cuya configuracin se

basa en el idioma Espaol ms una densidad de pantalla alta.
Al igual que la densidad del dispositivo, tambin podemos encontrar un sin nmero de
caractersticas de configuracin adicionales. A continuacin veremos una tabla que
mostrar las categoras de calificadores ms populares:

Sintaxis del
Calificador

Configuracin
en
fr

Idioma y Regin

en-rUS
fr-rFR
fr-rCA

ldrtl

Direccin de la escritura

ldltr

Definicin

La sintaxis del lenguaje se establece en

la norma ISO 639-1 , la cual explica que
se usan dos letras descriptivas. Si
deseas aadir la regin especfica,
entonces usa la descripcin estipulada
en la normar ISO 3166-1-alpha-2 .
Usa el valor ldrtl para definir "layoutdirection-right-to-left", es decir, escritura
de derecha a izquierda. Y ldltr para
expresar "layout-direction-left-to-right" o
escritura de izquierda a derecha (que es
el valor por defecto).

sw<N>dp

Ejemplos:
Densidad mnima

sw320dp

Define la densidad mnima para filtrar los

recursos de la aplicacin (Smallest
Witdh).

sw600dp
sw720dp

w<N>dp

Ancho mnimo disponible

w720dp

Filtra por el ancho de pantalla actual de

la pantalla en dps. Usa el identificador
<N>
para establecer el nmero

w1024dp

respectivo.

Ejemplos:

etc.
h<N>dp

Alto mnimo disponible

h720dp

Filtra por el alto mnimo que debe estar

disponible en la pantalla del dispositivo.
Usa el identificador <N> para establecer

h1024dp

el nmero respectivo en unidades dp.

Ejemplos:

etc.

small

Permite
configurar
los
recursos
dependiendo del tamao de la pantalla.
Por tamao entindase las siguientes
resoluciones aproximadas:

normal

Tamao de la pantalla

large
xlarge

small: 320x426 dp
normal: 320x470 dp
large: 480x640 dp
xlarge: 720x960 dp
Se usa la proporcin o ratio de la pantalla
del dispositivo para incluir los recursos.

long

Proporcin de la pantalla

notlong

long: Pantallas largas como los formatos

WQVGA, WVGA, FWVGA.
notlong: Pantallas cortas como QVGA,
HVGA, and VGA.

port

Orientacin de la pantalla

land

port: El dispositivo se despliega como

portarretrato o verticalmente
land: El dispositivo
horizontalmente.

se

despliega

ldpi: Low-density, densidades de mximo

120dpi.
mdpi: Medium-density, mximo 160dpi.
ldpi
mdpi
hdpi

Densidad de la pantalla (dpi) xhdpi

xxhdpi
xxxhdpi
nodpi

hdpi: High-density, mximo 240dpi.

xhdpi:
320dpi

Extra-high-density,

mximo

xxhdpi: Extra-Extra-High-Density, mximo

480dpi.
xxxhdpi: Extra-extra-extra-high-density
mximo 640dpi.
nodpi: aqu puedes situar objetos que no
quieres redimensionar sea cual sea la
densidad.

Ejemplos:
v3

Versin de Android o nivel

v4
del API
v7

etc.

Nivel del API soportado por el

dispositivo. Por ejemplo v16 para
referirse a los dispositivos con Android
JellyBeans 4.1.

Los recursos string

Para aquellos recursos que contienen informacin de texto se debe usar el archivo
strings.xml. Este contiene una serie de tems con un identificador llamado name y su
contenido respectivo.
Si abres este archivo ubicado en la carpeta values, vers una definicin parecida a la
siguiente:
<resources>
<string name="app_name">MegaKalc</string>
</resources>

Este archivo de recursos debe contener como nodo principal la etiqueta <resources> para
hacer nfasis en la creacin de recursos. Cada cadena de texto debe ser declarada dentro
de elementos <string> , donde su clave se establece con el atributo name y el contenido va
en lnea.

Cmo acceder a los recursos?

Existen dos formas para acceder a un recurso: En el cdigo a travs de la clase R o en
definiciones XML.
Acceder a los recursos en el cdigo
Para acceder en el cdigo debes referirte a la clase R.java , un archivo especial que es
generado automticamente cuando tu aplicacin Android es compilada.
Esta clase contiene la referencia a todos los recursos que usars en tu proyecto.
Cada referencia est declarada como un nmero hexadecimal ligado al recurso lgico.
Las tipos de recursos son representados por clases internas y sus atributos son los
recursos particulares como tal.
Veamos un ejemplo de cmo luce el archivo:
public final class R {
public static final class anim {

public
public
public
public
public
public
public
public
public
public

static
static
static
static
static
static
static
static
static
static

final
final
final
final
final
final
final
final
final
final

int
int
int
int
int
int
int
int
int
int

abc_fade_in=0x7f040000;
abc_fade_out=0x7f040001;
abc_grow_fade_in_from_bottom=0x7f040002;
abc_popup_enter=0x7f040003;
abc_popup_exit=0x7f040004;
abc_shrink_fade_out_from_bottom=0x7f040005;
abc_slide_in_bottom=0x7f040006;
abc_slide_in_top=0x7f040007;
abc_slide_out_bottom=0x7f040008;
abc_slide_out_top=0x7f040009;

}
public static final class attr {

Eso significa que para llamar un recurso mediante a la clase R , sigues la sintaxis:

[<paquete>].R.<tipo_de_recurso>.<nombre_del_recurso>

Donde,

el nombre del paquete en que se encuentra el recurso. Si el recurso

es de tu propio proyecto no requiere este parmetro.

<tipo_de_recurso> : Representa que tipo de recurso buscars. Por

<paquete> : Es

ejemplo si

buscas un String entonces usas la subclase string .

<nombre_del_recurso> : Si buscas

un archivo, entonces es el nombre de este. Si lo

que buscas es un valor simple definido en XML, entonces usas el

atributo android:name de dicho recurso.
Un ejemplo de acceso sera el siguiente:
TextView titulo = (TextView) findViewById(R.id.textoTitulo);
titulo.setText(R.string.titulo);

La primer lnea obtiene un TextView y en la segunda se le asigna una cadena guardada en

un string llamado ttulo, que ha sido definido en el archivo strings.xml .
Recuerda que el API de Android nos provee todos los recursos que usa el sistema operativo
en sus aplicaciones y comportamiento corriente.
Para accederlos debes hacer referencia al paquete Android, donde encontrars una
clase R que proporciona el acceso correspondiente.

Acceder a los recursos en XML

Similar que en el cdigo Java, los recursos pueden ser accedidos a travs de referencias
XML con la siguiente sintaxis:
@[<paquete>:]<tipo_del_recurso>/<nombre_del_recurso>

En este caso se usa el smbolo @ para navegar en el DOM de cada recurso XML definido
con anterioridad. Si el recurso se encuentra en el paquete de tu aplicacin no debes usar el
nombre. Pero si est por ejemplo en el paquete de Android, entonces usa android .
Ejemplo:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="@string/titulo"
android:id="@+id/textoTitulo"/>

Como ves, se le asigna al atributo android:text el string titulo.

Si quisieras asignar un color del paquete Android al fondo de un view puedes acceder de la
siguiente forma:
android:background="@android:color/white"

Donde white es un recurso del framework para el color blanco.

Lee tambin Disear Temas y Estilos para tus Aplicaciones Android

Todos Hablan De Activities, Pero Qu

Son?
Una actividad es un "pantallazo" de tu aplicacin. Acta como el contenedor principal de
todos los componentes de interfaz siendo un equivalente a las ventanas que abren los
sistemas operativos de escritorio.
Por ejemplo, el home de Google Play es una actividad:

Y cada una de las secciones de pantalla completa por donde vayas navegando es una
actividad. En ellas se despliega todo el poder del diseo artstico y programtico para
obtener el mejor rendimiento y experiencia de usuario.

Ciclo de vida de una Actividad

Las actividades actan como entidades vivas ante las acciones del usuario o del sistema.
Estas se autogestionan.
Tu solo automatiza su comportamiento. No tienes que iniciarlas, destruirlas, reanudarlas,
dibujarlas, pausarlas, etc.
Este comportamiento es posible gracias al ciclo de vida de la actividad, el cual se cre para
automatizar las acciones de una actividad en el sistema. Si has estudiado autmatas
podrs hacerte una idea del flujo de trabajo que se emplear.
Cuando Android inicia la Actividad Principal de una aplicacin, esta comienza a atravesar
por una serie de estados que le permiten definir su comportamiento. No importa lo que pase
en el sistema, la actividad siempre tendr un curso definido de operacin.
El rol del programador es solo definir qu acciones ocurrirn en la transicin de estado a
estado para que se cumpla el objetivo de la aplicacin.
La siguiente ilustracin muestra el ciclo de vida de una actividad:

Cada transicin entre estados es representada por mtodos callback en la API de Android.
Recuerda que un mtodo callback es un mtodo que se llama automticamente por el
sistema en el momento que este lo requiera. El programador no tiene control sobre esta
ejecucin, pero si puede sobrescribir los mtodos para que se lleven a cabo tareas
personalizadas.
A continuacin se explica cada estado de la actividad y sus respectivas transiciones:

Creada: Una actividad se ha creado cuando su estructura se encuentra en memoria,

pero esta no es visible aun. Cuando el usuario presiona sobre el icono de la
aplicacin en su dispositivo, el mtodo onCreate() es ejecutado inmediatamente
para cargar el layout de la actividad principal en memoria.

Ejecutada: Despus de haber sido cargada la actividad se ejecutan en secuencia a

el mtodo onStart() y onResume() . Aunque onStart() hace visible la actividad, es
onResume()

quien le transfiere el foco para que interacte con el usuario.

Pausada: Una actividad est en pausa cuando se encuentra en la pantalla

parcialmente visible. Un ejemplo sera cuando se abren dilogos que toman el foco
superponindose a la actividad. El mtodo llamado para la transicin hacia la
pausa es onPause() .

Detenida: Una actividad est detenida cuando no es visible en la pantalla, pero an

se encuentra en memoria y en cualquier momento puede ser reanudada. Cuando
una aplicacin es enviada a segundo plano se ejecuta el mtodo onStop() .
Al reanudar la actividad, se pasa por el mtodo onRestart() hasta llegar a el
estado de ejecucin y luego al de reanudacin.

Destruida: Cuando la actividad ya no existe en memoria se encuentra en estado de

destruccin. Antes de pasar a destruir la aplicacin se ejecuta el
mtodo onDestroy() . Es comn que la mayora de actividades no implementen
este mtodo, a menos que deban destruir procesos (como servicios) en segundo
plano.

Este ebook se enfocar en el mtodo onCreate() , debido a que es la base de la

construccin de la actividad porque se incorporan las declaraciones de interfaz y controles.
Los otros mtodos se sobrescriben en situaciones ms avanzadas, como por ejemplo,
conservar datos cuando la aplicacin se minimiza, cuando se cierra la aplicacin, etc.
Otro aspecto a tener en cuenta es la existencia de una actividad principal en toda aplicacin
Android. Esta se caracteriza por ser aquella que se proyecta primero cuando el usuario hace
Tap en el icono de la aplicacin en su escritorio.

La clase Activity
Las actividades en el API de Android se representan por la clase Activity . Si ves tu
proyecto de Android Studio, veras que ha creado una nueva clase que hereda
de AppCompatActivity .
Esta es una subclase que soporta varios elementos nuevos en versiones anteriores de
Android.
Normalmente su contenido es la sobrescritura del mtodo onCreate() .
Veamos un ejemplo:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

El mtodo onCreate() del cdigo anterior tiene dos instrucciones necesarias en cualquier
actividad, la llamada a la referencia super obligatoria de la superclase y la creacin del
contenido a travs de un recurso layout con setContentView() .
Si puedes notar, se accede a un recurso layout con R.layout.activity_main como
parmetro de setContentView() . Esto se debe a que internamente se lleva a cabo el
proceso de "inflado" de la interfaz.
Cuando leas o escuches este trmino debes saber qu hace referencia al proceso de
convertir definiciones de elementos XML en objetos Java, es decir, un proceso de parsing.

El archivo AndroidManifest.xml
Este archivo es como el pegamento entre los componentes de las aplicaciones para que
funcionen como un todo dentro de Android. Cada aplicacin debe contenerlo
obligatoriamente debido a que la compilacin y parsing se orienta en su contenido.
El archivo AndroidManifest.xml acta como un indicador de las caractersticas de tu
aplicacin, estableciendo todos los componentes que tiene, sus limitaciones, los permisos
que necesita, las versiones de Android donde correr tu aplicacin, etc.
Lee tambin Tutorial bsico del lenguaje XML
Su definicin XML se inicia con el elemento raz <manifest> , el cual debe contener un
nodo <application> que represente la existencia de una aplicacin.
Veamos un ejemplo tpico para un proyecto en blanco de Android Studio:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.hermosaprogramacion.megakalc" >
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.hermosaprogramacion.megakalc.MainActivity"
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>
</manifest>

Un archivo de manifesto tiene las siguientes caractersticas:

El nodo raz <manifest> hace referencia al namespace android definido en el API

de Android. Tambin usa el atributo package para referenciar el paquete donde se
alberga el cdigo fuente de tu aplicacin.

Es obligatorio que contenga un elemento <application> para declarar la

presencia de una aplicacin Android. Este elemento puede contener cualquier tipo
de componentes. Generalmente siempre veremos un elemento <activity> para
aadir una actividad dentro de la aplicacin. Cada bloque de construccin que
exista dentro de la aplicacin se refiere a una clase Java que debe haber sido
declarada con anterioridad.

Para relacionar ambos entornos se usa el atributo android:name de los bloques

con el fin de establecer el nombre del archivo java que contiene su referencia
programtica. En el ejemplo anterior el nodo <activity> se liga con MainActivity .

El atributo android:label se refiere al ttulo que desplegar la actividad en los

lugares que se referencie (como la Action Bar). Normalmente Android Studio crea
por defecto el string app_name , el cual contiene el nombre que asignaste en el
asistente de creacin del proyecto.

En el apartado la seccin 3 se declar que las aplicaciones Android siempre tendrn una
actividad principal.
Precisamente los elementos <intent-filter> y <action> configuran esta caracterstica.
La propiedad android.intent.action.MAIN especifica que la actividad en cuestin es la
principal. Adems ser la primera
( android.intent.category.LAUNCHER ).

que

se

iniciar

ante

el

usuario

Este tema es ms avanzado, por lo que la explicacin se escapa de este ebook.

Recuerda aadir cada actividad nueva declarada en tu cdigo como
elemento <activity> en el AndroidManifest.xml . Regularmente no es necesario porque
Android Studio lo har por ti, pero muchas personas redactan sus actividades desde cero y
olvidan declararlas.

Qu hago? La compilacin genera 2 Apks: esto sucede porque declaraste dos actividades
con la propiedad LAUNCHER . Elige solo la que cumpla el rol de principal.

Disear la interfaz de una aplicacin

Android con Layouts
La definicin de Layout se desprende de la definicin de View.
Un View es un componente que tiene representacin grfica. Se despliega en pantalla y
adems puede tener interaccin con el usuario.
Ejemplos de estos son botones, campos de texto, etiquetas, listas, radios, etc.

Ahora, un Layout es un View que contiene ms views. Su fin es proporcionar al programador

un mecanismo para crear un diseo ptimo de los views que estarn disponibles para el
usuario y su interaccin.

Los layouts programticamente son subclases de la superclase ViewGroup .

Aunque se pueden crear layouts personalizados, la API trae consigo implementaciones
prefabricadas para no complicarse la vida.
Algunas de ellas son: LinearLayout, RelativeLayout, GridView y WebView.

Tipos de Layouts en Android

A continuacin se ver una breve definicin de las clases que representan los layouts ms
populares:
FrameLayout

Este layout bloquea secciones de la pantalla para mostrar un elemento por cada seccin.

LinearLayout

Organiza los elementos en forma de filas o columnas.

GridLayout

Este tipo de Layout tiene la capacidad de ubicar a sus hijos en forma de una grilla
rectangular. Se basa en el recorrido de los ndices que sectorizan sus celdas para aadir
cada view.

RelativeLayout

Este es uno de los views ms utilizados, debido a que acomoda sus hijos con posiciones
relativas. Cuando digo relativas, me refiero a que dependiendo de la ubicacin de un view
se determinar la posicin de otro, lo que permite un ajuste instantneo por si en algn
momento las pociones cambian.

WebView
Muestra contenido web parseando cdigo HTML.

La primera seccin de la paleta de componentes en Android Studio precisamente se llama

Layouts, donde encontrars varios de estos elementos:

Entendiendo el RelativeLayout
El RelativeLayout es uno de los layouts ms populares y usados para crear diseos
flexibles y suavizados.
En l se puedes crear infinidad de distribuciones de views a travs de referencias
nominativas.
A diferencia de otros layouts que requieren contener a otros layouts para estructurar el
diseo, situacin que reduce el rendimiento de la aplicacin.
Muchos desarrolladores se confunden a la hora de emplearlo, ya que las referencias pueden
llegar a ser confusas si el conocimiento de ingls no es intuitivo.
Cuando digo referencias me refiero a que no expresaremos la ubicacin de los
componentes de esta forma:
"El botn OK estar ubicado en el punto (200, 120) del layout y sus dimensiones son
200x30 dp"
A esa definicin de atributos se le llama definicin absoluta, y describe con pelos y seales
cuales son las medidas numricas para el View.
A diferencia de esa declaracin, dentro de un RelativeLayout usaremos expresiones como
la siguiente:
"El botn OK estar ubicado a la izquierda del extremo derecho del TextView 2 y sus
dimensiones sern ajustadas al padre"
Notas la diferencia?
No importa de qu tamao sea la pantalla o que densidad maneje, el botn se ajustar
relativamente a las condiciones que se le han impuesto.
Lo que significa: mejor experiencia para distintos usuarios sin importar las caractersticas
de su dispositivo.
Ahora, para llevar estas descripciones a un view en su declaracin XML se han de usar
atributos especializados. Atributos que permiten acomodar el view en relacin a su padre u
otro view. Veamos algunos:
android:layout_above

Ubica el borde inferior del view en cuestin sobre el view que se declar en su valor.
android:layout_below

El borde superior del view es ubicado por debajo del view asignado.
android:layout_toRightOf

El borde izquierdo del view es ubicado al lado derecho de otro.

android:layout_toLeftOf

El borde derecho del view es ubicado al lado izquierdo de otro.

android:layout_alignTop

El borde superior del view es alineado con el borde superior del relative layout.
Existen muchos ms atributos que se refieren a los lados restantes que podemos utilizar.
Todos son intuitivos si conoces el significado en espaol de los adverbios empleados.
Puedes conocer todos los atributos disponibles en la clase RelativeLayout.LayoutParams.

Por ejemplo
La siguiente ilustracin muestra dos views alineados en un RelativeLayout.
El RadioButton se encuentra alineado a la izquierda del botn y adems su borde superior
coincide tambin:

Android Studio visualiza las posibles referencias entre views en su seccin de diseo. No
obstante se vuelve complejo a medida que se aaden ms views, ya que las relaciones no
se entienden o no son las ms acordes. En este caso es necesario asignar las relaciones
manualmente en el Panel de Propiedades.

Veamos otro ejemplo donde un CheckBox se alinea a los bordes superior y derecho del
RelativeLayout :

El RelativeLayout en Android Studio

Android Studio provee un sistema muy interesante en la seccin de diseo. Cuando se estn
distribuyendo los elementos este resume los atributos de referencia dentro del panel de
propiedades de cada view.

La anterior ilustracin visualiza todos los atributos que un view dentro de un

RelativeLayout puede adquirir. Sin embargo para los atributos de relacin entre views
aparece una propiedad llamada layout:alignComponent , la cual contiene a todos los
atributos de ubicacin.
El sistema funciona de la siguiente manera: Existen una serie de pares de alineacin, donde
el primer trmino es el borde del view actualmente seleccionado y el segundo trmino es el
borde del view con el que se quiere relacionar.
Ejemplo: Si quieres que el margen derecho de tu componente colinde con el borde izquierdo
de otro view, entonces usas el par right:left. Solo se elige entre la lista que se despliega para
seleccionar el view necesario.

Esta sintaxis actualizar directamente la definicin de tu view, modificando el valor de su

atributo android:layout_toLeftOf :
android:layout_toLeftOf="@+id/Texto"

Adicionalmente existen las propiedades layout:alignParent y layout:centerInParent .

La primera contiene resumidamente las caractersticas de relacin entre un view y el padre.
Puedes usar check boxes para seleccionar la que desees.

En la segunda propiedad puede elegir tres opciones de centrado con respecto al

padre:centrado horizontal, centrado vertical, ambos centrados. Cada una de estas
elecciones hace referencia a los atributos de referencia y se irn actualizando en la
definicin XML cuando los elijas.

Al probar todas estas propiedades sentirs la flexibilidad del RelativeLayout . Te

recomiendo probar cada uno de los comportamientos de este sistema de diseo, ya que
ms adelante necesitars estos conocimientos.

Manejar Eventos Cuando Un View Es

Presionado
Supongo que ahora que sabes algo de views, ya quieres interactuar con ellos, no es as?
Bien.
Recuerdas el patrn Observer de Java?
Pes el manejo de eventos en Android lo usa a travs de escuchas (listeners).
Recuerda que una escucha es un objeto relacionado a otro objeto, cuyo fin es estar
pendiente a las acciones que lo afectan en el exterior.
Su trabajo es registrar estos sucesos y notificarlo al entorno principal para que se tomen
acciones preprogramadas y dirigir correctamente el flujo.
Los eventos con mayor frecuencia de ocurrencia son los eventos de entrada a travs de los
dispositivos de interfaz humana, como lo son los mouses, teclados, joysticks, o en este
caso el tap de una pantalla mvil.

Ejemplo de implementacin de OnClickListener

OnClickListener es una escucha que permite implementar acciones cuando un view es
presionado en la interfaz por el usuario.
Para implementarla lo primero que debes realizar es relacionar la interfaz OnClickListener
ya sea a travs del uso de interfaz en la actividad donde se encuentra el botn o creando
una nueva clase annima y setearla en el atributo interno del botn:
public class MainActivity extends AppCompatActivity implements
View.OnClickListener{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button boton = findViewById(R.id.boton);
// this = MainActivity
boton.setOnClickListener(this);
}
}

El mtodo setOnClickListener() asigna al botn declarado la instancia de la clase que

implementa la interfaz OnClickListener , que en este caso es la misma clase contenedora.
Luego se debe diligenciar el contenido del mtodo callback onClick() . Sin l, la escucha
no tendra sentido, ya que debe existir para dirigir los eventos registrados hacia su
contenido.
@Override
public void onClick(View v) {
// Acciones
}

Dentro de este mtodo debes ubicar todas las acciones que desees que ocurran al
presionarse el botn. Recibe un parmetro de tipo View , el cual hace alusin a la instancia
del botn seleccionado.

Manejo annimo
Otra forma de usar esta interfaz es creando una clase annima en lnea:
boton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});

Atributo android:onclick
Usa la propiedad llamada android:onclick . En ella puedes asignar un mtodo que tenga la
forma de onClick() . Lgicamente el mtodo debe estar previamente definido, retornar en
void

y recibir como parmetro un objeto de tipo View .

Por ejemplo
Voy a declarar un mtodo llamado sumar() , el cual actuar como onClick.
public void sumar (View v){
suma = a+b;
}

Ahora supn que este mtodo debe ejecutarse cuando se presione el botn. As que voy al
panel de propiedades de Android Studio y se lo asigno directamente:

O a travs de la definicin XML:

android:onClick="sumar"

Cul crees que es la diferencia entre estos tres caminos?

Que usar clases annimas o asignar mtodos directos en el layout es ideal para actividades
que monitorean a lo mximo 2 views.
No obstante existirn casos especiales donde mltiples views estn registrados para recibir
eventos de toque.
Por lo que la primera opcin funciona de maravilla, ya que puedes estar alerta de todos los
elementos que estn dentro de la actividad a travs de una estructura de seleccin mltiple:
@Override
public void onClick(View v) {
int idView = v.getId();
switch (idView) {
case R.id.primerView:
// acciones
break;
case R.id.segundoView:
// acciones
break;

case R.id.enesimoView:
// acciones
break;
}
}

El ejemplo anterior ilustra que dependiendo del id obtenido y la confrontacin con los ids
registrados en la clase R se implementarn las acciones necesarias.

MegaKalc: El Ejemplo Que Tanto Esperabas

El siguiente ejemplo es bsico, por lo que te permitir familiarizarte con el entorno de
Android Studio y la dinmica del diseo e implementacin de interfaces.
El objetivo de la aplicacin MegaKalc es sencillo, operar dos nmeros que el usuario
ingrese en los campos. Adems de eso se aadir una radio para que seleccione una de las
cuatro operaciones bsicas de la aritmtica: suma, resta, multiplicacin y divisin.

Paso 1: Crear un nuevo proyecto en Android Studio

Primero lo primero. Inicia Android Studio y crea un proyecto que se llame MegaKalc con
una actividad en blanco (Blank Activity). Deja por defecto el nombre de la actividad como
MainActivity.java y su layout como activity_main.xml .

Paso 2: Disea el layout de la actividad

Antes de comenzar a programar el comportamiento de MainActivity primero disearemos
su contenido visual.
En este caso cre el siguiente boceto para tener una visin general de lo que haremos:

Con ello ya tenemos claro de qu forma acomodar los views que necesarios dentro del
archivo activity_main.xml . Este archivo trae contenido prefabricado. Elimnalo y djalo
as:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
</RelativeLayout>

El primer mensaje que se muestra es un TextView con una cadena informativa que
guardaremos en strings.xml . Para agregarlo al layout iremos a la paleta de views, te
ubicars en la seccin Widgets y arrastrars un Large Text:

El espacio de diseo de Android Studio muestra un tooltip emergente que te indica la

posicin relativa donde se ubicar. La imagen anterior despliega el
mensaje "centerHorizontal + alignParentTop" , que significa que el TextView estar
centrado horizonalmente con respecto al padre y alignParentTop se refiere a que el
elemento alinear su parte superior a la parte superior del RelativeLayout .
Ahora cambia el atributo id del TextView en el panel de propiedades para ajustar el nombre
del elemento a las convenciones de cdigo que use tu equipo de desarrollo. En mi caso
particular uso notacin camelCase ms una agregacin del tipo de view. Siguiendo este
estndar asignar el id de textoInformacion .

A continuacin reemplazaremos el texto que trae como predeterminado y aadiremos un

nuevo tem al archivo strings.xml para referirnos al valor externamente. As que ve al
atributo text del text view y presiona el botn .

Se desplegar un administrador de los strings que tienes en el proyecto y aquellos que son
propios del sistema (puedes explorar en ambas pestaas, Project y System).

Si eres buen observador, vers que se ha seleccionado el tem app_name y su valor actual
se muestra en un previsualizador de la parte inferior. En este administrador puedes decidir
si usar un valor de la lista de strings que se encuentra actualmente (Si es que ya has definido
previamente tu string manualmente) o crear un string nuevo desde interfaz.
Debido a que no se tiene un string que contenga la cadena de textoInformacion , entonces
crearemos uno nuevo a travs del botn desplegable New Resource. En cuanto es
presionado aparece una opcin llamada New String Value

Al acceder a la nueva creacin de un valor string se ejecuta el siguiente formulario:

Por el momento solo se diligencia el nombre del string que en este caso por comodidad se
usa el mismo id del textView. Y el contenido del string ser el texto que vimos en el boceto
anterior.
En la parte inferior se encuentran los directorios donde se aadir el nuevo string. Por el
momento se encuentra el directorio values por defecto y otro values con
calificador w820dp. De acuerdo a tus necesidades selecciona el directorio en que actuar
el string.
Presiona Ok y la cadena se crear y asignar.
Tarea 2.2: Aadir un RadioGroup
El siguiente elemento que aadiremos ser un RadioGroup para generar exclusin entre
varios RadioButtons .
Dirgete a la paleta de views en la seccin Containers y selecciona el elemento RadioGroup.
Luego sitalo en el lmite inferior del textview. Vers que aparecer un tooltip con el mensaje
"center Horizontal + below=textoInformacion" . Ya sabes el significado de la primera
sentencia, en cuanto a la segunda parte, se refiere a que el lmite superior del radiogroup

se ubicar en el lmite inferior

atributo android:below_view ).

(below)

del

textview

(o

la

asignacin

del

Lo siguiente es establecer las dimensiones del radiogroup ajustadas al contenido que se le

establezca. Lo que quiere decir que sus atributos android:layout_width
y
android:layout_height

se les asignar la constante wrap_content .

No olvides asignarle un id.

Tarea 2.3: Aadir RadioButtons
El siguiente movimiento es aadir cada RadioButton dentro del RadioGroup . Esto se hace
yendo a la paleta en la seccin Widgets y arrastrando el componente RadioButton hacia el
grupo.

Una vez arrastrado los cuatro radios cambiales su id a radioSuma , radioResta ,

radioMultiplicacion

y radioDivisin . Luego aade 4 strings con los valores "Suma" ,

"Resta" , "Multiplicacin"

y "Divisin" . Concluye asignndolas a cada radio en el orden

en que fueron declaradas.

Hasta aqu se ha creado la primera seccin de la interfaz, que se constituye de los views
necesarios para que el usuario tome una decisin.
A continuacin se aadir un View personalizado para dividir el contenido, el cual
representar una lnea divisoria.
Para aadirlo accede a la definicin XML de activity_main.xml y aade la siguiente
etiqueta:
<View
android:id="@+id/linea"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:background="#aa5f5f5f" />

Este view personalizado ajusta su ancho a la dimensin del padre, tiene una altura de 1dp
para simule el grosor de una lnea recta y adems se cambi su background a un color
oscuro que resalte en el layout.

Tarea 2.4: Aadir EditTexts

El usuario tendr a su disposicin campos de texto para ingresar 2 nmeros enteros. Estos
se encuentran en la seccin TextFields de la paleta. Vers que hay varias opciones en
cuanto al formato de los datos que soportan, como fecha, email, nmeros, nombres, etc.
Todos son el mismo componente EditText , solo se diferencian en el valor de un atributo
llamado android:inputType , el cual recibe una serie de constantes que se refieren al tipo
de entrada aceptada. Ya tenemos claro que los campos que usaremos solo aceptarn
nmeros, as que arrastra el primero como se muestra en la siguiente ilustracin:

alignParentLeft significa que el borde izquierdo del campo de texto estar alineado al borde
izquierda del RelativeLayout . Adicionalmente el borde superior estar por debajo (below)
de la lnea de divisin y se aadirn 40dps de margen superior entre ambos. Es necesario
disminuir su ancho a 80dp en su atributo android:layout_width si queremos conservar
una visibilidad afable.

Ahora aade un texto informativo para el usuario con el atributo android:hint ubicado en
el panel de propiedades. Recuerda que el boceto tena la cadena "x" en este campo (Si
quieres centra el texto con android:gravity= "center_horizontal" ):

En seguida aade un TextView para ubicar el operador matemtico correspondiente.

Se indica que el borde izquierdo del texto estar junto al lado derecho del campo de texto y
que estarn alineados al mismo nivel en su borde superior. Tambin necesitamos que
ambos limites inferiores estn alineados para que sean del mismo tamao, as que asigna
a la propiedad layout:alignComponent en su campo bottom:bottom al EditText .
Teniendo claras las referencias de lmites en los views prueba ubicar todos los views en la
operacin como se muestra en el diseo. Modifica los atributos como ms te parezca y
aade tu toque personal.

Tarea 2.5: Aadir botn para operar

Finalmente aadiremos el botn que permitir calcular el resultado de los dos nmeros que
el usuario ha introducido al formulario.
Ve a la paleta, elige el widget Button y adelo.
Aplica las siguientes instrucciones:

Alinea su borde inferior con el borde inferior del padre

Cntralo horizontalmente

Especifica como nombre del mtodo de click onClickOperar

Finalmente la definicin XML del archivo activity_main.xml sera la siguiente:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<TextView
android:id="@+id/textoInformacion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="@string/textoInformacion"
android:textAppearance="?android:attr/textAppearanceLarge" />
<RadioGroup
android:id="@+id/radiosOperaciones"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/linea"
android:layout_below="@+id/textoInformacion"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp">

<RadioButton
android:id="@+id/radioSuma"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:text="@string/sumaRadio" />
<RadioButton
android:id="@+id/radioResta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/restaRadio" />
<RadioButton
android:id="@+id/radioMultiplicacion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/multiplicacionRadio" />
<RadioButton
android:id="@+id/radioDivision"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/divisionRadio" />
</RadioGroup>
<View
android:id="@+id/linea"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:background="#aa5f5f5f" />
<EditText
android:id="@+id/editNumeroX"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/linea"
android:layout_marginLeft="40dp"
android:layout_marginTop="40dp"
android:ems="10"
android:gravity="center_horizontal"
android:hint="x"
android:inputType="number" />
<TextView
android:id="@+id/textoOperador"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/editNumeroX"
android:layout_alignTop="@+id/editNumeroX"
android:layout_toEndOf="@+id/editNumeroX"
android:layout_toRightOf="@+id/editNumeroX"
android:gravity="center_vertical"
android:text="+"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="@+id/editNumeroY"
android:layout_width="80dp"
android:layout_height="wrap_content"

android:layout_alignBottom="@+id/textoOperador"
android:layout_marginTop="40dp"
android:layout_toRightOf="@+id/textoOperador"
android:ems="10"
android:gravity="center_horizontal"
android:hint="y"
android:inputType="number" />
<TextView
android:id="@+id/textoIgual"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/editNumeroY"
android:layout_alignTop="@+id/editNumeroY"
android:layout_toEndOf="@+id/editNumeroY"
android:layout_toRightOf="@+id/editNumeroY"
android:gravity="center_vertical"
android:text="="
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="@+id/textoResultado"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/textoIgual"
android:layout_alignTop="@+id/textoIgual"
android:layout_marginLeft="30dp"
android:layout_toEndOf="@+id/textoIgual"
android:layout_toRightOf="@+id/textoIgual"
android:gravity="center_vertical"
android:text="\?"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="@+id/botonOperar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:onClick="onClickOperar"
android:text="@string/botonOperar" />
</RelativeLayout>

Paso 3: Adaptar el layout a la orientacin Landscape

En esta seccin veremos cmo crear un layout especial para cuando los dispositivos roten
hacia la orientacin landscape.
Para ello se debe crear una carpeta con un calificador del tipo layout-land , la cual
contendr el layout adaptado. Si bien, esto puede realizarse manualmente, es ms fcil
realizarlo con la accesibilidad de Android Studio. Solo debes ubicarte en el layout original
que deseas migrar a landscape y presionar el icono de configuracin del layout:

Al presionarlo se despliegan varias opciones, pero la que har el trabajo se denomina Create
Landscape Variation. Si la ejecutas se crear automticamente el directorio para layouts
Landscape y se conservarn los mismo views que tienes actualmente.

Con este procedimiento se nota que el diseo Portrait que se haba creado no es efectivo
en orientacin horizontal. As que dividiremos los contenidos de la aplicacin MegaKalc en
dos secciones verticales. Del lado izquierdo irn los radios y en el lado derecho los campos
de texto y el botn.
Tarea 3.1: Centrar la lnea divisoria
Comienza por intercambiar las medidas de la lnea divisoria, para que quede distribuida
verticalmente. Luego limita el borde derecho del texto informativo para que no sobre pase
la mitad del layout. Debes reacomodar el RadioGroup para que limite horizontalmente con
la lnea divisoria.
En el segmento siguiente debes poner en la parte superior del padre el primer campo de
texto, con ello toda la formula se orientar automticamente. Adicionalmente debes
limitarlo en su borde izquierdo con la lnea divisoria y limitar el borde inferior del edit text
con el borde superior del botn.

Ese es el primer diseo que se me ocurri, no ests obligado a realizar lo mismo. Sera
excelente que practicaras las orientaciones de distintas formas, esto te ayudar a
comprender la ubicacin de los bordes y lmites del RelativeLayout .
El cdigo de este layout sera el siguiente:
res/layout-land/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<TextView
android:id="@+id/textoInformacion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_toLeftOf="@+id/linea"
android:text="@string/textoInformacion"
android:textAppearance="?android:attr/textAppearanceLarge" />

<RadioGroup
android:id="@+id/radiosOperaciones"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/textoInformacion"
android:layout_marginTop="20dp"
android:layout_toLeftOf="@+id/linea"
android:baselineAligned="false">
<RadioButton
android:id="@+id/radioSuma"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:text="@string/sumaRadio" />
<RadioButton
android:id="@+id/radioResta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/restaRadio" />
<RadioButton
android:id="@+id/radioMultiplicacion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/multiplicacionRadio" />
<RadioButton
android:id="@+id/radioDivision"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/divisionRadio" />
</RadioGroup>
<View
android:id="@+id/linea"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:background="#aa5f5f5f" />
<EditText
android:id="@+id/editNumeroX"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="40dp"
android:layout_toRightOf="@+id/linea"
android:ems="10"
android:gravity="center_horizontal"
android:hint="x"
android:inputType="number" />
<TextView
android:id="@+id/textoOperador"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/editNumeroX"
android:layout_alignTop="@+id/editNumeroX"

android:layout_toEndOf="@+id/editNumeroX"
android:layout_toRightOf="@+id/editNumeroX"
android:gravity="center_vertical"
android:text="+"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="@+id/editNumeroY"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/textoOperador"
android:layout_marginTop="40dp"
android:layout_toRightOf="@+id/textoOperador"
android:ems="10"
android:gravity="center_horizontal"
android:hint="y"
android:inputType="number" />
<TextView
android:id="@+id/textoIgual"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/editNumeroY"
android:layout_alignTop="@+id/editNumeroY"
android:layout_toEndOf="@+id/editNumeroY"
android:layout_toRightOf="@+id/editNumeroY"
android:gravity="center_vertical"
android:text="="
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="@+id/textoResultado"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/textoIgual"
android:layout_alignTop="@+id/textoIgual"
android:layout_marginLeft="30dp"
android:layout_toEndOf="@+id/textoIgual"
android:layout_toRightOf="@+id/textoIgual"
android:gravity="center_vertical"
android:text="\?"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="@+id/botonOperar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textoOperador"
android:layout_alignWithParentIfMissing="false"
android:layout_below="@+id/editNumeroX"
android:layout_marginTop="30dp"
android:onClick="onClickOperar"
android:text="@string/botonOperar" />
</RelativeLayout>

Paso 4: Soportar strings en otro idioma

La aplicacin MegaKalc soportar el uso del idioma ingles en todas aquellas cadenas que
lo requieran. Ya se haba estudiado que existen calificadores para determinar el lenguaje de
cobertura en los recursos de la aplicacin, as que los emplearemos en la carpeta values.
Para crear el nuevo recurso que se ajuste al idioma iremos a la previsualizacin del layout
y seleccionaremos el icono del planeta, donde se desplegar la opcin Add Translation
(Aadir traduccin):

Al presionar esta opcin aparecer una ventana emergente con la lista de los idiomas que
puedes elegir para la traduccin. Se elige English:

En seguida se visualizar un asistente de traduccin que permite asignar la traduccin

correspondiente a los strings existentes en el proyecto.

Una vez aadida cada traduccin presionas OK y automticamente se crear la carpeta

values-en para contener este recurso.

Paso 5: Programar comportamientos

El ltimo paso es aadir las acciones de clculo necesarias para que el resultado de la
operacin sea exitosa.
Guardar referencia de RadioGroup
En primer lugar abre MainActivity y obtn a referencia del radio group desde onCreate() .
Adems puedes usar el mtodo check() para marcar un radio de forma inicial.
// Ui
RadioGroup contenedorRadios;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

contenedorRadios = (RadioGroup) findViewById(R.id.radiosOperaciones);

contenedorRadios.check(R.id.radioSuma);

Mtodo onClick() personalizado

Lo segundo es declarar el mtodo onClickOperar como vimos en el diseo del botn. Con
respecto a las acciones en su interior me gustara que vieras este algoritmo:

Sencillo cierto?
Para representarlo crea el mtodo onClickOperar() . Luego declara los campos de texto,
las variables de operacin y obtn las referencias.
public void onClickOperar(View v) {
/*
Variables locales
*/
EditText numeroA, numeroB;
int a, b, resultado = 0;
/*
Obtener los campos de edicin
*/
numeroA = (EditText) findViewById(R.id.editNumeroX);
numeroB = (EditText) findViewById(R.id.editNumeroY);
}

Dentro del mismo mtodo consigue el contenido de cada

EditText

con el

mtodo getText() . Su retorno es de tipo Editable, as que usa el mtodo toString() con
el fin de obtener una cadena:
/*
Convertir el texto a enteros
*/
a = Integer.parseInt(numeroA.getText().toString());
b = Integer.parseInt(numeroB.getText().toString());

Recuerda que la conversin de String a entero es con el mtodo parseInt() de la

clase Integer .
Luego

obtn

el

identificador del radio seleccionado, con el mtodo

getCheckedRadioButtonId() . Debido a que son 4 radios, es ideal usar una sentencia switch

para comparar el id obtenido con cada caso:

// Calcular resultado
switch (contenedorRadios.getCheckedRadioButtonId()) {
case R.id.radioSuma:
resultado = a + b;
break;
case R.id.radioResta:
resultado = a - b;
break;
case R.id.radioMultiplicacion:
resultado = a * b;
break;
case R.id.radioDivision:
resultado = a / b;
break;
}

Finalmente operamos los dos nmeros dentro de cada case segn sea la opcin elegida
por el usuario. El resultado final lo asignamos al TextView llamado textoResultado a
travs de su mtodo setText() .
// Asignar el resultado
((TextView) findViewById(R.id.textoResultado))
.setText(String.valueOf(resultado));

Cambiar operador al seleccionar un radio diferente

El siguiente paso es cambiar el operador dependiendo de la seleccin del radiogroup.
No
inventaremos
nada
raro,
ya
que
existe
una
interfaz
llamada OnCheckedChangeListener para la gestin del cambio de seleccin dentro del
grupo.
Solo es implementar el mtodo onCheckedChanged() de la interfaz para cambiar la cadena
del text view que representa el operador.
En resumen, ve a onCreate() y asigna la escucha annima:
contenedorRadios.setOnCheckedChangeListener(new
RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
TextView operador = (TextView) findViewById(R.id.textoOperador);
switch (contenedorRadios.getCheckedRadioButtonId()) {
case R.id.radioSuma:
operador.setText("+");
break;
case R.id.radioResta:
operador.setText("-");
break;
case R.id.radioMultiplicacion:
operador.setText("*");
break;
case R.id.radioDivision:
operador.setText("/");
break;
}
}
});

Completando el cdigo
Finalizando el ejercicio deberas tener MainActivity.java con el siguiente contenido:
public class MainActivity extends AppCompatActivity {

// Variables globales
RadioGroup contenedorRadios;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
contenedorRadios = (RadioGroup) findViewById(R.id.radiosOperaciones);
contenedorRadios.check(R.id.radioSuma);
contenedorRadios.setOnCheckedChangeListener(new
RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
TextView operador = (TextView) findViewById(R.id.textoOperador);
switch (contenedorRadios.getCheckedRadioButtonId()) {
case R.id.radioSuma:
operador.setText("+");
break;
case R.id.radioResta:
operador.setText("-");
break;
case R.id.radioMultiplicacion:
operador.setText("*");
break;
case R.id.radioDivision:
operador.setText("/");
break;
}
}
});
}
public void onClickOperar(View v) {
// Variables locales
EditText numeroA, numeroB;
int a, b, resultado = 0;
// Obtener los campos de edicin
numeroA = (EditText) findViewById(R.id.editNumeroX);
numeroB = (EditText) findViewById(R.id.editNumeroY);
// Convertir el texto a enteros
a = Integer.parseInt(numeroA.getText().toString());
b = Integer.parseInt(numeroB.getText().toString());
// Calcular resultado
switch (contenedorRadios.getCheckedRadioButtonId()) {
case R.id.radioSuma:
resultado = a + b;
break;
case R.id.radioResta:
resultado = a - b;
break;
case R.id.radioMultiplicacion:
resultado = a * b;
break;
case R.id.radioDivision:
resultado = a / b;

break;
}
// Asignar el resultado
((TextView) findViewById(R.id.textoResultado))
.setText(String.valueOf(resultado));
}

Ejecuta la app y prueba cada una de las operaciones.

Qu tal te fue?
Se te hizo ms fcil de comprender la programacin Android?
Cuando alguien interesado en iniciar al desarrollo Android requiere mi ayuda, me enfoco en
proporcionarle estas tres experiencias:

Eliminar de su mente el mito de que el Desarrollo Android es muy complicado.

Aumentar su comprensin del entorno que usaremos a lo largo de nuestras vidas

como desarrolladores Android.

Invitarle a jugar unos pocos minutos con la vista y manejo de eventos de Android
para que vea lo sencillo que es crear interacciones.

Y est gua debera ayudarte a vivir esos tres momentos.

Aqu est que hacer ahora:

Envame un mensaje personal a mi direccin de correo

contacto@hermosaprogramacion.com para dejarme saber qu piensas de este
ebook.

Prctica, prctica y prctica. Malcolm Gladwell dice que para dominar un campo
con experticia se requieren 10.000 horas, t ya llevas un par, as que ve por el resto.

Lee uno a uno los tutoriales que hay en la pgina de contenidos de desarrollo
Android. All encontrars todo lo que he publicado y seguir publicando.

Date una palmadita en la espalda. Leste un ebook de 60 pginas :)