CLASE 10

1. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
1. - Icono de la aplicación
Cuando creamos un proyecto para implementar una aplicación con el plugin de Android nos crea un ícono
por defecto:
Los íconos e imágenes se almacenan en la carpeta res (resources) y en esta hay cuatro carpetas
llamadas:
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
Y en cada una de estas hay un archivo llamado ic_launcher.png:
Como las resoluciones de los dispositivos Android pueden ser muy distintos (un celular, una tablet, un
televisor etc.) se recomienda proporcionar múltiples copias de cada imagen de recursos a diferentes
resoluciones y almacenarlos en las carpetas nombradas respetando las siguientes reglas:
res/drawable-ldpi/
75% del tamaño de las imágenes almacenadas en la carpeta drawable-mdpi
El ícono debe ser de 36*36 píxeles.
res/drawable-mdpi/
El ícono debe ser de 48*48 píxeles.
res/drawable-hdpi/
150% del tamaño de las imágenes almacenadas en la carpeta drawable-mdpi
El ícono debe ser de 72*72 píxeles.
res/drawable-xhdpi/
200% del tamaño de las imágenes almacenadas en la carpeta drawable-mdpi
El ícono debe ser de 96*96 píxeles.
2. Layout (LinearLayout)
Android organiza las componentes visuales (Button, EditText, TextView etc.) en pantalla mediante
contenedores llamados Layout.
Hasta ahora no nos a preocupada como organizar una pantalla, sino nos hemos centrado en la
funcionalidad de cada programa que implementamos.
Ahora comenzaremos a preocuparnos como organizar y disponer las componentes dentro de la pantalla.
- LinearLayout.
LinearLayout es uno de los diseños más simples y más empleado. Simplemente establece los
componentes visuales uno junto al otro, ya sea horizontal o verticalmente.
APLICACIONES MÓVILES 1

2. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
Creemos un proyecto llamado ProyectoLayout1, borremos el TextView que agrega por defecto el ADT.
Para cambiar nuestro layout por defecto que es el RelativeLayout que crea el ADT debemos presionar el
botón derecho del mouse en la ventana Outline donde dice RelativeLayout y seleccionar Change Layout
(Debemos seleccionar en el diálogo que lo queremos cambiar por un layout de tipo LinearLayout vertical):
Una de las propiedades más importantes del contenedor LinearLayout es Orientation.
Si fijamos la propiedad Orientation con el valor Vertical luego las componentes contenidas en el Layout se
disponen una debajo de otra (Cuando disponemos un contenedor LinearLayout con orientación vertical y
disponemos una serie de botones luego podemos ver algo similar a:
En cambio si fijamos la propiedad Orientation con el valor Horizontal el resultado es la disposición de las
componentes en forma horizontal:
APLICACIONES MÓVILES 2

3. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
Podemos disponer más de una componente de tipo LinearLayout para implementar nuestra interfaz
visual. Veamos los objetos y propiedades a configurar si queremos la siguiente interfaz:
Para implementar este interfaz hemos agregado de la pestaña "Layouts" dos controles de tipo
"LinearLayout (Vertical)" en la parte superior y uno de tipo "LinearLayout (Horizontal)" en la parte inferior:
APLICACIONES MÓVILES 3

4. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
Disponemos un TextView y un EditText en el LinearLayout superior (Podemos arrastrarlos directamente a
la ventana Outline dentro del LinearLayout respectivo):
Ahora en el otro LinearLayout agregamos un Button y un TextView:
APLICACIONES MÓVILES 4

5. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
Para que el segundo LinearLayout quede en la parte inferior de la pantalla inicializamos las propiedades
"Layout_weight" con 1 para el superior y con 0 para el inferior:
Seleccionamos el EditText del primer LinearLayout y fijamos Layout Height con el valor Match Parent
(para que ocupe todo el espacio del contenedor) y para la propiedad gravity asignamos el valor top
APLICACIONES MÓVILES 5

6. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
Finalmente actualizamos el segundo EditText con lo que tenemos como resultado la interfaz:
Propiedad Gravity.
Otra propiedad muy utilizada es Gravity. Esta propiedad nos permite alinear a la izquierda, a la derecha, a
la parte superior, a la parte superior derecha etc.
Para implementar la siguiente interfaz:
APLICACIONES MÓVILES 6

7. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
Para el LinearLayout superior definimos la propiedad Layout_weight con valor 0 y el segundo
LinearLayout la misma propiedad Layout_weight con valor 1. Los dos botones que ubicamos en el
segundo LinearLayout aparecen en la parte inferior derecha ya que inicializamos la propiedad Gravity del
segundo LinearLayout con los valores:
3. Layout (TableLayout)
APLICACIONES MÓVILES 7

8. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
El Layout de tipo TableLayout agrupa componentes en filas y columnas. Un TableLayout contiene un
conjunto de componentes de tipo TableRow que es el que agrupa componentes visuales por cada fila
(cada fila puede tener distinta cantidad de componentes visuales)
Cuando disponemos un control de Layouts de tipo TableLayout automáticamente crea cuatro
componentes de tipo TableRow que los podemos ver en la ventana "Outline". Podemos borrar o agregar
componentes de tipo TableRow según las necesidades de nuestro TableLayout:
Luego de borrar un control de tipo TableRow y agregar componentes de tipo Button la interfaz visual
queda como sigue (muchas veces es más fácil agregar los controles visuales en la ventana Outline para
disponerlos dentro de cada tableRow):
Otra propiedad que nos puede ser útil inicializar en los controles que se disponen dentro de un
TableLayout es layout_span. Esta propiedad permite que un control se expanda más de una celda.
APLICACIONES MÓVILES 8

9. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
En el siguiente ejemplo el objeto de la clase Button de la segunda fila hemos dispuesto la propiedad
layout_span con el valor 2:
Si la propiedad no aparece en la ventana "Properties" cuando seleccionamos el objeto debemos entrar al
archivo XML y agregar manualmente dicha propiedad:
4. - Layout (RelativeLayout)
El layout RelativeLayout es el que dispone el ADT por defecto cuando creamos un proyecto en Android.
Hay varias posibilidades cuando empleamos el RelativeLayout. Primero podemos alinear un control con
respecto al Layout que lo contiene. Para probarlo dispondremos un botón en cada vértice y veremos que
propiedades son afectadas e inicializadas:
APLICACIONES MÓVILES 9

10. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
Como podemos ver cada control que agregamos se inicializan alguna de las propiedades:
alignParentLeft
alignParentRight
alignParentTop
alignParentBottom
centerHorizontal
centerVertical
centerInParent
Con este tipo de layout podemos disponer un control en forma relativa a otro control que haya dentro del
RelativeLayout. Veamos un ejemplo:
En este ejemplo hemos dispuesto el segundo botón debajo (below) del botón 1 y alineado a la izquierda
(luego si desplazamos el botón 1 se desplazará el botón 2)
La posición relativa con respecto a otro control puede ser:
above (por encima)
below (debajo)
toLeftOf (a la izquierda de)
toRightOf (a la derecha)
APLICACIONES MÓVILES 10

11. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
5. - Layout (FrameLayout)
El control de tipo FrameLayout dispone dentro del contenedor todos los controles visuales alineados al
vértice superior izquierdo. Es decir si disponemos dos o más controles los mismos se apilan.
Por ejemplo si disponemos dentro de un FrameLayout un ImageView y un Button luego el botón se
superpone a la imagen:
Otra aplicación del control FrameLayout es disponer una serie de controles visuales no visibles e ir
alternando cual se hace visible.
6. - Layout (ScrollView y LinearLayout)
El ScrollView junto con un LinearLayout nos permite disponer una cantidad de componentes visuales que
superan la cantidad de espacio del visor del celular o tablet. Luego el usuario puede desplazar con el
dedo la interfaz creada.
Problema:
Disponer un control de tipo ScrollView (que se encuentra en la pestaña Composite). Como veremos
automáticamente se crea una componente de tipo LinearLayout y fijemos la propiedad Orientation del
LinearLayout con el valor vertical:
APLICACIONES MÓVILES 11

12. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
Luego dispongamos numerosos botones que superen la cantidad de espacio del dispositivo. Numerar los
botones con los números del 1 en adelante (recordar que podemos ir arrastrando los botones a la ventana
Outline):
APLICACIONES MÓVILES 12

13. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
Luego si ejecutamos el programa veremos que podemos desplazar (scroll) todo el contenido del visor con
el dedo:
Otra posibilidad para la implementación de una interfaz en Android es disponer un LinearLayout en la
parte superior y un ScrollView en la parte inferior:
APLICACIONES MÓVILES 13

14. IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA
Esto hace que en tiempo de ejecución quede fijo el LinearLayout y podamos desplazar con el dedo el
ScrollView que aparece en la parte inferior:
APLICACIONES MÓVILES 14