Está en la página 1de 9

Java y XML

Unidad básica de una aplicación Android


es la Actividad
Layouts básicos Actividad muestra la interfaz de usuario
(UI), que se define en un archivo XML
Método onCreate() lee la interfaz de usuario
Mario Medina C. del archivo XML mediante el método
setContentView()
mariomedina@udec.cl
Cada elemento XML es compilado a una clase
Android View equivalente
Estas clases conforman la UI de la aplicación

Porqué se usa XML? Views y Viewgroups


Separa la presentación de la aplicación de View: elemento que tiene una
su funcionalidad representación en pantalla
Interfaz de usuario puede cambiarse sin Botones, rótulos, imágenes, etc.
recompilar el código Pueden ser creados en XML ó en Java
Permite definir diversas interfaces para ViewGroup: agrupa uno o más Views
diferentes dispositivos, orientaciones,
lenguajes, etc. Layout: tipo de ViewGroup que determina
Facilita la visualización de la interfaz de la distribución de aparición y secuencia de
usuario los Views

Views estándares Views y sus atributos


Android SDK incluye muchos objetos Cada objeto View y ViewGroup soporta su
predefinidos propia variedad de atributos
Button, CheckBox, ProgressBar, TextView, etc. Propios o heredados
También llamados widgets ó componentes Atributo id identifica al objeto
Es posible crear nuevos objetos View android:id=“@+id/miBoton”
derivando sus caracteristicas de objetos Recurso local
View estándares Identificador numérico almacenado en R.java
Usando la herencia, característica propia de android:id=“@id/empty”
los lenguajes de programación orientados a Recurso de Android
objetos Necesario agregar el paquete android

©2018 Mario Medina C. 1


Layouts Layouts
Elementos no visuales que controlan la Definen la distribución de objetos View
posición, distribución y dimensiones de los Pueden ser anidados
controles de la interfaz de usuario
Definen la estructura visual de la interfaz de
usuario
Layouts pueden ser anidados
A mayor profundidad, más se demora el
despliegue del layout

Ejemplo Layouts Ejemplo Layouts


RelativeLayout Relative
Layout
Button Button
LinearLayout Linear Table
TableRow Layout Layout
Checkbox Checkbox

TableRow Button Button TableRow TableRow


Checkbox Checkbox

Checkbox Checkbox Checkbox Checkbox


TableLayout

Tipos de Layouts Propiedades de un layout


Cumplen diferentes funciones Atributos que controlan apariencia y distribución
FrameLayout de los elementos
PercentFrameLayout, BrowseFrameLayout android:layout_width
android:layout_height
LinearLayout
android:layout_marginTop
TableLayout, AppBarLayout
android:layout_marginBottom
GridLayout android:layout_marginLeft
RelativeLayout android:layout_marginRight
CoordinatorLayout android:layout_gravity
ConstraintLayout android:layout_weight
DrawerLayout android:layout_x
android:layout_y
AbsoluteLayout (Obsoleto)

©2018 Mario Medina C. 2


Propiedades de un layout Dimensiones
Propiedades layout_width y Especificación px: pixels en la pantalla
layout_height pueden tomar valores Especificación pt: puntos de 1/72 pulgada
match_parent: Dimensiones determinadas por Especificación in: pulgadas físicas de la
el elemento padre
pantalla
wrap_content: Dimensiones determinadas por
el contenido Especificación mm: milímetros físicos de la
También pueden especificarse en pantalla
dp (Density-Independent Pixel) Especificación dp: pixels en una pantalla
sp (Scale-Independent Pixel) genérica de 160dpi
pt (Point)
Especificación sp: Similar a dp, usada para
px (Pixel)
especificar fuentes

Densidades Relación entre densidades


Android reconoce varias densidades base Relación entre densidades es 3:4:6:8:12:16
Low Density (ldpi): 120 dpi Ejemplo: tamaños de íconos
Medium Density (mdpi): 160 dpi 36x36 (0.75x) para ldpi
TV Density (tvdpi): 213 dpi 48x48 (1.0x) para mdpi
72x72 (1.5x) para hdpi
High Density (hdpi): 240 dpi
96x96 (2.0x) para xhdpi
Extra High Density (xhdpi): 320 dpi 144x144 (3.0x) para xxhdpi
Extra Extra High Density (xxhdpi): 480 dpi 192x192 (4.0x) para xxxhdpi
Extra Extra Extra High Density (xxxhdpi): 640 dpi
Default es 160 dpi

Tamaños de pantallas Dimensiones


Small: al menos 426dp x 320dp Android automáticamente escala las
Normal: al menos 470dp x 320dp dimensiones dadas en dp de acuerdo a la
Large: al menos 640dp x 480dp densidad real del dispositivo en uso
pixels = dp*(dpireal / 160)
Xlarge: al menos 960dp x 720dp
Ejemplo: Nexus S
Pantalla de 2.04” ancho, resolución 480x800
Densidad es 480/2.04 = 235dpi ~ 240dpi
80dp en pixels es 80*(240/160) = 120 pixels
160dp en pixels es 160*(240/160) = 240 pixels
320dp en pixels es 320*(240/160) = 480 pixels

©2018 Mario Medina C. 3


Pixels vs DPI Otras propiedades de interés
Usando pixels android:layout_gravity define la
posición hacia la cual gravitarán los
elementos del layout
CENTER, TOP, LEFT, BOTTOM, RIGHT, etc.
android:layout_weight define cómo se
distribuye el espacio disponible después de
Usando device-independent pixels posicionados los elementos
Válido en LinearLayout y TableLayout

FrameLayout FrameLayout
<?xml version="1.0" encoding="utf-8"?>
Es el layout más sencillo <FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
Diseñado para contener android:layout_width="match_parent"
sólo un View android:layout_height="match_parent"
android:orientation="vertical" >
Todos los elementos hijos
están alineados con su <TextView
android:layout_width="match_parent"
esquina superior izquierda android:layout_height="match_parent"
Todos superpuestos! android:gravity="center"
android:text="Este es un FrameLayout" />
Despliegue del objeto View </FrameLayout>
está controlado por los
parámetros del Layout

LinearLayout Atributo layout_weight


Distribuye sus elementos en forma lineal Atributo indica la importancia de un
uno después de otro objeto View
Respeta los márgenes y la gravedad de cada Si un elemento tiene peso 2 y otro 1, el
elemento primero es el doble de grande que el segundo
Orientación controlada por propiedad El espacio se reparte en forma proporcional a
android:orientation los pesos declarados para los elementos
Elemento de peso 0 nunca crece, y sólo ocupa
Tamaño relativo de elementos puede ser
el espacio necesario para desplegar sus
controlado a través de propiedades contenidos
android:layout_weight de cada uno Peso por omisión

©2018 Mario Medina C. 4


LinearLayout LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
. . . .
La altura de cada
<TextView
android:layout_width="match_parent"
objeto TextView es
android:layout_height="wrap_content"
android:gravity="center" proporcional a su peso
android:layout_weight="1“
android:background=“#FFFFBB33”
android:text="Este es un TextView con peso 1 en un LinearLayout" />
layout_weight
<TextView
android:layout_width="match_parent" Atributo gravity
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="2"
controla la posición del
android:text="Este es un TextView con peso 2 en un LinearLayout" />
<TextView
texto en el TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="3“
android:background=“#FFCC0000”
android:text="Este es un TextView con peso 3 en un LinearLayout" />
</LinearLayout>

TableLayout TableLayout
Distribuye elementos en forma tabular Fila con mayor número de elementos
Estructura de la tabla dada por elementos determina el número de las columnas
<TableRow> Ancho de una columna definida por la fila con
Cada elemento define una fila la celda más ancha en esa columna
Propiedad android:layout_span permite que una
TableLayout no dibuja los bordes de las celdas celda abarque más de una columna
Número de elementos <TableRow> controla el Propiedad android:background asigna un color a
número de filas la celda
Cada fila puede tener 0 ó más celdas Ancho de la tabla es siempre match_parent
Cada celda puede contener sólo 1 objeto View Alto de la tabla por omisión es wrap_content

TableLayout TableLayout
<?xml version="1.0" encoding="utf-8"?>
Disposición de las columnas y filas <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
controlado por propiedades de la tabla android:layout_height="match_parent"
android:gravity="center"
android:stretchColumns=“1,3”
Propiedad android:stretchColumns indica android:orientation="vertical" >
<TableRow>
columnas que pueden expandirse <TextView android:text="Celda 1.1" android:background="#DDBBCC“ />
<TextView android:text="Celda 1.2" android:background="#DDBBAA“ />
Equivalente: setColumnStretchable() <TextView android:text="Celda 1.3" android:background="#AABBCC“ />
<TextView android:text="Celda 1.4" android:background="#DDDDCC“ />
Propiedad android:shrinkColumns indica </TableRow>
<TableRow>
columnas que pueden contraerse <TextView android:text="Celda 2.1" android:background="#AACCDD“ />
<TextView android:text="Celda 2.2" android:background="#DDDDBB"
Equivalente: setColumnShrinkable() </TableRow>
android:layout_span = "3" />

<TableRow>
Propiedad android:collapseColumns indica <TextView android:text="Celda 3.1" android:background="#CCBBAA“
android:layout_span="2"/>
columnas que se pueden ocultar <TextView android:text="Celda 3.2" android:background="#DDAACC“ />
<TextView android:text="Celda 3.3" android:background="#CCBBCC“ />
Equivalente: setColumnCollapsed() </TableRow>
</TableLayout>

©2018 Mario Medina C. 5


TableLayout GridLayout
Detalle del TableLayout Incluído en Android 4.0 (API 14)
Similar a TableLayout
No requiere elementos <TableRow> y
<TableColumn>
Indica en forma explícita el número de filas y
columnas mediante android:rowCount y
android:columnCount
Permite distribuciones más complejas

GridLayout GridLayout
<?xml version="1.0" encoding="utf-8"?>
Objetos View en un GridLayout pueden <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
especificar su posición mediante los android:layout_height="match_parent"
android:gravity="center"

parámetros rowSpec y columnSpec del android:rowCount="3"


android:columnCount="4"
android:orientation="horizontal" >
objeto LayoutParams asociado <TextView android:text="Celda 1.1" android:background="#DDBBCC"/>
Estos parámetros también pueden usarse para <TextView android:text="Celda 1.2" android:background="#DDBBAA"/>
<TextView android:text="Celda 1.3" android:background="#AABBCC"/>
abarcar más de una fila y/o columna <TextView android:text="Celda 1.4" android:background="#DDDDCC"/>

<TextView android:text="Celda 2.1" android:background="#AACCDD"/>


Distribución de espacio libre en un <TextView android:text="Celda 2.2" android:background="#DDDDBB“
android:layout_columnSpan="3"/>
GridLayout considera las alineaciones y <TextView android:text="Celda 3.1" android:background="#CCBBAA"/>

pesos relativos de los elementos <TextView android:text="Celda 3.2" android:layout_columnSpan="2"


android:background="#DDAACC" />
<TextView android:text="Celda 3.3" android:background="#CCBBCC"/>
</GridLayout>

GridLayout RelativeLayout
Detalle Especifica la posición de cada elemento en
forma relativa a su elemento padre o a
cualquier otro elemento presente en el
layout
Referencias a otro objeto son hechas via su ID
(@id)
Posición de cada elemento controlado por sus
propiedades relativas

©2018 Mario Medina C. 6


RelativeLayout RelativeLayout
Relativas a otro control Relativas al layout padre
android:layout_above android:layout_centerHorizontal
android:layout_below android:layout_centerVertical
android:layout_toLeftOf
android:layout_centerInParent
android:layout_toRightOf
android:layout_alignParentLeft
android:layout_alignLeft
android:layout_alignParentRight
android:layout_alignRight
android:layout_alignTop android:layout_alignParentTop
android:layout_alignBottom android:layout_alignParentBottom
android:layout_alignStart android:layout_alignParentStart
android:layout_alignEnd android:layout_alignParentEnd
android:layout_alignBaseline android:layout_alignWithParentIfMissing

RelativeLayout RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
Usar RelativeLayout en lo
android:layout_height="match_parent"
android:orientation="vertical" >
posible para acomodar
<EditText
android:id="@+id/Texto_Nombre" la interfaz de usuario a
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
pantallas de diferentes
<Button
android:id="@+id/Boton_Aceptar"
tamaños y densidades
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/Texto_Nombre"
android:layout_alignParentRight="true"/>
<TextView
android:id="@+id/TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Este es un RelativeLayout"
android:layout_below="@id/Boton_Aceptar" />
</RelativeLayout>

Rotación de la pantalla Rotación de la pantalla (I)


<?xml version="1.0" encoding="utf-8"?>
Dispositivos Android pueden ser rotados en <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
90 grados, y la interfaz de usuario debiese android:layout_height="match_parent" >
<Button
mutar en forma apropiada android:id="@+id/boton1"
android:layout_width="wrap_content"
Método onCreate() es invocado cada vez que android:layout_height="wrap_content"
android:text="Superior izquierda"
se detecta la rotación del dispositivo android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
Dos métodos para manejar la rotación <Button
android:id="@+id/boton2"
“Anclar” elementos a las esquinas del dispositivo android:layout_width="wrap_content"
android:layout_height="wrap_content"
usando RelativeLayout android:text="Superior derecha"
android:layout_alignParentRight="true"
Diseñar un nuevo layout para el dispositivo android:layout_alignParentTop="true" />

rotado

©2018 Mario Medina C. 7


Rotación de la pantalla (II) Rotación de la pantalla
<Button
android:id="@+id/boton3" RelativeLayout permite
android:layout_width="wrap_content"
android:layout_height="wrap_content" adaptar los elementos a
android:text="Inferior izquierda"
android:layout_alignParentLeft="true" la rotación
android:layout_alignParentBottom="true" />
<Button
android:id="@+id/boton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Inferior derecha"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true" />
<Button
android:id="@+id/boton5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Centro"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>

Rotación de la pantalla Rotación de la pantalla


Otra alternativa es agregar un nuevo archivo Archivo activity_main.xml para Landscape
de distribución para cuando la pantalla es
rotada a la orientación landscape
Agregar directorio res/layout-land
Copiar archivo activity_main.xml a ese directorio
Editar res/layout-land/activity_main.xml,
agregándole los botones mostrados a
continuación

Rotación de la pantalla Rotación de la pantalla


<Button
android:id="@+id/boton6" Nuevo archivo de
android:layout_width="wrap_content" distribución es usado al
android:layout_height="wrap_content"
android:text=“Superior Centro" rotar el teléfono
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<Button
android:id="@+id/boton7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Inferior Centro"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />

©2018 Mario Medina C. 8


Preservando los datos Rotación de la pantalla
Girar el teléfono destruye la actividad y la Detectando orientación en un programa
import android.view.Display;
recrea en otra orientación import android.view.WindowManager;

Debe cuidarse de preservar la información @Override


de estado de la actividad al cambiar su public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
configuración setContentView(R.layout.main);
WindowManager wm = getWindowManager();
Almacenar el estado en métodos onPause() ó Display d = wm.getDefaultDisplay();
onSavedInstanceState() if (d.getWidth() > d.getHeight()) {
Log.d(“Orientacion”, “Landscape”);
Usar objetos View con nombre dado por }
android:id else {
Log.d(“Orientacion”, “Portrait”);
Estado es preservado automáticamente por el }
sistema operativo }

Rotación de la pantalla Rotación de la pantalla


Alternativamente, se puede usar el método Se puede solicitar una orientación
getConfiguration() determinada en Java
import android.content.pm.ActivityInfo;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); @Override
setContentView(R.layout.main); Public void onCreate(Bundle savedInstanceState) {
if (getResources().getConfiguration().orientation ==
super.onCreate(savedInstanceState);
Configuration.ORIENTATION_LANDSCAPE) {
setContentView(R.layout.main);
Log.d(“Orientacion”, “Landscape”);
} else if (getResources().getConfiguration().orientation ==
Configuration.ORIENTATION_PORTRAIT) { // Para Portrait: usar SCREEN_ORIENTATION_PORTRAIT
Log.d(“Orientacion”, “Portrait”); setRequestedOrientation(
} ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
}
}

Rotación de la pantalla
Alternativamente, se puede indicar la
orientación de una actividad en el archivo
AndroidManifest.xml
Atributo restringe la orientación de la actividad
y previene su destrucción al ser girada
Otros valores son portrait y sensor (este
último es el valor por omisión)
<activity android:name=“.MainActivity”
android:screenOrientation=“landscape” >
. . . .
</activity>

©2018 Mario Medina C. 9