INTERFAZ DE

USUARIO I
LAYOUTS Y CONTROLES BÁSICOS
AGENDA
• COMPONENTES DE UNA APLICACIÓN EN ANDROID
• LAYOUTS
• CONTROLES BÁSICOS
1.- COMPONENTES DE UNA APLICACIÓN EN ANDROID
• Activity
• Representan el componente principal de la interfaz gráfica de una aplicación Android.
• Elemento análogo a una ventana o pantalla en cualquier otro lenguaje visual.

• View
• Son los componentes básicos con los que se construye la interfaz gráfica de la aplicación.

• Service
• Son componentes sin interfaz gráfica que se ejecutan en segundo plano.
• Pueden realizar cualquier tipo de acciones, por ejemplo actualizar datos, lanzar
notificaciones, o incluso mostrar elementos visuales
1.- COMPONENTES DE UNA APLICACIÓN EN ANDROID
• Content Provider (Proveedor de Contenidos)
• Es el mecanismo para compartir datos entre aplicaciones.
• Permite compartir determinados datos de nuestra aplicación sin mostrar detalles sobre su
almacenamiento interno, su estructura, o su implementación.

• Broadcast Receiver
• Es un componente destinado a detectar y reaccionar ante determinados mensajes o
eventos globales generados por el sistema (“Batería baja”, “SMS recibido”, “Tarjeta SD
insertada”, …)
1.- COMPONENTES DE UNA APLICACIÓN EN ANDROID
• Widget
• Son elementos visuales, normalmente interactivos, que pueden mostrarse en la pantalla
principal del dispositivo Android y recibir actualizaciones periódicas.
• Permiten mostrar información de la aplicación al usuario directamente sobre la pantalla
principal.

• Intent
• Es el elemento básico de comunicación entre los distintos componentes Android.
• Mensajes o peticiones que son enviados entre los distintos componentes de una aplicación
o entre distintas aplicaciones.
• Permite mostrar una actividad desde cualquier otra, iniciar un servicio, enviar un
mensaje broadcast, iniciar otra aplicación, etc.
2.- INTERFAZ DE USUARIO EN ANDROID: LAYOUTS

• LAYOUTS son elementos no visuales destinados a controlar la distribución, posición

y dimensiones de los controles que se insertan en su interior. Extiende de la clase
base ViewGroup.
Tipo Layouts:
• FrameLayout coloca todos sus controles hijos alineados con su esquina superior
izquierda, de forma que cada control quedará oculto por el control siguiente (a menos que
éste último tenga transparencia). Suele utilizarse para mostrar un único control en su
interior.
2.- INTERFAZ DE USUARIO EN ANDROID: LAYOUTS
 Propiedades: android:layout_width y
• Ejemplo: android:layout_height, que podrán
tomar los valores “match_parent”
(para que el control hijo tome la
dimensión de su layout contenedor) o
“wrap_content” (para que el control
hijo tome la dimensión de su
contenido)
2.- INTERFAZ DE USUARIO EN ANDROID: LAYOUTS
• LinearLayout apila uno tras otro todos sus elementos hijos en sentido horizontal o
vertical según se establezca su propiedad android:orientation.
Ejemplo:
 Propiedad: android:layout_weight,
permite dar a los elementos
contenidos en el layout unas
dimensiones proporcionales entre
ellas.
2.- INTERFAZ DE USUARIO EN ANDROID: LAYOUTS
• TableLayout permite distribuir sus elementos hijos de forma tabular, definiendo las filas y
columnas necesarias, y la posición de cada componente dentro de la tabla.

android:stretchColumns. Indicará las columnas

que pueden expandir para absorber el espacio libre
dejado por las demás columnas a la derecha de la
pantalla.
android:shrinkColumns. Indicará las columnas
que se pueden contraer para dejar espacio al resto
de columnas que se puedan salir por la derecha de
la pantalla.
android:collapseColumns. Indicará las columnas
de la tabla que se quieren ocultar completamente.
2.- INTERFAZ DE USUARIO EN ANDROID: LAYOUTS
• Todas estas propiedades del TableLayout pueden recibir una lista de índices de columnas
separados por comas (ejemplo: android:stretchColumns=“1,2,3”)o un asterisco para indicar
que debe aplicar a todas las columnas (ejemplo: android:stretchColumns=“*”)
• Otra característica importante es la posibilidad de que una celda determinada pueda
ocupar el espacio de varias columnas de la tabla (análogo al atributo colspan de HTML).
Esto se indicará mediante la propiedad android:layout_span del componente concreto que
deberá tomar dicho espacio.
2.- INTERFAZ DE USUARIO EN ANDROID: LAYOUTS
• GridLayout tiene características similares al TableLayout, la diferencia entre ellos es la
forma que tiene el GridLayout de colocar y distribuir sus elementos hijos en el espacio
disponible. Indicaremos el número de filas y columnas como propiedades del layout,
mediante android:rowCount y android:columnCount
• Los diferentes elementos hijos se irán colocando ordenadamente por filas o columnas
(dependiendo de la propiedad android:orientation) hasta completar el número de filas o
columnas.
• Utilizamos android:layout_rowSpan y android:layout_columnSpan para conseguir que una
celda ocupe el lugar de varias filas o columnas.
2.- INTERFAZ DE USUARIO EN ANDROID: LAYOUTS
• Ejemplo

Existe también una forma de

indicar de forma explícita la
fila y columna que debe
ocupar un determinado
elemento hijo contenido en
el GridLayout, y se consigue
utilizando los atributos
android:layout_row
y android:layout_column.
2.- INTERFAZ DE USUARIO EN ANDROID: LAYOUTS
• RelativeLayout permite especificar la posición de cada elemento de forma relativa a su
elemento padre o a cualquier otro elemento incluido en el propio layout.

En el ejemplo, el botón BtnAceptar se colocará

debajo del cuadro de texto TxtNombre
(android:layout_below=”@id/TxtNombre”) y
alineado a la derecha del layout padre
(android:layout_alignParentRight=”true”)
2.- INTERFAZ DE USUARIO EN ANDROID: LAYOUTS
POSICIÓN RELATIVA A OTRO CONTROL
• android:layout_above
• android:layout_below
• android:layout_toLeftOf
• android:layout_toRightOf
• android:layout_alignLeft
• android:layout_alignRight
• android:layout_alignTop
• android:layout_alignBottom
• android:layout_alignBaseline
POSICIÓN RELATIVA AL LAYOUT PADRE
• android:layout_alignParentLeft
• android:layout_alignParentRight
• android:layout_alignParentTop
• android:layout_alignParentBottom
• android:layout_centerHorizontal
• android:layout_centerVertical
• android:layout_centerInParent
2.- INTERFAZ DE USUARIO EN ANDROID: LAYOUTS

OPCIONES DE MARGEN EXTERIOR OPCIONES DE MARGEN INTERIOR

• android:layout_margin • android:padding
• android:layout_marginBottom • android:paddingBottom
• android:layout_marginTop • android:paddingTop
• android:layout_marginLeft • android:paddingLeft
• android:layout_marginRight • android:paddingRight

Cualquiera de los tipos de layout anteriores

poseen otras propiedades comunes
3.- CONTROLES BÁSICOS (I)
• Control Button
• Un control de tipo Button es el botón más básico que podemos utilizar y normalmente
contiene un simple texto.
Propiedades:
 android:text (Texto a mostrar)
 android:background (color de fondo)
 android:typeface ( estilo de fuente)
 android:textcolor (color de la fuente)
 android:textSize (tamaño de fuente)
3.- CONTROLES BÁSICOS (I)
• Control ToggleButton
• Es un tipo de botón que puede permanecer en dos posibles estados, pulsado o no_pulsado.
Propiedades android:textOn y android:textoOff.
3.- CONTROLES BÁSICOS (I)
• Control Switch
• Es muy similar al ToggleButton anterior, donde tan sólo cambia su aspecto visual, que en
vez de mostrar un estado u otro sobre el mismo espacio, se muestra en forma de
deslizador o interruptor.
3.- CONTROLES BÁSICOS (I)
• Control ImageButton
• En un control de tipo ImageButton podremos definir una imagen a mostrar en vez de un
texto, para lo que deberemos asignar la propiedad android:src. Normalmente asignaremos
esta propiedad con el descriptor de algún recurso que hayamos incluido en las carpetas
/res/drawable. Así, por ejemplo, en nuestro caso vamos a incluir una imagen llamada
“ic_estrella.png” por lo que haremos referencia al recurso “@drawable/ic_estrella”
3.- CONTROLES BÁSICOS (I)
• Eventos de un Botón
• Capturar el Evento Click