Tutoriales Android

Introducción

El diseño de la interfaz de usuario cobra cada día más importancia en el desarrollo de una aplicación. La calidad de la interfaz de usuario puede ser uno de los factores que conduzca al éxito o al fracaso de todo el proyecto.

Si has realizado alguna aplicación utilizando otras plataformas, advertirás que el diseño de la interfaz de usuario en Android sigue una filosofía muy diferente. En Android la interfaz de usuario no se diseña en código, sino utilizando un lenguaje de marcado en XML similar al HTML.

A lo largo de este capítulo mostraremos una serie de ejemplos que te permitirán entender el diseño de la interfaz de usuario en Android. Aunque no será la forma habitual de trabajar, comenzaremos creando la interfaz de usuario mediante código. De esta forma comprobaremos que cada uno de los elementos de la interfaz de usuario (las vistas) realmente son objetos Java. Continuaremos mostrando cómo se define la interfaz de usuario utilizando código XML. Pasaremos luego a ver las herramientas de diseño integradas en Android Studio. Se describirá el uso de layouts, que nos permitirá una correcta organización de las vistas, y el uso de recursos alternativos nos permitirá adaptar nuestra interfaz a diferentes circunstancias y tipos de dispositivos.

En este capítulo también comenzaremos creando la aplicación de ejemplo desarrollada a lo largo del curso, Asteroides. Crearemos la actividad principal, donde simplemente mostraremos cuatro botones, con los que se podrán arrancar diferentes actividades A continuación aprenderemos a crear estilos y temas y los aplicaremos a estas actividades. Para terminar el capítulo propondremos varias prácticas para aprender a utilizar diferentes tipos de vistas y layouts.

Objetivos

  •  Entender cómo se realiza el diseño del interfaz de usuario en una aplicación Android.
  •  Aprender a trabajar con vistas y mostrar sus atributos más importantes.
  •  Enumerar los tipos de Layouts que nos permitirán organizar las vistas.
  •  Mostrar cómo se utilizan los recursos alternativos.
  • Aprenderemos a crear estilos y temas para personalizar nuestras aplicaciones.
  • Mostrar cómo interactuar con las vistas desde el código Java
  • Describir el uso  de layouts basados en pestañas (tabs).

 Creación de una interfaz de usuario por código

Veamos un primer ejemplo de cómo crear una interfaz de usuario utilizando exclusivamente código Java. Aunque esta no es la forma recomendable de trabajar con Android, resulta interesante para resaltar algunos conceptos.

Ejercicio: Creación del interfaz de usuario por código

1.    Abre el proyecto creado en el capítulo anterior y visualiza MainActivity.java

2.    Comenta la última sentencia del método onCreate()  añade las tres que se muestran a continuación en negrita:

@Override public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //setContentView(R.layout.activity_main);
    TextView texto = new TextView(this);
    texto.setText("Hello, Android");
    setContentView(texto);
}

Nota sobre Java: Para poder utilizar el objeto TextView has de importar un nuevo paquete. Para ello añade al principio “import android.widget.TextView;”. Otra alternativa es pulsar Alt-Intro, para que se añadan automáticamente los paquetes que faltan.

La interfaz de usuario de Android está basada en una jerarquía de clases descendientes de la clase View (vista). Una vista es un objeto que se puede dibujar y se utiliza como un elemento en el diseño de la interfaz de usuario (un botón, una imagen, una etiqueta de texto como en el utilizado en el ejemplo, etc.). Cada uno de estos elementos se define como una subclase de la clase View; la subclase para representar un texto es TextView.

El ejemplo comienza creando un objeto de la clase TextView. El constructor de la clase acepta como parámetro una instancia de la clase Context (contexto). Un contexto es un manejador del sistema que proporciona servicios como la resolución de recursos, obtención de acceso a bases de datos o preferencias. La clase Activity es una subclase de Context, y como la clase MainActivity es una subclase de Activity, también es de tipo Context. Por ello, puedes pasar this (el objeto actual de la clase MainActivity) como contexto del TextView.

3.  Después se define el texto que se visualizará en el TextView mediante setText(). Finalmente, mediante setContentView()se indica la vista utilizada por la actividad.

4.  Ejecuta el proyecto para verificar que funciona.

 

Creación de una interfaz de usuario usando XML

En el ejemplo anterior hemos creado la interfaz de usuario directamente en el código. A veces puede ser muy complicado programar interfaces de usuario, ya que pequeños cambios en el diseño pueden corresponder a complicadas modificaciones en el código. Un principio importante en el diseño de software es que conviene separar todo lo posible el diseño, los datos y la lógica de la aplicación.

Android proporciona una alternativa para el diseño de interfaces de usuario: los ficheros de diseño basados en XML. Veamos uno de estos ficheros. Para ello accede al fichero res/layout/activity_main.xml de nuestro proyecto. Se muestra a continuación. Este layout o fichero de diseño proporciona un resultado similar al del ejemplo de diseño por código anterior:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.myapplication.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

NOTA: Cuando haces doble clic en el  explorador del proyecto sobre activity_main.xml, probablemente lo abra en modo gráfico. Para verlo en modo texto selecciona la pestaña Text 

Resulta sencillo interpretar su significado. Se introduce un elemento de tipo RelativeLayout, cuya función como se estudiará más adelante  es contener otros elementos de tipo View. Este RelativeLayout tiene cinco atributos. Los dos primeros, xmlns:android, y  xmlns:tools son  declaraciones de  espacios de nombres de XML que utilizaremos en este fichero (este tipo de parámetro solo es necesario especificarlo en el primer elemento). Los dos siguientes permiten definir el ancho y alto de la vista. En el ejemplo se ocupará todo el espacio disponible. El último atributo indica la actividad asociada a este Layout.

Dentro del RelativeLayout solo tenemos un elemento de tipo TextView. Este dispone de tres atributos. Los dos primeros definen el ancho y alto (se ajustará al texto contenido). El último indica el texto a mostrar.

Ejercicio paso a paso: Creación del Interfaz de usuario con XML

1.    Para utilizar el diseño en XML regresa al fichero MainActivity.java y deshaz los cambios que hicimos antes (elimina las tres últimas líneas y quita el comentario).

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}

2.    Ejecuta la aplicación y verifica el resultado. Ha de ser muy similar al anterior.

3.    Modifica elvalor de hello_world en el fichero res/values/strings.xml.

4.    Vuelve a ejecutar la aplicación y visualiza el resultado.

 Analicemos ahora la línea en la que acabas de quitar el comentario:

       setContentView(R.layout.activity_main) ;

Aquí, R.layout.main corresponde a un objeto View que será creado en tiempo de ejecución a partir del recurso activity_main.xml Trabajar de esta forma, en comparación con el diseño basado en código, no quita velocidad y requiere menos memoria. Este identificador es creado automáticamente  en la clase R del proyecto a partir de los elementos de la carpeta res. La definición de la clase R puede ser similar a:

 

public final class R {
    public static final class attr {
 }
    public static final class drawable {
        public static final int ic_launcher=0x7f020000;
    }
    public static final class id {
       public static final int action_settings=0x7f070000;
    }
    public static final class layout {
        public static final int activity_main=0x7f030000;
    }
    public static final class menu {
        public static final int main=0x7f060000;
    }
    public static final class string {
        public static final int app_name=0x7f040000;
    ...

NOTA: Este fichero se genera automáticamente. Nunca debes editarlo.

Has de tener claro que los identificadores de la clase R son meros números que informan al gestor de recursos, que datos ha de cargar. Por lo tanto no se trata de verdaderos objetos, estos serán creados en tiempo de ejecución solo cuando sea necesario usarlos.

Ejercicio: El fichero R.java.

1.    En Android Studio, el fichero R.java no es accesible desde el explorador de proyecto. No obstante, puedes acceder a él si pulsas con el botón derecho sobre app y seleccionas Show in Explorer. Desde esta carpeta abre el fichero:

app\build\generated\source\r\debug\nombre\del\paquete\R.java

Donde nombre\del\paquete has de reemplazarlo por el que corresponda al paquete de tu aplicación.

2.    Comparalo con el fichero mostrado previamente. ¿Qué diferencias encuentras? (RESPUESTA: cambia los valores numéricos en hexadecimal y contiene muchos más identificadores).

3.    Abre el fichero MainActivity.java y reemplaza R.layout.activity_main por el valor numérico al que corresponde en R.java.

4.    Ejecuta de nuevo el proyecto. ¿Funciona? ¿Crees que sería adecuado dejar este valor numérico?

5.   Aunque haya funcionado, este valor puede cambiar en un futuro. Por lo tanto para evitar problemas futuros vuelve a reemplazarlo por R.layout.activity_main.

Preguntas de repaso: Diseño del interfaz de usuario en XML y en código

Preguntas de repaso: El fichero R.java

Edición visual de las vistas

Veamos ahora como editar los layouts o ficheros de diseño en XML. En el explorador del proyecto abre el fichero res/layout/activity_main.xml. Verás que en la parte inferior de la ventana central aparecen dos lengüetas: Design y Text. Podrás usar dos tipos de diseño: editar directamente el código XML (segunda lengüeta) o realizar este diseño de forma visual (primera lengüeta). Veamos cómo se realizaría el diseño visual. La herramienta de edición de layouts se muestra a continuación:

Nota: Si aparece un error con problemas de renderizado prueba otros niveles de API en el desplegable que aparece junto al pequeño robot verde, o con otro tema, en en el botón con forma de círculo.

En la parte inferior izquierda encontramos el marco Component Tree una lista con todos los elementos del layout. Este layout tiene solo dos vistas: un ConstraintLayout que contiene un TextView. En el marco central aparece una representación de cómo se verá el resultado. En la parte superior aparecen varios controles para representar este layout en diferentes configuraciones. Cuando diseñamos una vista en Android, hay que tener en cuenta que desconocemos el dispositivo final donde será visualizada y la configuración específica elegida por el usuario. Por esta razón, resulta importante que verifiques que el layout se ve de forma adecuada en cualquier configuración.

En la parte superior, de izquierda a derecha, encontramos los siguientes botones: Los tres primeros   muestra solo la visualización de diseño, solo la visualización esquemática o ambas.   orientación horizontal (landscape), vertical (portrait) y también podemos escoger el tipo de interfaz de usuario (coche, TV, reloj,…),  tipo de dispositivo (tamaño y resolución de la pantalla),  la versión de Android,  cómo se verá nuestra vista tras aplicar un tema,   la configuración de idioma (locale). El último desplegable permite añadir de forma rápida un recurso alternativo al layout actual.

Para editar un elemento, selecciónalo en el marco Component Tree o pincha directamente sobre él en la ventana de previsualización. Al seleccionarlo, puedes modificar alguna de sus propiedades en el marco Properties, situado a la derecha. Echa un vistazo a las propiedades disponibles para TextView y modifica alguna de ellas. En muchos casos te aparecerá un desplegable con las opciones disponibles. Aquí solo se mustra una pequeña parte de las propiedades disponibles. Pulsa en View all properties para mostrarlas todas.

El marco de la izquierda, Palette, te permite insertar de forma rápida nuevas vistas al layout. Puedes arrastrar cualquier elemento a la ventana de previsualización o al marco Component Tree. En el anexo D se ha incluido una lista con las vistas disponibles.

Nota: El siguiente vídeo corresponde a una versión anterior de la herramienta. Aunque cambian algunos iconos el funcionamiento continúa siendo similar. Para crear un nuevo layout pulsa con el botón derecho en el explorador de proyecto sobre app y selecciona la opción: New > Android resource file

 

video[TutorialDiseño visual de Layouts: Visión general

Ejercicio: Creación visual de Vistas

1.    Crea un nuevo proyecto y llámalo PrimerasVistas.  Añade una actividad de tipo Empty Activity.Puedes dejar el resto de los parámetros con los valores por defecto.

2.    Abre el fichero res/layout/activity_main.xml.

3.   Vamos a hacer que la raíz del layout se base en un LinearLayout vertical. Este tipo de layout es uno de los más sencillos de utilizar. Te permite representar las vistas una debajo de la otra. Tendrás que seleccionar la lengüeta Text y cambiar las dos apariciones del texto RelativeLayout por LinearLayout. Añade el atributo orientation a LinearLayout para que la orientación sea vertical. Elimina los atributos inecesarios del TextView. El resultado ha de ser:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.primerasvistas.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"…/>
</LinearLayout>

       Regresa a la lengüeta Design.

4.    Desde la paleta de izquierda arrastra, al área de diseño, los siguientes elementos: ToggleButton, CheckBox,SeekBar y RatingBar.

5.    Selecciona la primera vista que estaba ya creada (TextView) y pulsa el botón <Supr> para eliminarla.

6.     Selecciona la vista ToggleButton. Pulsa  el  botón (Set layoutwidth to wrap_content); Conseguirás que el ancho del botón se ajuste al ancho de su contenedor

7.    Pulsa  el botón   (Convert orientation to horizontal),  para para conseguir que el LinearLayout donde están las diferentes vistas tenga una orientación horizontal. Comprobarás que no caben todos los elementosvolver a una orientación vertical.

8.     Pulsa el botón(Convert orientation to vertical), para volver a una orientación vertical.

9.     Pulsa el botón   (Set layoutheight to match_parent); Conseguirás que la altura del botón se ajuste al alto de su contenedor. El problema es que el resto de elementos dejan de verse. Vuelve a pulsar este botón para regresar a la configuración anterior (También puedes pulsar Ctrl-z).

10.     Selecciona la vista CheckBox. Ve al marco Properties y en la parte inferior pulsa en View all properties. Busca la propiedad Layout_Margin en el campo all introduce “20dp”.

11.     Busca la propiedad gravity y selecciona center.

12.     Observa que hay un espacio sin usar en la parte inferior del layout. Vamos a distribuir este espacio entre las vistas. Desde el marco Commponet Tree selecciona las cuatro vistas que has introducido dentro del LinearLayout. Para una selección múltiple mantén pulsada la tecla Ctrl.

13.  Aparecerá un nuevo botón: (Distribute Weights Evenly). Púlsalo yla altura de las vistas se ajustará para que ocupen la totalidad del layout. Realmente, lo que hace es dividir el espacio sin usar de forma proporcional entre las vistas. Es equivalente a poner layout_weight = 1 para todas las vistas de este layout. Esta propiedad se modificará en un siguiente punto.

14.  Selecciona las cuatro vistas y pulsa el botón   (Clear All Weight) para elinar los pesos introducidos.

15.   Con la vista CheckBox selecccionada, pulsa el botón (Assign All Weight) para asignar todo la altura restante a la vista seleccionada.

16.  Para asignar un peso diferente a cada vista, repite los pasos anteriores donde asignábamos peso 1 a todas las vistas. Pulsa la lengueta Text y modifica manualmente el atributo layout_weight para que el ToggleButton tenga valor 2; CheckBox tenga valor 0.5;  SeekBar valor 4 y RatingBar valor 1. Pulsa la legguta Design. Como puedes observar, estos pesos permiten repartir la altura sobrante entre las vistas.

17.  Utiliza los siguientes botones para ajustar el zum.

18.  Utiliza los botones de la barra superior para observar cómo se representará el layout en diferentes situaciones y tipos de dispositivos:

19.  Selecciona la vista CheckBox y observa las diferentes propiedades que podemos definir en el marco Properties. Algunas ya han sido definidas por medio de la barra de botones. En concreto y siguiendo el mismo orden que en los botones hemos modificado: Layout margin = 20dp, gravity = center y Layout weight = 0.5.

20.  Busca la propiedad Text y sustituye el valor “CheckBox” por “Guardar automáticamente” y Text size por “9pt”.

21.  Pulsa el botón para mostrar la visualización de diseño junto a la esquemática. A continuación se  muestra  el resultado obtenido:

22.     Pulsa sobre la lengüeta Text . Pulsa las teclas Ctrl-Atl-L para que formatee adecuadamente el código XML. A continuación se muestra este código:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.primerasvistas.MainActivity">
    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:text="ToggleButton" />
    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="20dp"
        android:layout_weight="0.5"
        android:gravity="center"
        android:text="Guardar automáticament"
        android:textSize="9pt" />
    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="4" />
    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

23.  Ejecuta el proyecto para ver el resultado en el dispositivo.

Ejercicio: Vistas de entrada de texto

1.  Añade en la parte superior del Layout anterior una vista de tipo entrada de texto EditText, de tipo normal ( Plain Text).  Lo encontrarás dentro del grupo Text Fieds (EditText). Debajo de esta, una de tipo correo electrónico (E-mail) seguida de una de tipo palabra secreta (Password). Continua así con otros tipos de entradas de texto.

2.  Ejecuta la aplicación.

3.  Observa, como al introducir el texto de una entrada se mostrará un tipo de teclado diferente.

Los atributos de las vistas

video[Tutorial Atributo de la clase View en Android

video[Tutorial]   Atributo de la clase TexView en Android

Recursos adicionales: Atributos de dimensión

En muchas ocasiones tenemos que indicar la anchura o altura de una vista, un margen, el tamaño de un texto o unas coordenadas. Este tipo de atributos se conocen como atributos de dimensión. Dado que nuestra aplicación podrá ejecutarse en una gran variedad de dispositivos con resoluciones muy diversas, Android nos permite indicar estas dimensiones de varias formas. En la siguiente tabla se muestran las diferentes posibilidades:

px   (píxeles): Estas dimensiones representan los píxeles en la pantalla.

mm  (milímetros): Distancia real medida sobre la pantalla.

in    (pulgadas): Distancia real medida sobre la pantalla.

pt    (puntos): Equivale a 1/72 pulgadas.

dp (píxeles independientes de la densidad): Presupone un dispositivo de 160 píxeles por pulgada. Si luego el dispositivo tiene otra densidad, se realizará el correspondiente ajuste. A diferencia de otras medidas como mm, in y pt este ajuste se hace de forma aproximada dado que no se utiliza la verdadera densidad gráfica, sino el grupo de densidad en que se ha clasificado el dispositivo (ldpi, mdpi, hdpi…). Esta medida presenta varias ventajas cuando se utilizan recursos gráficos en diferentes densidades. Por esta razón, Google insiste en que se utilice siempre esta medida. Desde un punto de vista práctico un dp equivale aproximadamente a 1/160 pulgadas. Y en dispositivos con densidad gráfica mdpi un dp es siempre un pixel. 

sp   (píxeles escalados): Similar a dp, pero también se escala en función del tamaño de fuente que el usuario ha escogido en las preferencias. Indicado cuando se trabaja con fuentes.

Recursos adicionales:Tipos de vista y sus atributos

Consulta el anexo D del libro, para conocer una lista con todos las descendientes de la clase View y sus atributos.

Preguntas de repaso: Pincha aquí para hacer un test.

Layouts

Si queremos combinar varios elementos de tipo vista tendremos que utilizar un objeto de tipo Layout. Un Layout es un contenedor de una o más vistas y controla su comportamiento y posición. Hay que destacar que un Layout puede contener a otro Layout y que es un descendiente de la clase View.

 La siguiente lista describe los Layout más utilizados en Android:

LinearLayout: Dispone los elementos en una fila o en una columna.

TableLayout: Distribuye los elementos de forma tabular.

RelativeLayout: Dispone los elementos en relación a otro o al padre.

AbsoluteLayout: Posiciona los elementos de forma absoluta.

FrameLayout: Permite el cambio dinámico de los elementos que contiene.

ConstraintLayout: Versión mejorada de RelativeLayout, que permite una edición visual desde el editor y trabajar con porcentajes.

Dado que un ejemplo vale más que mil palabras, pasemos a mostrar cada uno de estos layouts en acción:

RelativeLayout permite comenzar a situar los elementos en cualquiera de los cuatro lados del contenedor e ir añadiendo nuevos elementos pegados a estos.

   

<RelativeLayout
   xmlns:android="http://schemas...
   android:layout_height="match_parent"
   android:layout_width="match_parent">
 <AnalogClock
   android:id="@+id/AnalogClock01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentTop="true"/>
 <CheckBox
   android:id="@+id/CheckBox01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_below="@id/AnalogClock01"
   android:text="Un checkBox"/>
 <Button
   android:id="@+id/Button01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Un botón"
   android:layout_below="@id/CheckBox01"/>
 <TextView
   android:id="@+id/TextView01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:text="Un texto cualquiera"/>
</RelativeLayout>

 

LinearLayout es uno de los Layout más utilizado en la práctica. Distribuye los elementos uno detrás de otro, bien de forma horizontal o vertical. 

<LinearLayout  xmlns:android="http://...
       android:layout_height="match_parent"      
       android:layout_width="match_parent"
       android:orientation ="vertical">
  <AnalogClock 
       android:layout_width="wrap_content"   
       android:layout_height="wrap_content"/>
  <CheckBox
       android:layout_width="wrap_content"   
       android:layout_height="wrap_content"
       android:text="Un checkBox"/>
  <Button
       android:layout_width="wrap_content"   
       android:layout_height="wrap_content"  
       android:text="Un botón"/>
  <TextView       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"            
        android:text="Un texto cualquiera"/>
</LinearLayout>

TableLayout distribuye los elementos de forma tabular. Se utiliza la etiqueta <TableRow> cada vez que queremos insertar una nueva línea.

<TableLayout xmlns:android=”http://...
        android:layout_height="match_parent"
        android:layout_width="match_parent">
  <TableRow>
     <AnalogClock 
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"/>
     <CheckBox
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"  
        android:text="Un checkBox"/>
  </TableRow>
  <TableRow>
     <Button
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"   
        android:text="Un botón"/>
     <TextView  
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"   
        android:text="Un texto cualquiera"/>
  </TableRow>
</TableLayout>

AbsoluteLayout permite indicar las coordenadas (x,y) donde queremos que se visualice cada elemento. No es recomendable utilizar este tipo de Layout. La aplicación que estamos diseñando tiene que visualizarse correctamente en dispositivos con cualquier tamaño de pantalla. Para conseguir esto, no es una buena idea trabajar con coordenadas absolutas. De hecho, este tipo de Layout ha sido marcado como obsoleto.

<AbsoluteLayout xmlns:android="http://schemas.       
      android:layout_height="match_parent"       
      android:layout_width="match_parent">
  <AnalogClock 
      android:layout_width="wrap_content"   
      android:layout_height="wrap_content"
      android:layout_x="50px"
      android:layout_y="50px"/>
  <CheckBox
      android:layout_width="wrap_content"    
      android:layout_height="wrap_content"
      android:text="Un checkBox"
      android:layout_x="150px"
      android:layout_y="50px"/>
  <Button
      android:layout_width="wrap_content"    
      android:layout_height="wrap_content"   
      android:text="Un botón"
      android:layout_x="50px"
      android:layout_y="250px"/>
  <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"  
       android:text="Un texto cualquiera"
       android:layout_x="150px"
       android:layout_y="200px"/>
</AbsoluteLayout>

FrameLayout  posiciona las vistas usando todo el contenedor, sin distribuirlas espacialmente. Este Layout suele utilizarse cuando queremos que varias vistas ocupen un mismo lugar. Podemos hacer que solo una sea visible, o superponerlas.Para modificar la visibilidad de un elemento utilizaremos la propiedad visibility.

<FrameLayout  xmlns:android="http://schemas...
  android:layout_height="mach_parent"       
  android:layout_width="match_parent">
  <AnalogClock
     android:layout_width="wrap_content"    
     android:layout_height="wrap_content"/>
  <CheckBox
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Un checkBox"/>
  <Button
     android:layout_width="wrap_content"    
     android:layout_height="wrap_content"
     android:text="Un botón"
     android:visibility="invisible"/>
  <TextView       
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Un texto cualquiera"
     android:visibility="invisible"/>
</FrameLayout>

video[Tutorial] Los Layouts en Android

Recursos adicionales: Propiedades de RelativeLayout

La lista de propiedades específicas de RelativeLayout es muy grande. Te recomendamos que la consultes en la Referencia clase View, anexo D

Práctica: Uso de Layouts

1.    Utiliza un RelativeLayout para realizar un diseño similar al siguiente:

2.  Utiliza un TableLayout para realizar un diseño similar al siguiente:

3.  Utiliza un LinearLayout horizontal que contenga en su interior otros LinearLayout para realizar un diseño similar al siguiente:

4. Visualiza el resultado obtenido  en diferentes tamaños de pantalla.  ¿Se  visualiza correctamente?

Preguntas de repaso: Los Layouts

Preguntas de repaso: Atributos de los layouts

También podemos utilizar otras clases de Layouts, que son descritas a continuación:

ScrollView: Visualiza una columna de elementos; cuando estos no caben en pantalla se permite un deslizamiento vertical.

HorizontalScrollView: Visualiza una fila de elementos; cuando estos no caben en pantalla se permite un deslizamiento horizontal.

 FragmentTabHost, TabLayout ó TabHost: Proporciona una lista de ventanas seleccionables por medio de etiquetas que pueden ser pulsadas por el usuario para seleccionar la ventana que desea visualizar. Se estudia al final del capítulo. 

ListView: Visualiza una lista deslizable verticalmente de varios elementos. Su utilización es algo compleja. Se verá un ejemplo en el capítulo siguiente.

GridView: Visualiza una cuadrícula deslizable de varias filas y varias columnas.

RecyclerView: Versión actualizada que realiza las mismas funciones que ListView o GridView. Se verá en el siguiente capítulo.

ViewFlipper: Permite visualizar una lista de elementos de forma que se visualice uno cada vez. Puede ser utilizado para intercambiar los elementos cada cierto intervalo de tiempo.

Material Design

 

A partir de la versión 5.0 de Android (API 21), se introduce Material Design. Se trata de una guía para el diseño visual de las aplicaciones, que Google no quiere aplicar exclusivamente a dispositivos móviles, sino que pretende utilizar material design en todo tipo de contenidos digitales (páginas Web, aplicaciones para ordenadores, vídeos,…).

Se basa en diseños y colores planos. Uno de sus principios es dar peso o materialidad a los elementos del interfaz de usuario. Para ello va a tratar de darle volumen o profundidad utilizando sombras, capas y animaciones. Observa como los botones flotantes (ver botón con estrella en el siguiente ejercicio) se visualizan con una sombra para que parezcan que están en una capa superior y suelen visualizarse con animaciones. La idea es que parezcan que están construidos de material físico. Para más información puedes consultar la especificación de Material Design que se incluye en enlaces de interés.

Tutorial Desarrollo de apps para Android con Material Design : Características

Desde el punto de vista de la programación destacamos que se incorporan nuevas vistas: RecyclerView, Toolbar,FloatingActionButton, …

Enlaces de interés:

Especificaciones de diseño de Material Design:
http://www.google.com/design/spec/material-design/introduction.html

Crear aplicaciones con Material Design:
http://developer.android.com/intl/es/training/material/index.html

Aplicación de ejemplo con diseño Material Design (Web / Android):
https://polymer-topeka.appspot.com/

https://play.google.com/store/apps/details?id=com.chromecordova.Topeka

Ejercicio paso a paso: Una aplicación basada en Material Design

Cuando creas un nuevo proyecto con Android Studio, si escoges una actividad del tipo Basic Activity, tendrá un diseño inicial basado en Material Design. Esta actividad, utilizará un tema que hereda de android:Theme.Material. Además, se incorporan varios widgets basados en este diseño, como: Toolbar o FloatingActionButton, y se incluirán las dependencias adecuadas para poder usar estos widwets:

1.     Crea un nuevo proyecto con los siguientes datos:

Application name:Material Design
Package name:com.example.mislugares

2.     La aplicación solo va a ser para móviles, por lo que en la segunda venta has de marcar el primer checkbox:

Phone and Tablet
     Minimum SDK: API 15 Android 4.0.3 (IceCreamSandwich)

Recuerda que un aspecto delicado es seleccionar el SDK mínimo con el que trabajará la aplicación. Valores bajos te permiten instalarla en un mayor número de dispositivos, pero tendrás menos características disponibles en el API. Un valor adecuado que te permite cubrir casi todos los dispositivos actuales es API 15.

3.     En la siguiente ventana te pregunta si quieres añadir algún tipo de actividad a la aplicación. Indica:

Add an activity: Basic Activity

De esta forma se creará una actividad con diseño basado en Material Design. Dispondrá de una barra de acciones y un botón flotante.

4.     En la última ventana te pedirá que configures algunos aspectos de esta actividad:

De arriba abajo corresponde al nombre de la clase Java donde se implementa la actividad, nombre del layout XML donde se define su aspecto visual, título de la actividad y fichero XML de menú donde se indica las opciones disponibles. Deja los valores por defecto.

5.     Ejecuta el proyecto. El resultado ha de ser similar al siguiente

6.     Pasemos a estudiar algunos elementos del proyecto. En el explorador del proyecto abre el fichero Gradle Scripts > build.gradle (Module:app). Observa como en la sección dependencies se han incluido las siguientes librerías:

dependencies {
    …
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.android.support:design:25.3.1'
}

NOTA:Es interesante que utilices siempre la última versión disponible de las librerías (23.2.1en el ejemplo). Al crear un nuevo proyecto se realiza así. En lugar de añadir una dependencia editando directamente este fichero también puedesseleccionar File >Project Structure… >Modules: app >Dependencies >+ >Libray dependency > <librería>. La ventaja de esta opción es que usará laúltima versión disponible.

La primera es la librería de compatibilidad v7, que incorpora las clases más importantes como: AppCompatActivity, Toolbar o CardView. La segunda es para incluir el layout ConstraintLayout. La última es la librería de compatibilidad de diseño. Incorpora otras clases como: FloatingActionButton, AppBarLayout, TabLayout, NavigationView o Snackbar. Gracias al uso de estas librerías podremos utilizar estas clases con un nivel mínimo de API 7, a pesar de que la mayoría han sido introducidas en la versión 5.0 de Android.

Hay una diferencia entre estas librerías: Las clases definidas en la librería de compatibilidad appcompat-v7son del API de Android. Cuando en una aplicación la versión mínima de API sea mayor o igual que 21 (v5.0) ya no tiene sentido usar esta librería. Por el contrario, las clases definidas en la librería de diseño son solo de esta librería. Has de usarla siempre que necesites una de sus clases.

7.     Pasemos a estudiar los layouts creados en el proyecto. En el explorador del proyecto abre el fichero app > res > layouut > activity_main.xml. En la vista Desig no se mostrará nada. Selecciona la vista Text pulsando sobre la lengüeta de la parte inferior.

8.     Estudia la estructura de este layout. Observa como las etiquetas de las vistas son muy largas. Esto es debido a que no están definidas en el API de Android si no en una librería (en concreto a las design).  La función de cada una de vistas se estudia en el siguiente apartado. Puede ser un buen momento para leerlo.

9.     Abre el fichero app > res > layouut > content_main.xml. Selecciona la vista Text pulsando sobre la lengüeta de la parte inferior. Se trata de un layout muy simple: un <ConstraintLayout> con un <TextView> dentro.

10.     Abre ahora app > java > com.example.mislugares > MainActivity.java. En el método onCreate() se inicializan algunas de las vistas introducidas en el layout. Este código se explica en el siguiente apartado.

11.     Si al ejecutar la aplicación pulsas en los tres puntos de la esquina superior derecha, se mostrará un menú con la opción Settings. Como se ha definido este menú y otras opciones sobre la barra de acciones se explicarán más adelante.

 

Vistas de Material Design: CoordinationLayout, AppBarLayout, FloatingActionButtony SnackBar

Las animaciones son muy importantes en Material Design. Google quiere que los elementos del interfaz de usuario se muevan de forma coordinada, de forma que, al moverse un elemento, este puede desplazar a otro. Observa como al ejecutar el proyecto anterior, cuando pulsas el botón flotante se mueve hacia arriba mientras aparece un texto.

Para poder realizar esta animación, y alguna otra más, se utiliza CoordinationLayout. Es un descendiente de LinearLayout que nos proporciona un nivel adicional de control sobre las vistas que contiene para controlar su comportamiento y permite crear interdependencias. Este contenedor se suele utilizar como raíz del layout.

Para entender cómo se utiliza abre el fichero activity_main.xml. Observa cómo tras eliminar los atributos la estructura resultante es la siguiente:

El CoordinatorLayout actúa de contenedor y va a permitir que los elementos que contiene puedan realizar animaciones coordinadas. Mediante el atributo fitsSystemWindows podemos conseguir modificar la barra de estado del sistema. En concreto aplicando a esta barra el color colorPrimaryDark (azul oscuro en el ejemplo anterior), para que combine con el color de la aplicación colorPrimary (azul más claro en el ejemplo anterior). El uno de colores en Material Design se explica en el siguiente apartado.

El AppBarLayout también es un LinearLayout vertical y ha sido diseñado para usarlo dentro de un CoordinatorLayout. A su vez es habitual que contenga un elemento de tipo Toolbar y opcionalmente pestañas (TabLayout). Su finalidad es contener los elementos de la barra de acciones de la aplicación (conocida según la nueva nomenclatura de Material Design como AppBar). Gracias al atributo layout_scrollFlags podemos conseguir que los elementos de dentro de esta barra puedan desplazarse hasta que sean ocultados.

Dentro de AppBarLayout tenemos un Toolbar. Como veremos en breve es un nuevo widget que tiene la misma función que un ActionBar.

El contenido del layout que ha de visualizar la aplicación se incluye en un fichero aparte content_main. De esta forma queda más estructurado y podemos crear contenidos específicos según el tipo de pantalla, versión, … Observa como en el proyecto se ha creado un content_main que simplemente muestra el texto  “Hello World!”.

Tras el <include> se ha insertado un FloatingActionButtonse trata de un tipo de botón característico introducido en Material Design para las acciones principales.

Otro aspecto que no hay que olvidar es que ahora hemos de inicializar desde código algunos elementos. Esto se realiza en el método onCreate() de la actividad:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //Barra de acciones
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    //Botón flotante
    FloatingActionButton fab = (FloatingActionButton) findViewById(
                                                               R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action",
                   Snackbar.LENGTH_LONG).setAction("Action", null).show();
        }
    });
}

Este código resultará más sencillo de entender, tras realizar el apartado Uso práctico de Vistas. Las dos primeras líneas han sido explicadas en la unidad anterior. El método setSupportActionBar() es utilizado para indicar a la actividad la barra de acciones que ha de utilizar. Esta barra de acciones es almacenada en el objeto toolbar, que es creado en el layout XML. Para encontrar el objeto se utiliza si id: R.id.toolbar.

Con respecto al botón flotante simplemente se carga en el objeto fab y se le asigna un escuchador onClick. Más adelante se describe el uso de escuchadores para personalizar la acción asociada. Actualmente, cuando se pulsa muestra un mensaje de texto utilizando un Snackbar. Se trata de una nueva forma de mostrar cuadros de dialogo, introducida en Material Desing, similar a Toast o AlertDialog. La diferencia es que se muestran en la parte inferior de la pantalla y que se visualizan con una animación de desplazamiento.

Ejercicio paso a paso: Barra de acciones extendida en Mis Lugares

En este curso vamos a crear una aplicación de ejemplo. Tendrá por nombre Mis Lugares y permitirá que los usuarios guarden información relevante sobre los sitios que suelen visitar (restaurantes, tiendas, etc.). En este apartado comenzaremos creando la aplicación Android que solo contendrá una actividad con una barra de acciones extendida.

La barra de acciones extendida es un patrón de diseño propuesto en Material Design que habrás observado en algunas aplicaciones actuales. Al entrar en la actividad la barra de acciones se muestra en modo extendido. Al desplazar el contenido la barra de acciones pasará al tamaño habitual.

Para conseguir este efecto has de utilizar el layout CollapsingToolbarLayout. En este ejercicio se describe cómo hacerlo:

1.     Crea un nuevo proyecto con los siguientes datos:

Application name:Mis Lugares
Package name:
com.example.mislugares
Phone and TabletRPhone and Tablet
     Minimum SDK: API 15 Android 4.0.3 (IceCreamSandwich)
Add an activity: Scrolling Activity
Activity name: MainActivity
Layout name: activity_main
Title: MainActivity
Menu Resource Name: menu_main

De esta forma se creará una actividad similar a la que hemos creado en el ejercicio anterior. Igualmente dispondrá de una barra de acciones y un botón flotante. Pero ahora el contenido principal podrá desplazarse, a la vez que la barra de acciones reduce su tamaño.

2.     Ejecuta el proyecto y verifica su comportamiento:

3.     Compara los layouts creados para activity_main.xml de este proyecto y el anterior. En la siguiente figura se muestra un resumen con las nuevas etiquetas y atributos XML que han sido añadidos. No ha de preocuparte si conoces el significado exacto de cada atributo.

  Blank Activity                Scrolling Activity

  <CoordinatorLayout…>          <CoordinatorLayout…>

  <AppBarLayout …>              <AppBarLayout
                                   layout_height="@dimen/app_bar_height"
                                   fitsSystemWindows="true">

                                <CollapsingToolbarLayout…/>

     <Toolbar…/>                   <Toolbar…/>

                                </CollapsingToolbarLayout>

  </AppBarLayout>               </AppBarLayout>

  <include layout=              <include layout=
     "@layout/content_main"/>      "@layout/content_main"/>

  <FloatingActionButton…/>      <FloatingActionButton
                                   layout_anchor="@id/app_bar"/>

  </CoordinatorLayout>          </CoordinatorLayout>

Nota: De momento quédate con los conceptos principales. Si en un futuro quieres modificar este comportamiento básico, puedes consultar la información necesaria.

4.     Compara los layouts creados para content_main.xml. Observa como ahora se utiliza el layout <NestedScrollView> para conseguir que el contenido sea desplazable. Además, el campo de texto es muy largo para conseguir que no quepa completo en pantalla.

Definición de la paleta de colores de la aplicación

Uno de los principios que se definen en Material Design es el uso del color. Google propone usar colores vivos y alegres. En la Web de Material Design se nos proponen algunas paletas de ejemplo [1].

Cada aplicación ha de definir su propia paleta de colores que la diferencie del resto de aplicaciones. Incluso la barra de estado de Android cambiará para que combine con los colores de nuestra aplicación. Puedes observar en la imagen inferior cómo ha cambiado el uso del color en la aplicación Gmail. A la izquierda se muestra en una versión 4.x y a la derecha tras la aplicación de Material Design. Esta aplicación ha decidido usar una tonalidad de naranja como color primario o característico. Observa como la barra de estado también se muestra en un color similar algo más oscuro.

Por lo tanto, si tu aplicación va a seguir las especificaciones de Material Design, lo primero que has de hacer es escoger la paleta de colores que va a utilizar. Este color puedes seleccionarlo entre la paleta de ejemplo antes comentada, aunque si la empresa para que realizas la aplicación tiene un color de marca, lo ideal es que escojas este color.

Practica: Definir la paleta de colores de la aplicación

1.     Para definir los colores de nuestra aplicación vamos a utilizar la herramienta que encontrarás en: https://www.materialpalette.com/

2.     Es muy sencilla de manejar, escoge primero el color primario para tu aplicación y a continuación el color de resalte o acentuación. Observa como a la derecha aparece una previsualización de una aplicación que utilizara estos colores. Aunque esta aplicación solo nos permite seleccionar el color primario (primary color) y el de resalte (accent color), realmente puedes configurar hasta 8 colores en la paleta de tu aplicación.  Dark primary color y light primary color son colores derivados del primario. El resto se utilizan para textos e iconos y no es recomendable modificar.

3.     Puedes realizar varias pruebas hasta obtener unos colores de tu gusto.

4.     Cuando los tengas, puedes pulsar en DOWNLOAD y selecciona XML, para descargarte un fichero de recursos Android donde se definen estos colores.

5.     Como solo vamos a cambiar tres valores, va a ser más sencillo que abras el fichero res / values / colors.xml de la aplicación y reemplaces lo tres valores definidos, con los valores en hexadecimal que has seleccionado. Estos valores pueden ser diferentes a los que se muestran a continuación:

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#8BC34A</color>
</resources>

6.     Si abres el fichero res / values / styles.xml podrás observar como estos tres colores son utilizados para configurar los colores del tema aplicado por defecto a tu aplicación:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    …

El resto de colores de la paleta no son definidos dado que se utilizarán los colores por defecto.

7.     Si abres el fichero AndroidManifest.xml podrás observar como este tema es asignado a la aplicación.

<manifest …>
    <application
        …
        android:theme="@style/AppTheme">
    …

8.     Ejecuta la aplicación. Observa como los nuevos colores son aplicados a la barra de estado del sistema (colorPrimaryDark), la barra de acciones (colorPrimary) y el botón flotante (colorAccent).


Mis Lugares: Primeras actividades

En el apartado anterior creamos la aplicación Mis Lugares que permitirá a los usuarios almacenar información sobre los sitios que han vistado.

En este apartado crearemos un par de actividades para esta aplicación. La primera actividad contendrá simplemente cuatro botones. La segunda contendrá un formulario para dar de alta y editar un lugar. Esta primera versión de la aplicación no almacenará los datos introducidos.

Práctica: Creación de una primera actividad en Mis Lugares

En esta práctica crearemos una primera actividad que contendrá simplemente cuatro botones

1.  Edita el fichero res > layout > content_main.xml y trata de crear una vista similar a la que ves a continuación. Has de dejar el NestedScrollView que ya tenías y reemplazar el TextView por  un LinearLayout que contenga cuatro Button. Un NestedScrollView solo puede contener dentro un elemento, por lo que no puedes introducir directamente los cuatro botones. Usando un layout que los contenga se resuelve el problema.

Solución:

1. El fichero content_main.xml ha de ser similar al siguiente:

<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.mislugares.MainActivity"
    tools:showIn="@layout/activity_main">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="30dp">
        <Button
            android:id="@+id/button01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/accion_mostrar" />
        <Button
            android:id="@+id/button02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/accion_preferencias" />
        <Button
            android:id="@+id/button03"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/accion_acerca_de" />
        <Button
            android:id="@+id/button04"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/accion_salir" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

2. El fichero res > values > strings.xml ha de tener el siguiente contenido:

<resources>
    <string name="accion_mostrar">Mostrar Lugares</string>
    <string name="accion_preferencias">Preferencias</string>
    <string name="accion_acerca_de">Acerca de </string>
    <string name="accion_salir">Salir</string>
    <string name="app_name">Mis Lugares</string>
    <string name="action_settings">Settings</string>
</resources>
Práctica: Un formulario para introducir nuevos lugares.

El objetivo de esta práctica es crear un layout que permita introducir y editar lugares en la aplicación Mis Lugares.

1.  Crea un nuevo layout con nombre edicion_lugar.xml.

2.  Ha de parecerse al siguiente formulario. Puedes basarte en un LinearLayout o un RelativeLayout para distribuir los elementos. Pero es importante que este layout, se encuentre dentro de un NestedScrollView para que cuando el formulario no quepa en pantalla se pueda desplazar verticalmente.

3.     Introduce a la derecha del TextView con texto “Tipo:” un Spinner con id tipo. Más adelante configuraremos esta vista para que muestre un desplegable con los tipos de lugares.

4.     Las vistas EditText han de definir el atributo id con los valores: nombre, direccion, telefono, url y comentario. Utiliza también el atributo hint para dar indicaciones sobre el valor a introducir. Utiliza el atributo inputType para indicar qué tipo de entrada esperamos. De esta manera se mostrará un teclado adecuado (por ejemplo si introducimos un correo electrónico aparecerá la tecla @).

Nota: El atributo inputType admite los siguientes valores (en negrita los que has de utilizar en este ejercicio): none, text, textCapCharacters, textCapWords, textCapSentences, textAutoCorrect, textAutoComplete, textMultiLine, textImeMultiLine, textNoSuggestions, textUri, textEmailAddress, textEmailSubject, textShortMessage, textLongMessage, textPersonName, textPostalAddress, textPassword, textVisiblePassword, textWebEditText, textFilter, textPhonetic, textWebEmailAddress, textWebPassword, number, numberSigned, numberDecimal, numberPassword, phone, datetime, date y time.
5.     Abre la clase MainActivity y en el método onCreate() reemplaza: 

setContentView(R.layout.activity_main.edicion_lugar);

6.     Comenta todas la líneas de este método que hay debajo usando /* ... */.  Como ya no se crea el layout activity_main los id de vista a los que se accede ya no existen.

7.     Ejecuta la aplicación y verifica como cambia el tipo de teclado en cada EditText

8.     Deshaz el cambio realizado en el ponto 5 y 6.

Solución:

<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.mislugares.MainActivity"
    tools:showIn="@layout/activity_main"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <TextView
            android:id="@+id/t_nombre"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nombre:"
            android:textAppearance="?android:attr/textAppearanceMedium" />
        <EditText
            android:id="@+id/nombre"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/t_nombre"
            android:hint="algo que identifique el lugar" >
            <requestFocus/>
        </EditText>
        <TextView
            android:id="@+id/t_tipo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/nombre"
            android:text="Tipo:"
            android:textAppearance="?android:attr/textAppearanceMedium" />
         <Spinner
            android:id="@+id/tipo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/t_tipo"
            android:layout_toRightOf="@id/t_tipo" />
         <TextView
            android:id="@+id/t_direccion"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/t_tipo"
            android:text="Dirección:"
            android:textAppearance="?android:attr/textAppearanceMedium" />
         <EditText
            android:id="@+id/direccion"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/t_direccion"
            android:hint="dirección del lugar"
            android:inputType="textPostalAddress" />
        <TextView
            android:id="@+id/t_telefono"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/direccion"
            android:text="Telefono:"
            android:textAppearance="?android:attr/textAppearanceMedium" />
        <EditText
            android:id="@+id/telefono"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/t_telefono"
            android:layout_alignTop="@id/t_telefono"
            android:hint="teléfono para contactar"
            android:inputType="phone" />
        <TextView
            android:id="@+id/t_url"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/telefono"
            android:text="Url:"
            android:textAppearance="?android:attr/textAppearanceMedium" />
        <EditText
            android:id="@+id/url"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/t_url"
            android:hint="página web"
            android:inputType="textUri" />
        <TextView
            android:id="@+id/t_comentario"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/url"
            android:text="Comentario:"
            android:textAppearance="?android:attr/textAppearanceMedium" />
        <EditText
            android:id="@+id/comentario"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/t_comentario"
            android:hint="introduce tus notas"
            android:inputType="textMultiLine" />
    </RelativeLayout>
</android.support.v4.widget.NestedScrollView>

 

Una aplicación de ejemplo: Asteroides

A lo largo de este libro vamos a ir creando una aplicación de ejemplo que toque los aspectos más significativos de Android. Comenzamos en este capítulo creando una serie de vistas que nos permitirán diseñar un sencillo interfaz de usuario. Si quieres ver cómo quedará la aplicación una vez termines el libro puedes ver el siguiente vídeo:

     video[Tutorial]   Asteroides

Enlaces de interés:

 Asteroides: Puedes descargarte la aplicación de Google Play

 (https://play.google.com/store/apps/details?id=es.upv.asteroides&hl)

Práctica: Creación de la aplicación Asteroides.

1. Crea un nuevo proyecto con los siguientes datos:

Application Name:Asteroides
Package Name:org.example.asteroides
Minimum Required SDK: API 9: Android 2.3 (Gingerbread)
Add an activity: Blank Activity
Activity Name:MainActivity
Layout Name: activity_main

Title: Asteroides
Menu Resource Name: menu_main

NOTA: Deja el resto de los parámetros con su valor por defecto.

2.  Abre el fichero res/Layout/main.xml y trata de crear una vista similar a la que ves a continuación. Ha de estar formada por un LinearLayout que contiene un TexView y cuatro Button. Trata de utilizar recursos para introducir los cinco textos que aparecen.

Solución:

1. El fichero activity_main.xml ha de ser similar al siguiente:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"    
    android:padding="30dp"
    tools:context=".MainActivity" >
  <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/tituloAplicacion"
       android:gravity="center"
       android:textSize="25sp"
       android:layout_marginBottom="20dp"/>
  <Button
       android:id="@+id/Button01"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:text="@string/Arrancar"/>
   <Button
       android:id="@+id/Button02"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:text="@string/Configurar"/>
   <Button
       android:id="@+id/Button03"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:text="@string/Acercade"/>
  <Button
       android:id="@+id/Button04"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:text="@string/Salir"/>
</LinearLayout>

 

2. El fichero res/values/strings.xml ha de tener el siguiente contenido:

<resources>

    <string name="Arrancar">Jugar</string>

    <string name="Configurar">Configurar</string>

    <string name="Acercade">Acerca de </string>

    <string name="Salir">Salir</string>

    <string name="tituloAplicacion">Asteroides</string>

    <string name="app_name">Asteroides</string>

    <string name="action_settings"> Configuración </string>

</resources>

Recursos alternativos

Una aplicación Android va a poder ser ejecutada en una gran variedad de dispositivos. El tamaño de pantalla, la resolución o el tipo de entradas puede variar mucho de un dispositivo a otro. Por otra parte, nuestra aplicación ha de estar preparada para diferentes modos de funcionamiento, como el modo “automóvil” o el modo “noche”, y para poder ejecutarse en diferentes idiomas.

A la hora de crear la interfaz de usuario, hemos de tener en cuenta todas estas circunstancias. Afortunadamente, la plataforma Android nos proporciona una herramienta de gran potencia para resolver este problema: el uso de los recursos alternativos.

Práctica: Recursos alternativos en Mis Lugares

1. Ejecuta la aplicación Mis Lugares.

2. Los teléfonos móviles basados en Android permiten cambiar la configuración en apaisado y en vertical. Para conseguir este efecto con el emulador pulsa el botón . Si, usas un dispositivo con pantalla pequeña, puedes observar que el resultado de la vista que acabas de diseñar en vertical, no queda todo lo bien que desearíamos.

Para resolver este problema Android te permite diseñar una vista diferente para la configuración horizontal y otra para vertical.

3. Pulsa con el botón derecho sobre la carpeta res/layout y selecciona New > Layout resorce file. Aparecerá una ventana donde has de rellenar en File name: content_main, en Available qualifiers: selecciona Orientation y pulsa en el botón >>. En el desplegable Screen orientation: selecciona Landscape. Pulsa en OK. Observa como ahora hay dos recursos para el fichero content_main.xml. El primero es el recurso por defecto mientras que el segundo es el que se uasrá cuando el dispositivo esté en orientación Landscape.