Principios de Android Activities Views & Layouts

PRINCIPIOS DE ANDROID ACTIVITIES, VIEWS & LAYOUTS

Ing. LEANDRO FLREZ ARISTIZBAL [email protected]

[email protected] @lxexpxe

MVC

Fuente: h>p://androideity.com/2012/05/10/la-importancia-del-mvc-en-android/

BLOQUES PARA CONSTRUCCIN DE APLICACIONES

Ac=vity Componente IU que corresponde Kpicamente a una pantalla.

IntentReceiver Responde a no=caciones (Trigger) o cambios de estado. Puede despertar un proceso.

Service Tarea sin IU que se ejecuta en Background ContentProvider Permite que las aplicaciones compartan

datos

ANDROID APP

Ac0vity

Ac0vity Intent

Service

Intent

ContentProvider

Intent

DB

ACTIVIDAD (ACTIVITY)

Una ac0vidad es un componente de la aplicacin que provee una pantalla que se muestra en el disposi0vo para que el usuario pueda interactuar para hacer algo como marcar un telfono, tomar una foto, enviar un e-mail o ver un mapa. h>p://developer.android.com/guide/components/ac0vi0es.html


Cuando se abre una nueva ac0vidad, la anterior queda pausada y puesta en una pila donde la l0ma en entrar ser la primera en salir.

CICLO DE VIDA DE UNA ACTIVIDAD An no existe

$

Fuente: h>p://marakana.com/bookshelf/main_building_blocks_tutorial/ac0vity_lifecycle.html

Ges0onadas x Ac0vityManager

Ac0vityManager la dirige A travs de sus estados

Como desarrolladores Decidimos qu pasa en Las transiciones

INTERFAZ DE USUARIO (UI)

La interfaz de usuario se dene en una archivo XML localizado en la carpeta res/layout. Esta es considerada la Vista.

ACTIVITY

En 0empo de ejecucin, la IU se carga en un archivo Java localizado en la carpeta src. Este es considerado el Controlador

Las Ac0vidades estn formadas por dos archivos, uno representa la Vista y el otro el Controlador

AndroidManifest.xml

Este archivo es una descripcin de la aplicacin para que sea conocida en el mundo exterior (El sistema opera0vo des0no). En este archivo se registran las Ac0vidades, los Intents para las Ac0vidades, capas de comunicacin y permisos.

Android Essen0als (Chris Haseman)

ACTIVITY AndroidManifest.xml

INTERFAZ DE USUARIO (UI)

Usualmente es ms fcil construir la IU modicando el archivo .xml, pero en ocasiones se necesitar hacerlo en 0empo de ejecucin por medio de cdigo modicando el archivo .java

INSTALAR HERRAMIENTAS El IDE ocial es Android Studio el cual puede ser descargado de

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

ANDROID STUDIO

SDK ANDROID

SDK ANDROID La recomendacin de paquetes que deben ser descargados es: Requeridos:

Android SDK Tools (Mantenerlo actualizado) Android SDK Plaiorm-tools SDK Plaiorm (Se debe descargar al menos una plataforma para poder compilar la aplicacin)

Se recomienda descargar la l0ma versin de Android (Android 5.0 API21 hasta este momento Nov/14) y la versin ms baja en la cual se planea desarrollar (Android 2.2 API8 / Android 2.3.3 API10 / Android 4.0 API15 )

Recomendados: System Image (Descargar imgenes de sistema de las mismas versiones de plataformas de

Android para probar las aplicaciones) Android Support Library (Mantener actualizado) Google USB Driver SDK Samples (Cdigo fuente de ejemplos. Descargar solo los de las APIs descargadas para ser

soportadas) Google APIs Google Play Services

Fuente: hZp://developer.android.com/sdk/installing/adding-packages.html

SDK ANDROID

FIRST APP

Android Virtual Device

RUN APP

Al ejecutar la app, el IDE busca disposi0vos compa0bles (Emuladores o reales) con las versiones de Android especicadas al crear el proyecto. Esta informacin se puede ver en el archivo AndroidManifest.xml

LAYOUT Dene cmo se mostrarn los elementos de la interfaz

grca. El uso adecuado de un Layout permi0r que la aplicacin se visualice mejor teniendo en cuenta que se est trabajando sobre pantallas de tamao reducido. Estos son un 0po de ViewGroup que permite contener otros objetos View o ViewGroup.

LinearLayout AbsoluteLayout TableLayout Rela0veLayout FrameLayout ScrollView

LinearLayout

Este 0po de Layout ubica los componentes de forma lineal (uno tras otro en las o columnas). Su orientacin puede ser horizontal o ver0cal.

VIEW

Son objetos herederos de la clase android.view.View contenidos en una Ac0vidad y que 0enen una apariencia en pantalla. Ejemplos de estos son:

TextView EditText Bu>on ImageBu>on CheckBox ToggleBu>on RadioBu>on RadioGroup

TextView

Los TextView son e0quetas en las cuales se muestra un texto jo, modicable solo por sopware.

Hello Android

Hello Android

Se observa que el elemento root es y en l hay 2 TextViews. El elemento LinearLayout controla el orden en el cual aparecen los Views contenidos en l.

LAYOUT & VIEW Cada View y ViewGroup poseen un conjunto de atributos comunes. Algunos aplican solo para un 0po especco de Layout

AZribute Descrip=on layout_width Species the width of the View or ViewGroup

layout_height Species the height of the View or ViewGroup

layout_marginTop Species extra space on the top side of the View or ViewGroup

layout_marginBoZom Species extra space on the boZom side of the View or ViewGroup

layout_marginLea Species extra space on the lea side of the View or ViewGroup

layout_marginRight Species extra space on the right side of the View or ViewGroup

layout_gravity Species how child Views are posi=oned

layout_weight Species how much of the extra space in the layout to be allocated to the View

layout_x Species the x-coordinate of the View or ViewGroup

layout_y Species the y-coordinate of the View or ViewGroup

styles.xml

Vamos a modicar el archivo styles.xml que se encuentra en la carpeta de recursos (res) llamada values.

styles.xml

Nos aseguramos de que el tema de las ac0vidades sea el siguiente:

Estos temas 0enen diferentes variaciones que el diseador/desarrollador podr modicar.

styles.xml (v-21) Ahora creamos un segundo archivo con el mismo nombre pero en una carpeta de recursos exclusiva para disposi0vos con Android 5.0.1 (Lollipop) API level 21. El nombre de esta carpeta lleva el sujo v21

values-v21

En Android, los recursos se iden0can por sujos en las carpetas que los con0enen para iden0car bajo qu condiciones se aplica uno u otro.

styles.xml (v-21)

styles.xml (v-21)

Agregamos el siguiente cdigo:

styles.xml (v-21)

Material Design

Con la llegada de la versin 5.0 de Android (Lo l l ipop) , Google present un nuevo lenguaje de diseo llamado Material Design.

Material Design

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innova0on and possibility of technology and science. This is material design.

Fuente: h>p://www.google.com/design/spec/material-design/introduc0on.html

Material Design

Fuente: h>p://googledevelopers.blogspot.com/2014/06/this-is-material-design.html

Material Design

Fuente: h>p://www.techfaster.com/googleio-android/

Material Design

Fuente: h>p://developer.android.com/training/material/theme.html

Material Design

Fuente: h>p://www.google.com/design/spec/style/color.html

Material Design

Fuente: h>p://www.google.com/design/spec/style/color.html

Limita la seleccin de colores escogiendo tres ma0ces de la paleta primaria y un color de acentuado de la paleta secundaria.

EditText

Los EditText son campos de texto interac0vos en los cuales se puede modicar por teclado el texto que en ellos aparece.

EditText

LAYOUT & VIEW Atributos

Layout_width: Especica el ancho del View o ViewGroup Layout_height: Especica el alto del View o ViewGroup

En el ejemplo anterior estos atributos se establecieron como wrap_content para ambos objetos View. Este parmetro especica que su tamao no va a ocupar ms del necesario para mostrar el contenido (texto) tanto a lo ancho (width) como alto (height). Una variante para este parmetro es ll_parent o match_parent el cual ocupa el ancho (width) y/o alto (height) de su padre que es el LinearLayout en este caso.

EditText

EditText En el ejemplo anterior usamos la propiedad android:text para establecer el texto que aparece en el componente. Este texto desafortunadamente debe ser borrado por el usuario para poder escribir algo dis0nto. Una alterna0va es cambiar esta propiedad por android:hint la cual establece un texto que se muestra al usuario (ms claro, como una marca de agua) dndole un indicio de la informacin que debe ingresar, una vez el usuario desee ingresar el texto que desea, el establecido inicialmente desaparece autom0camente.

EditText

Al pulsar una tecla (X)

Texto ms claro Texto ms oscuro

Bu>on

Los Bu>on son botones o comandos interac0vos con los cuales el usuario puede manipular e l comportamiento de la aplicacin, ya sea para ejecutar alguna accin como por ejemplo un cambio de Ac0vidad (pantalla).

Bu>on

Los Bu>on poseen atributos al igual que los objetos TextView y EditText. En este caso vamos a establecer un tamao jo en pixeles para este elemento de 120px de ancho, en cuanto al alto, este ser el necesario para mostrar su contenido.

on android:layout_width=120px" android:layout_height="wrap_content" android:text="Botn" />

Bu>on

on android:layout_width=120px" android:layout_height="wrap_content" android:text="Botn" />

Bu>on

120 px

240 px

px=Pixel

LAYOUT & VIEW Atributos

Layout_gravity: Especica como los View hijos van ser posicionados Este atributo permite posicionar el objeto View en diferentes lugares de la pantalla, modiquemos el ejemplo anterior agregando este parmetro al objeto Bu>on para que lo ubique en el centro de la pantalla horizontalmente, para esto el parmetro ser "center_horizontal. Este atributo solo funcionar si la orientacin del LinearLayout ha sido establecido como ver0cal.

DO IT YOURSELF! Hasta el momento, se han visto dos 0pos de LAYOUT

(Linear & Absolute) y tres 0pos de VIEWS (TextView, EditText & Bu>on). Desarrollar una pantalla de inicio de sesin en la que se solicite Username & Password, la contrasea debe ser de 0po numrico y deben visualizarse puntos (*) en lugar de los nmeros. Deben haber dos botones, uno para salir de la aplicacin (Exit) y uno para iniciar sesin (Login).

Inves8gar los atributos inputType y password para el EditText

Inves8gar el atributo layout_weight para los dos botones

on android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Exit" android:layout_weight="0.5" /> on android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Login" android:layout_weight="0.5" />

TableLayout

El TableLayout agrupa los Views en las y columnas. Cada la se puede adicionar usando el elemento y cada una de ellas puede contener uno o mas Views. Por cada View que se adicione a una la, se crear una nueva columna, o sea que cada View ocupa una celda de la tabla. El ancho de cada columna queda entonces determinado por el elemento (View/celda) ms grande.

CheckBox

Este 0po de View es un elemento de chequeo que puede tomar solo dos estados (checked/unchecked) o en su defecto verdadero/falso. Es muy u0lizado en listas de seleccin ml0ple.

Posee atributos al igual que los vistos en Views anteriores como layout_height layout_width, pero adicionalmente, uno que establece su estado inicial: checked que recibe en forma de string true si se desea que inicie seleccionado.

Aplicacin

Con0nuando con el ejemplo anterior, se modicar el Layout de la pantalla de Inicio de sesin a TableLayout el cual contendr 4 las, las dos primeras para Username y Password, la tercera para un CheckBox que permita ver o no el Password digitado y la l0ma para los dos botones.

TableLayout

on android:text="Exit" /> on android:text="Login" />

TableLayout

Hasta el momento, nuestras aplicaciones no poseen ningn 0po de evento que permita interactuar con Views como Bu>ons o en el ejemplo anterior con el CheckBox que a pesar de estar seleccionado, no muestra el password. Ms adelante se le asignarn acciones a estos elementos.

ID

Los objetos View pueden tener asignado un ID nico que los iden0que. La sintaxis para crear un nuevo id dentro de una e0queta XML es:

android:id=@+id/nombreID

Para un Bu>on OK podra ser:

android:id=@+id/btnOK

ID

El objeto View puede ser ahora conocido con ese ID tanto en el documento .XML como en el .Java esto quiere decir que si se desea modicar alguna propiedad de un View como por ejemplo el Texto, se puede hacer tambin program0camente. El smbolo (+) signica que este es un nuevo nombre de recurso que debe ser creado y adicionado al archivo de recursos (R.java).

ID

Cuando un View ha sido denido en XML, este puede ser referenciado por otros componentes de la siguiente forma:

@id/btnOK

ID Se debe usar @+ la primera vez que se menciona el ID del objeto en el archivo XML. Por ejemplo: Si se crea un TextView con:

android:id=@+id/txtVwUsername ms adelante se puede referenciar como:

@id/txtVwUsername pero si se referencia por un objeto antes de que sea denido, deber usarse en la referencia:

@+id/txtVwUsername y ms adelante cuando sea creado su id se denir:

android:id= @id/txtVwUsername

ID

Los ID aunque son dados como cadenas de caracteres (Strings), en realidad es referenciado como un nmero entero. Archivo R.java

public sta0c nal int btnOK=0x7f050001; public sta0c nal int txtVwUsername=0x7f050000;

Rela0veLayout

Este Layout permite ubicar los Views en relacin con otros. Debido a que se necesita referenciar otros elementos para ubicar un objeto, es necesario que los Views posean un ID nico.

Rela0veLayout

Rela0veLayout

on android:id="@+id/btnExit" android:layout_width="150dp" android:layout_height="wrap_content" android:text="Exit" android:layout_below="@id/chkBxShwPsswd" android:layout_alignLep="@id/txtVwPsswd" /> on android:id="@+id/btnLogin" android:layout_width="150dp" android:layout_height="wrap_content" android:text="Login" android:layout_below=@id/chkBxShwPsswd" android:layout_alignRight="@id/edtTxtPsswd" />

Rela0veLayout

on android:id="@+id/btnExit android:layout_width="150dp" android:layout_height="wrap_content" android:text="Exit" android:layout_below="@id/chkBxShwPsswd" android:layout_alignLep="@id/txtVwPsswd" /> on android:id="@+id/btnLogin" android:layout_width="150dp" android:layout_height="wrap_content" android:text="Login" android:layout_below=@id/chkBxShwPsswd" android:layout_alignRight="@id/edtTxtPsswd" />

ImageView

Este View permite mostrar una imagen como contenido de l. Las imgenes deben encontrase en la ruta /res/drawable (puede ser cualquier carpeta drawable-xdpi donde la x puede ser h-l-m-xh). El nombre de la imagen solo puede contener letras a-z (minsculas), nmeros (0-9) y el carcter ( _ ). El siguiente fragmento de cdigo se adiciona antes de cerrar la e0queta

Rela0veLayout

EJERCICIO

Desarrollar una App con la siguiente apariencia:

Principios de Android Activities Views & Layouts

Documents