You are on page 1of 29

Desarrollo de Aplicaciones Multipantalla Alex Sosa

Desarrollo mvil: Android Nativo


(Android Studio)
Desarrollo de Aplicaciones Multipantalla Alex Sosa
Android Studio Es el IDE (interfaz de desarrollo) oficial de Google
lanzado en el ltimo Google I/O en donde podemos crear proyectos, las
carpetas del mismo, archivos, y todo lo necesario para crear una
aplicacin.

Entre otras cosas, cuenta con algunas herramientas que nos facilitarn
mucho el desarrollo de las aplicaciones, como por ejemplo la
previsualizacin en diferentes smartphones y tablets. Adems, nos
ayudar a dejar nuestra aplicacin lista para publicar.

Aunque las aplicaciones de Android se escriben en lenguaje Java, lo
cierto es que despus hay que compilarlas para que quede un nico
archivo .apk. Este ltimo paso es muy simple con Android Studio.

Este nuevo IDE ahora es mucho ms familiar y fcil de usar de lo que
era el SDK con el que contaba Google antes.

Desarrollo de Aplicaciones Multipantalla Alex Sosa
Pasos para iniciar:


1. Descarga:

http://developer.android.com/sdk/installing/studio.html

En algunos equipos con Windows 7 y Windows 8, pueden surgir problemas
durante la instalacin (el programa de instalacin no encuentra Java) o al iniciar el
programa. Para solucionarlo, hay que ir a men Inicio, Equipo, Propiedades del
Sistema en la parte de arriba, Configuracin Avanzada del Sistema a la izquierda
y en la pestaa de Opciones Avanzadas, el botn de abajo, Variables de Entorno.

En la ventana que se abre, en el cuadro de abajo, Variables del Sistema. Hacer
click sobre una nueva y aadir:

JDK_HOME en la casilla de Nombre de la variable
El directorio donde se encuentra Java instalado. Si se ha instalado una versin de
64 bits estar en: C:\Program Files\Java\jdk_version_de_java y para versin de
32 bits o x86 estar en C:\Program Files (x86)\Java\jdk_version_de_java.

Desarrollo de Aplicaciones Multipantalla Alex Sosa
Inicio de la aplicacin

Al iniciar el programa, nos dir si queremos importar datos de otro IDE
como Eclipse. Si es as se debe seleccionar la carpeta donde tenemos
nuestros proyectos e importarla.

Una vez hecho esto, se abrir una ventana en la que tenemos
determinadas opciones. Entre ellas, abrir o crear un nuevo proyecto.


Desarrollo de Aplicaciones Multipantalla Alex Sosa
Nuevo Proyecto


Se debe aadir un nombre a la
aplicacin en la primera casilla.

Despus, el nombre del mdulo,
que suele llevar el mismo
nombre (aunque se puede
cambiar)

Luego el nombre de paquete de
la aplicacin, importante para el
ID a la hora de subirla a la Play
Store. Normalmente se usa:

com.[empresa].[NombreApp]
Desarrollo de Aplicaciones Multipantalla Alex Sosa
Tambin, podemos elegir la versin mnima del SDK que queremos usar
para la aplicacin. Si queremos que una aplicacin llegue al mximo de
usuarios posible, debemos elegir la ms antigua, pero hay que tener en
cuenta que deberemos resolver todos los problemas de compatibilidad
que tengan todas las versiones en las que nuestra aplicacin est
disponible.

Debemos saber que versiones anteriores a Froyo presentan errores e
incompatibilidades. Por ello, lo ideal sera seleccionar como SDK
mnimo, Froyo 2.2 o incluso Gingerbread 2.3.X.
Desarrollo de Aplicaciones Multipantalla Alex Sosa
Luego, debemos elegir la versin a la cual est dirigida nuestra
aplicacin, lo ideal en este caso es elegir aquella versin en la cual hay
ms dispositivos, pero sin renunciar a las mejoras que se dan en las
ms actuales. Por ello, sera buena idea elegir Jelly Bean 4.1.2.
Despus, podemos elegir la versin del SDK con la cual se compilar la
aplicacin. Debemos elegir la ms reciente.Por ahora, Jelly Bean 4.2
Desarrollo de Aplicaciones Multipantalla Alex Sosa
Ahora podemos elegir cual de los temas vamos a usar. Holo es el ms
comn. Oscuro, claro, o claro con el nuevo men lateral oscuro.

De las tres opciones para marca abajo, la primera indica que vamos a
usar un icono personalizado para la aplicacin.

La segunda, crear una Actividad para la aplicacin por defecto.

Y la tercera indica que queremos crear una librera para usarla en otra
aplicacin

Desarrollo de Aplicaciones Multipantalla Alex Sosa
Si hemos marcado la opcin de Icono personalizado, aparecer una
ventana con todas las opciones para crear el icono.



S
En Image, podemos subir una imagen
para usarla como icono. En Clipart,
podemos el egi r ent r e di f er ent es
smbolos e iconos. Y en Text, podemos
hacer un icono textual.

Cada vez l as pant al l as de l os
Smartphones son ms grandes y poseen
una mayor resolucin, por esta razn es
conveniente usar un icono que se vea
bien en resoluciones HD o Full-HD. Si
vemos correctamente el icono sin que
parezca pixelado en XXHDPI, podemos
est ar segur os de que se ver
correctamente en cualquier dispositivo,
incluido tablets.

Desarrollo de Aplicaciones Multipantalla Alex Sosa
En la siguiente ventana podemos elegir el tipo de ventana principal que tendr
nuestra aplicacin. De nuestra eleccin depender, en cierta medida, el resto de
la aplicacin.


- Blank, una barra superior donde se
incluir el men, el ttulo y volver.
Debajo, todo la ventana pertenecer al
contenido de la aplicacin.
- Fullscreen, la barra de estado y los
botones (si los hubiera) sern tapados por
la totalidad de la ventana de nuestra
aplicacin, donde ir el contenido.
- Login, para apps que se inician con un
registro que hace falta rellenar para entrar.
- Master/Detail. Ventana dividida en un
men a la izquierda, y en contenido a la
derecha.
- Settings, parece aquella que est
diseada como una lista de ajustes.

Desarrollo de Aplicaciones Multipantalla Alex Sosa
Una vez elegida un tipo de ventana, podremos elegir el nombre para la Actividad y para la
Capa principal de la ventana. Tambin podremos elegir que estilo de pestaas queremos
para nuestra aplicacin. Sin pestaas, Fijas, movibles o en cascada.


Desarrollo de Aplicaciones Multipantalla Alex Sosa
Carpeta src (de fuentes)
Esta carpeta contiene el cdigo fuente
organizado en paquetes. Aqu irn las clases
java de nuestra aplicacin.

Clase de recursos (res)
Esta carpeta contiene todos los recursos
necesarios para la aplicacin. Todos los
archivos de esta carpeta son indexados por el
compilador y se genera el fichero de recursos
R, que nos permite acceder a ellos de una
forma rpida.
Estructura de Archivos
Desarrollo de Aplicaciones Multipantalla Alex Sosa
La Carpeta de Recursos est dividida en subcarpetas:

- anim: Archivos XML para la definicin de Animaciones.
- color: Archivos XML de definicin de colores.
- drawable: Archivos bitmap(.png, .9.png, .jpg, .gif) o XML
con contenidos que se dibujarn (fondos, botones etc).
- layout: Archivos XML que definen la capa de interfaz de
usuario.
- menu: Archivos XML con la definicin de los mens de la
aplicacin.
- raw: Binarios que no se pueden colocar en las otras
carpetas.
- values: Archivos XML para la definicin de estilos,
cadenas de texto para localizacin etc.
- xml: Archivos XML que pueden ser accedidos en tiempo
de ejecucin.

Algunas carpetas pueden tener varias versiones para
adaptarse a diferentes tamaos de pantallas, idiomas etc.
Estructura de Archivos
Desarrollo de Aplicaciones Multipantalla Alex Sosa
La base para cualquier aplicacin Android es el archivo AndroidManifest.xml
que se encuentra en la raz de directorios de cualquier proyecto. Dentro de este
archivo se declara todo lo que se encuentre dentro de la aplicacin las
actividades, los servicios, etc. y cmo todas estas piezas interactan entre s y
con el sistema. Podemos por ejemplo indicar qu actividad (o actividades) deben
aparecer en el men principal del dispositivo, tambin conocido como el launcher.
AndroidManifest.xml
Desarrollo de Aplicaciones Multipantalla Alex Sosa
Al crear el proyecto dimos nombre a una Actividad (MainActivity), estas clases son las
encargadas de mostrar la interfaz grfica al usuario, deben extender de la clase Activity.

Al crear una activity Android llama al mtodo onCreate() que hace lo necesario para mostrar
la pantalla al usuario. Hace una llamada a setContentView(), que tiene como parmetro el
identificador de una vista ya creada.

Por lo tanto, R.layout.activity_main referencia a un archivo xml situado en la carpeta ./res/
layout (archivos de definicin de pantalla).

MainActivity.java
Desarrollo de Aplicaciones Multipantalla Alex Sosa
En este archivo se define una pantalla en la que los elementos se agruparn de forma lineal
(LinearLayout) y con un componente de texto (TextView). Al componente de texto le fijamos
el texto a mostrar con la referencia @string/hello_world (valor del item en ./res/values/
strings.xml) directamente el texto que queremos agregar.

activity_main.xml
Desarrollo de Aplicaciones Multipantalla Alex Sosa
En este archivo se definen (o se deberan definir) todos los textos que va a usar la
aplicacin. Es muy til sobre todo cuando queremos agregar un lenguaje a la aplicacin

strings.xml
Desarrollo de Aplicaciones Multipantalla Alex Sosa
Resultado hasta el momento
Desarrollo de Aplicaciones Multipantalla Alex Sosa
Taller 1


Realizar una aplicacin que conste de dos pantallas, por un lado la pantalla principal que
solicitar un nombre al usuario y una segunda pantalla en la que se mostrar un mensaje
personalizado para el usuario. As:
Desarrollo de Aplicaciones Multipantalla Alex Sosa
activity_main.xml
Desarrollo de Aplicaciones Multipantalla Alex Sosa
Dentro del layout hemos incluido 3 controles: una etiqueta (TextView), un cuadro de texto
(EditText), y un botn (Button). En todos ellos hemos establecido las siguientes
propiedades:

android:id. ID del control, con el que podremos identificarlo ms tarde en nuestro cdigo.
Vemos que el identificador lo escribimos precedido de @+id/. Esto tendr como efecto que
al compilarse el proyecto se genere automticamente una nueva constante en la clase R
para dicho control. As, por ejemplo, como al cuadro de texto le hemos asignado el ID
TxtNombre, podremos ms tarde acceder al l desde nuestro cdigo haciendo referencia a
la constante R.id.TxtNombre.

android:layout_height y android:layout_width. Dimensiones del control con respecto al
layout que lo contiene. Esta propiedad tomar normalmente los valores wrap_content para
indicar que las dimensiones del control se ajustarn al contenido del mismo, o bien
match_parent para indicar que el ancho o el alto del control se ajustar al ancho o alto del
layout contenedor respectivamente.

Adems de estas propiedades comunes a casi todos los controles que utilizaremos, en el
cuadro de texto hemos establecido tambin la propiedad android:inputType, que indica
qu tipo de contenido va a albergar el control, en este caso texto normal (valor text),
aunque podra haber sido una contrasea (textPassword), un telfono (phone), una fecha
(date), etc


Desarrollo de Aplicaciones Multipantalla Alex Sosa
activity_saludo.xml
Desarrollo de Aplicaciones Multipantalla Alex Sosa
FrmSaludo.java
Desarrollo de Aplicaciones Multipantalla Alex Sosa
Modificacin de MainActivity.java
Desarrollo de Aplicaciones Multipantalla Alex Sosa
La comunicacin entre los distintos componentes y aplicaciones en Android se realiza
mediante intents, por lo que el primer paso ser crear un objeto de este tipo. Existen varias
variantes del constructor de la clase Intent, cada una de ellas dirigida a unas determinadas
acciones.

En nuestro caso particular vamos a utilizar el intent para llamar a una actividad desde otra
actividad de la misma aplicacin, para lo que pasaremos a su constructor una referencia a
la propia actividad llamadora (MainActivity.this), y la clase de la actividad llamada
(FrmSaludo.class).

Si quisiramos tan slo mostrar una nueva actividad ya tan slo nos quedara llamar a
startActivity() pasndole como parmetro el intent creado. Pero en este caso queremos
tambin pasarle cierta informacin a la actividad llamada, concretamente el nombre que
introduzca el usuario en el cuadro de texto de la pantalla principal. Para hacer esto vamos a
crear un objeto Bundle, que puede contener una lista de pares clave-valor con toda la
informacin a pasar entre las actividades. En nuestro caso slo aadiremos un dato de tipo
String mediante el mtodo putString(clave, valor). Tras esto aadiremos la informacin al
intent mediante el mtodo putExtras(bundle).



Desarrollo de Aplicaciones Multipantalla Alex Sosa
Modificacin de FrmSaludo.java
Desarrollo de Aplicaciones Multipantalla Alex Sosa
Modificacin de AndroidManifest.xml

Desarrollo de Aplicaciones Multipantalla Alex Sosa
Como ya sabemos, toda aplicacin Android utiliza un archivo especial en formato XML
(AndroidManifest.xml), donde se definen (entre otras cosas), los diferentes elementos que
la componen. Por tanto, todas las actividades de nuestra aplicacin deben quedar
registradas en este archivo. La actividad principal ya debe aparecer puesto que se cre de
forma automtica al crear el nuevo proyecto Android, por lo que debemos aadir tan slo la
segunda.

Incluimos la actividad en el XML mediante una nueva etiqueta <Activity>, donde debemos
indicar el nombre de la clase java asociada como valor del atributo android:name, y
asignarle su ttulo mediante el atributo android:label. Todo esto lo debemos incluir justo
debajo de la definicin de la actividad principal dentro del archivo AndroidManifest.xml




Modificacin de AndroidManifest.xml

Desarrollo de Aplicaciones Multipantalla Alex Sosa
Taller 1 - Evaluacin

Realizar una aplicacin que conste de dos pantallas, por un lado la pantalla principal que
solicitar un nombre al usuario, telfono y email y una segunda pantalla en la que se
mostrar un mensaje personalizado para el usuario. As:
Nota:
- Realizar la validacin de Telfono y email antes de pasar a la pantalla 2.
- Al hacer tap sobre el botn logout, volver a la pantalla 1

You might also like