Escolar Documentos
Profissional Documentos
Cultura Documentos
sofisticado de construccin que poseen estas aplicaciones a la hora de crearlas. Se confunden con
temas como el parseo de datos XML a Java, el uso de herramientas de compilacin automatizadas
como Gradle e incluso ven dificultad ante el idioma en que est escrita la gua de Desarrollo Android.
Precisamente estas razones son las que provocaron que Hermosa Programacin1 comenzara a crear
contenidos abiertos para el pblico que no solo explicarn las nociones del API de Android si no que
ilustraran la compresin profunda y practica de estos conocimientos.
El presente ebook tiene como fin ayudar a todos aquellos que an no han podido comprender como
iniciarse en la programacin de Aplicaciones mviles para Android. Se explicarn los temas
fundamentales para comprender una estructura de un proyecto en Android Studio, el uso de
recursos, la importancia de las actividades, la programacin de eventos y una completa
ejemplificacin digna. Cabe aclarar que es necesario conocimientos bsicos sobre el lenguaje Java
y XML.
Espero que esta lectura sea entretenida para ti y puedas romper las barreras entre el conocimiento y
el trabajo de campo. Que tomes este pequeo ebook como una gua prctica hacia tus aspiraciones
de desarrollo y compartas su utilidad con las personas ms necesitadas.
1 http://www.hermosaprogramacion.com
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.
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.
Esta gua ha sido creada con Android Studio 1.0.2 estable, donde el proyecto tiene los siguientes
contenidos.
2 http://www.hermosaprogramacion.com/2014/08/android-programar-app-como.html
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.
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/AndroidManifiest.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.
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.
animator/
Contenido
anim/
color/
drawable/
layout/
menu/
raw/
values/
xml/
Archivos XML que tienen como propsito ser ledos en tiempo real
para alguna tarea de parsing o estructuracin.
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>
drawable-es-hdpi
Configuracin
en
Idioma y Regin
fr
en-rUS
Definicin
fr-rFR
fr-rCA
ldrtl
Direccin de la escritura
ldltr
sw<N>dp
Ejemplos:
Densidad mnima
sw320dp
sw600dp
sw720dp
w<N>dp
Ejemplos:
w720dp
w1024dp
etc.
h<N>dp
Ejemplos:
h720dp
h1024dp
etc.
small
normal
Tamao de la pantalla
large
xlarge
small: 320x426 dp
normal: 320x470 dp
large: 480x640 dp
xlarge: 720x960 dp
notlong
port
Orientacin de la pantalla
land
se
despliega
ldpi
mdpi
hdpi
xhdpi
xxhdpi
xxxhdpi
nodpi
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 del
v4
API
v7
etc.
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:
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.
Existen dos formas para acceder a un recurso: En el cdigo a travs de la clase R o en definiciones
XML.
package com.TUPAQUETE.test;
public final class R {
public static final class attr {
}
public static final class dimen {
public static final int activity_horizontal_margin=0x7f040000;
publicstaticfinalint activity_vertical_margin=0x7f040001;
}
public static final class drawable {
publicstaticfinalint ic_launcher=0x7f020000;
}
public static final class id {
public static final int action_settings=0x7f080000;
}
public static final class layout {
publicstaticfinalint activity_my=0x7f030000;
}
public static final class menu {
publicstaticfinalint my=0x7f070000;
}
public static final class string {
public static final int action_settings=0x7f050000;
public static final int app_name=0x7f050001;
public static final int hello_world=0x7f050002;
}
public static final class style {
/** Customize your theme here.
*/
public static final int AppTheme=0x7f060000;
}
}
Para llamar un recurso mediante a la clase R , simplemente debes seguir la siguiente sintaxis:
[<paquete>].R.<tipo_de_recurso>.<nombre_del_recurso>
<paquete>
Es 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 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.
@[<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/holo_blue_light"
Donde holo_blue_light es un recurso de tipo color predeterminado para el tema Holo Light de
Android.
3 http://www.hermosaprogramacion.com/20h14/10/android-temas-estilos.html
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.
Las actividades actan como entidades vivas ante las acciones del usuario o del sistema. Ellas se
autogestionan de tal modo que el programador solo automatice su comportamiento y se libre de la
responsabilidad de 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:
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 Activity . Normalmente su
contenido es la sobrescritura del mtodo onCreate() y otros mtodos relacionados con un
componente llamado Action Bar.
Veamos un ejemplo:
public class MyActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
}
@Override
public boolean onCreateOptionsMenu(Menu menu){
// Inflate the menu;this adds items to the actionbar if it is present.
getMenuInflater().inflate(R.menu.my, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item){
// Handle action bar item clicks here. The actionbar will
// automatically handle clicks on the Home/Upbutton, so long
// as you specify a parent activity inAndroidManifest.xml.
int id = item.getItemId();
if(id == R.id.action_settings){
return true;
}
return super.onOptionsItemSelected(item);
}
}
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_my 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.
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 AndroidManifiest.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.
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>
<action> configuran
esta
aadir
cada
actividad
nueva
declarada
en
tu
cdigo
como
Los layouts programticamente son subclases de la superclase ViewGroup , de la cual heredan sus
atributos y comportamiento de contenedores. Aunque se pueden crear layouts personalizados, la
API ya trae consigo implementaciones prefabricadas para no complicarse la vida.
Estas instancias fueron creadas con el fin de generar layouts de uso frecuente y flexible para los
desarrolladores. Si ya has ledo con anterioridad sobre el tema, recordars nombres como
LinearLayout, RelativeLayout, GridView y WebView.
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.
El RelativeLayout es uno de los layouts ms populares y usados para crear diseos flexibles y
suavizados. Con este tipo de organizacin se puede representar un gran nmero de distribuciones
de views a travs de referencias sencillas. 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"
Qu significa eso?, quiere decir que 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 cual permite
una 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.LayoutParams4.
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 :
4 http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
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.
android:layout_toLeftOf="@+id/Texto"
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.
/*
Se usa el operador this para referirnos a que
la instancia es la misma clase contenedora
*/
boton.setOnClickListener(this);
@Override
public void onClick(View view) {
// Acciones que ocurrirn
}
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.
Otra forma de usar esta interfaz es creando una clase annima en lnea:
boton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
...
}
});
Otra forma de aadir la relacin a la escucha es a travs de la propiedad de los view llamada
android:onclick . En el puedes asignar cualquier mtodo que tenga la forma de onClick() , pero
obviamente 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.
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:
android:onClick="sumar"
Cul es la diferencia entre usar estos tres caminos? , normalmente crear 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) {
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.
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.
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 .
Con ello ya tenemos claro de qu forma acomodar los views que necesarios dentro del archivo
activity_main.xml .
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
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
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.
cuanto a la segunda parte, se refiere a que el lmite superior del radiogroup se ubicar en el lmite
inferior (below) del textview (o la asignacin del atributo android:below_view ).
Lo
que
quiere
decir
que
sus
atributos
android:layout_width
Una
cuatro
radios
cambiales
su id a
radioSuma ,
radioResta ,
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#aa5f5f5f"
android:layout_centerInParent="true"
android:id="@+id/customLinea" />
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.
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" ):
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.
android:id="@+id/radiosOperaciones"
android:layout_marginTop="20dp"
android:layout_above="@+id/customLinea">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sumaRadio"
android:id="@+id/radioSuma"
android:checked="false" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/restaRadio"
android:id="@+id/radioResta" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/multiplicacionRadio"
android:id="@+id/radioMultiplicacion" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/divisionRadio"
android:id="@+id/radioDivision" />
</RadioGroup>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#aa5f5f5f"
android:layout_centerInParent="true"
android:id="@+id/customLinea" />
<EditText
android:layout_width="80dp"
android:layout_height="wrap_content"
android:inputType="number"
android:ems="10"
android:id="@+id/editNumeroX"
android:layout_below="@+id/customLinea"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="40dp"
android:hint="x"
android:gravity="center_horizontal"
android:layout_marginLeft="40dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="+"
android:id="@+id/textoOperador"
android:layout_alignTop="@+id/editNumeroX"
android:layout_toRightOf="@+id/editNumeroX"
android:layout_toEndOf="@+id/editNumeroX"
android:layout_alignBottom="@+id/editNumeroX"
android:gravity="center_vertical" />
<EditText
android:layout_width="80dp"
android:layout_height="wrap_content"
android:inputType="number"
android:ems="10"
android:id="@+id/editNumeroY"
android:layout_marginTop="40dp"
android:hint="y"
android:gravity="center_horizontal"
android:layout_toRightOf="@+id/textoOperador"
android:layout_alignBottom="@+id/textoOperador" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="="
android:id="@+id/textoIgual"
android:layout_alignTop="@+id/editNumeroY"
android:layout_toRightOf="@+id/editNumeroY"
android:layout_toEndOf="@+id/editNumeroY"
android:layout_alignBottom="@+id/editNumeroY"
android:gravity="center_vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="\?"
android:id="@+id/textoResultado"
android:layout_alignTop="@+id/textoIgual"
android:layout_toRightOf="@+id/textoIgual"
android:layout_toEndOf="@+id/textoIgual"
android:layout_alignBottom="@+id/textoIgual"
android:gravity="center_vertical"
android:layout_marginLeft="30dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/botonOperar"
android:id="@+id/botonOperar"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:onClick="onClickOperar" />
</RelativeLayout>
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.
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:
<?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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="@string/textoInformacion"
android:id="@+id/textoInformacion"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_toLeftOf="@+id/customLinea" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textoInformacion"
android:id="@+id/radiosOperaciones"
android:layout_marginTop="20dp"
android:layout_toLeftOf="@+id/customLinea"
android:baselineAligned="false"
android:layout_alignParentStart="true">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sumaRadio"
android:id="@+id/radioSuma"
android:checked="false" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/restaRadio"
android:id="@+id/radioResta" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/multiplicacionRadio"
android:id="@+id/radioMultiplicacion" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/divisionRadio"
android:id="@+id/radioDivision" />
</RadioGroup>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#aa5f5f5f"
android:layout_centerInParent="true"
android:id="@+id/customLinea"
android:layout_margin="10dp" />
<EditText
android:layout_width="80dp"
android:layout_height="wrap_content"
android:inputType="number"
android:ems="10"
android:id="@+id/editNumeroX"
android:layout_marginTop="40dp"
android:hint="x"
android:gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/customLinea" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="+"
android:id="@+id/textoOperador"
android:layout_alignTop="@+id/editNumeroX"
android:layout_toRightOf="@+id/editNumeroX"
android:layout_toEndOf="@+id/editNumeroX"
android:layout_alignBottom="@+id/editNumeroX"
android:gravity="center_vertical" />
<EditText
android:layout_width="80dp"
android:layout_height="wrap_content"
android:inputType="number"
android:ems="10"
android:id="@+id/editNumeroY"
android:layout_marginTop="40dp"
android:hint="y"
android:gravity="center_horizontal"
android:layout_toRightOf="@+id/textoOperador"
android:layout_alignBottom="@+id/textoOperador" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="="
android:id="@+id/textoIgual"
android:layout_alignTop="@+id/editNumeroY"
android:layout_toRightOf="@+id/editNumeroY"
android:layout_toEndOf="@+id/editNumeroY"
android:layout_alignBottom="@+id/editNumeroY"
android:gravity="center_vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="\?"
android:id="@+id/textoResultado"
android:layout_alignTop="@+id/textoIgual"
android:layout_toRightOf="@+id/textoIgual"
android:layout_toEndOf="@+id/textoIgual"
android:layout_alignBottom="@+id/textoIgual"
android:gravity="center_vertical"
android:layout_marginLeft="30dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/botonOperar"
android:id="@+id/botonOperar"
android:layout_below="@+id/editNumeroX"
android:layout_alignWithParentIfMissing="false"
android:layout_alignLeft="@+id/textoOperador"
android:layout_marginTop="30dp"
android:onClick="onClickOperar" />
</RelativeLayout>
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:
Una vez aadida cada traduccin presionas OK y automticamente se crear la carpeta values-en
para contener este recurso.
El ltimo paso es aadir las acciones de clculo necesarias para que el resultado de la operacin sea
exitosa.
Lo primero que se debe realizar es declarar un nuevo mtodo onClick() personalizado para
asignrselo al botn a travs de la pestaa de diseo en Android Studio.
El algoritmo a implementar es sencillo:
/*
Obtener los campos de edicin
*/
numeroA = (EditText) findViewById(R.id.editNumeroX);
numeroB = (EditText) findViewById(R.id.editNumeroY);
Ahora debe obtenerse el contenido de cada EditText con el mtodo getText() . No obstante este
mtodo no devuelve propiamente la cadena si no un objeto especializado, pero el mtodo
toString() de este objeto si devuelve el valor que necesitamos:
/*
Convertir el texto a enteros
*/
a = Integer.parseInt(numeroA.getText().toString());
b = Integer.parseInt(numeroB.getText().toString());
Es obvio que las operaciones no las podemos hacer con dos strings, en consecuencia debemos
parsear cada una con el mtodo de clase parseInt() de la clase Integer .
Luego
se
obtiene
el
identificador
del
radio
seleccionado
actualmente
con
el
mtodo getCheckedRadioButtonId() . Debido a que son 4 radios, es ideal usar una sentencia
switch para comparar el id obtenido con cada caso:
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));
package TUPAQUETE;
import
import
import
import
import
import
android.support.v7.app.ActionBarActivity;
android.os.Bundle;
android.view.View;
android.widget.EditText;
android.widget.RadioGroup;
android.widget.TextView;
@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());
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));
}
}
Activity
su
creada en el API de Android para que las versiones anteriores a la 5.0 conserven la Action Bar
y soporten algunas caractersticas del nuevo tema Material.
Finalmente ejecuta la aplicacin y visualiza los resultados en tu emulador:
Se ha explicado las nociones bsicas del desarrollo Android para aquellos que les interesa liberar
sus creaciones ante la comunidad. Se estudi el uso de las actividades como principal bloque de
construccin de una aplicacin Android y como los recursos calificados posibilitan mltiples
variaciones de una misma aplicacin ante varios dispositivos mviles.
Aunque vimos pocas caractersticas de Android Studio, es obvio que apalancarse con este poderoso
IDE de JetBrains es una de las mejores elecciones para potenciar el desarrollo de tus aplicaciones.
En lo personal recomendara a todos los principiantes que aprendan al menos un 60% de las
funciones de este entorno, ya que les ahorrara gran cantidad de tiempo y esfuerzo.
Hermosa Programacin es un espacio dedicado a todos los desarrolladores de software que buscan
artculos, guas, tutoriales y recursos sobre programacin de forma autodidacta. Se caracteriza por
el uso de una metodologa detallada y dinmica, que aporte soluciones a los problemas cotidianos
de los desarrolladores ms exigentes.
Cada uno de los contenidos liberados es escrupulosamente planeado, diseado, redactado e
implementado para que los usuarios obtengan el mayor beneficio. Donde encontrarn contenidos
sobre Desarrollo Mvil en la Plataforma Android.