Crear una Interfaz de Usuario

En esta lección, aprenderás a crear una interfaz de usuario mediante un layout en XML que incluirá un campo de texto y un botón. En la siguiente lección, tu app realizará la siguiente tarea: cuando el usuario presione el botón, el contenido del campo de texto será enviado a otra actividad.

La interfaz de usuario gráfica de una app Android se construye usando una jerarquía de Vistas (View) y Grupos de vistas (ViewGroup). Las View son normalmente widgets de la UI (interfaz de usuario) como botones o campos de texto. Los ViewGroup son contenedores invisibles de vistas que definen como las vistas dentro de ellos (vistas hijas) se ordenan, por ejemplo siendo una lista vertical o una lista en cuadrícula.

Android proporciona un vocabulario XML que corresponde a las subclases de View y ViewGroup para que puedas definir tu UI en XML usando una jerarquía de elementos de la UI.

Los layouts son subclases de los ViewGroup. En este ejercicio, trabajarás con LinearLayout.

Crear un Linear Layout

1. En Android Studio, desde el directorio res/layout/, abre el archivo activity_my.xml.
   • La plantilla BlankActivity que elegiste cuando creaste este proyecto incluye el archivo activity_my.xml con un RelativeLayout como vista raíz y una vista hija TextView.
2. En el panel Preview, haz clic en el icono Hide para ocultar el panel de previsualización 
   • En Android Studio, cuando abres un archivo layout, lo primero que se muestra es el panel de previsualización. Hacer clic sobre estos elementos dentro del panel, abren las herramientas WYSIWYG en el panel de diseño. Para esta lección, trabajarás directamente sobre el código XML.
3. Borra el <TextView> (TextView)
4. Cambia el <RelativeLayout> a <LinearLayout>
5. Añade el atributo<android:orientation> (orientación) e indica que es “horizontal”.
6. Elimina el atributo android:padding y el atributo tools:context.

El resultado es

<LinearLayout 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:orientation="horizontal" >
</LinearLayout>

LinearLayout es un grupo de vistas (y es una subclase de ViewGroup) que ordena las vistas en su interior en fila india o en línea, ya sea de forma vertical u horizontal, en función de como se especifique en el atributo android:orientation. Cada vista hija de un LinearLayout aparece en el orden en el orden en el que hayas escrito el código XML.

Los atributos android:layout_width y android:layout_height son necesarios para todas las vistas y sirven para especificar el tamaño de dichas vistas.

Como el LinearLayout es la vista raíz, debería llenar todo el área del tamaño de la pantalla, así que es necesario seleccionar tanto la anchura (width) como la altura (height) como "match_parent". Este valor declara que la vista deberñia expandir su altura y anchura hasta encajar con el tamaño de la vista padre.

Para más información sobre las propiedades de un layout, visita la guía sobre Layouts.

Añadir un Campo de Texto

Como cualquier View, debes definir diferentes atributos XML para especificar las propiedades del objeto EditText (EditText).

1. En el archivo activity_my.xml, dentro del elemento <LinearLayout>, define un <EditText> con el atributo id como @+id/edit_message.
2. Define tanto la anchura y altura layout_width y layout_height como wrap_content.
3. Define el atributo hint como un objeto string llamado edit_message.

En definitiva, el elemento <EditText> quedaría como:

<EditText android:id="@+id/edit_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

Los atributos que has añadido al <EditText> son:

• android:id
  • Proporciona una identidad única a la vista para que puedas hacer referencia a la misma desde el código de tu app, ya sea para leer o manipular el objeto (lo verás en la siguiente lección).
  • El signo @ se requiere cuando se hace referencia a un objeto de un recurso desde XML. Es seguido por el tipo de recurso, en este caso id, un slash o barra oblicua y finalmente el nombre del recurso edit_message.
  • El signo más +, antes del tipo de recurso es necesario solo cuando vas a definir un recurso de ID por primera vez. Cuando compiles la app, las herramientas del SDK usan la ID para crear un nuevo recurso de ID en el archivo de tu proyecto gen/R.java, el cual se refiere al elemento EditText. Con el recurso de ID declarado una vez, las otras referencias a esta ID no necesitarán el signo más. Usar este signo es únicamente necesario para especificar un nuevo recurso de ID y no se necesita para recursos concretos como las strings (cadenas de texto) o los layouts. Abajo tienes más información sobre los objetos recurso.
• android:layout_width y android:layout_height
  • En lugar de utilizar tamaños específicos para la anchura y altura, el valor “wrap_content” especifica que la vista debería ser tan grande como sea necesario para ajustarse al tamaño del contenido de su interior. Si en su lugar utilizas "match_parent" el EditText rellenará toda la anchura de la pantalla, porque trataría de ajustarse al tamaño de la vista padre (el LinearLayout que indicamos que tuviese la misma anchura que la pantalla).
• android:hint
  • Sirve para mostrar un texto por defecto cuando el campo de texto está vacío. En lugar de utilizar un texto directamente, se utilizará un recurso de string en un archivo separado definido como "@string/edit_message". Como aún no has definido este recurso, si compilas la app obtendrías un error. Lo arreglaremos en la siguiente lección mediante la definición de un string.

Objetos recurso

Un objeto recurso es un nombre entero único asociado con un recurso de la app, como puede ser un bitmap, un archivo layout o un string.

Cada recurso tiene un objeto recurso correspondiente definido en el archivo de tu proyecto gen/R.java. Puedes utilizar los nombres de objetos en la clase R para referirte a tus IDs de recursos que están asociadas con la vista en la que utilizaste el atributo android:id, el cual te permite referenciar la vista mediante código.

Las herramientas del SDK generan el archivo R.java cada vez que compilas tu app. No deberías modificar jamás este archivo manualmente.

Para más información, visita la guía Proporcionar Recursos.

Nota: Para más información sobre como utilizar la carpeta mipmap, visita Visión General de la Gestión de Proyectos.

Añadir Recursos de String

Por defecto, tu proyecto Android incluye un archivo recurso de strings en res/values/strings.xml. Aquí, puedes añadir una nueva string llamada "edit_message" y darle el valor "Enter a message".

1. En Android Studio, desde el directorio res/values, abre el archivo string.xml.
2. Añade una línea para una string llamada "edit_message" con el valor, "Enter a message".
3. Añade una línea para una string llamada "button_send" con el valor, "Send". Crearás el botón que utiliza esta string en la siguiente sección.
4. Elimina la línea con la string "hello world".

El resultado es:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My First App</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
    <string name="action_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
</resources>

Para el texto en la interfaz de usuario, siempre especifica un string utilizando un recurso. Los recursos de string te permiten gestionar todos los textos en la UI en un mismo sitio, facilitándote encontrar cualquier texto fácilmente parra actualizarlo. Además, puedes utilizar archivos diferentes de strings para proporcionar diferentes idiomas en tu app.

Para más información sobre como utilizar los recursos de strings para ofrecer más idiomas en tu app, visita la lección Soporte de Diferentes Dispositivos.

Añadir un Botón

1. En Android Studio, desde el directorio res/values, abre el archivo activity_my.xml
2. Dentro del <LinearLayout>, define un <Button> detrás del <EditText>.
3. Selecciona los atributos de altura y anchura a "wrap_content" para que el botón se ajuste al texto (e iconos si se diese el caso) en su interior.
4. Define el texto del botón con el atributo android:text; selecciona este valor al recurso de string button_send que definiste en la sección anterior.

El <LinearLayout> debería verse así:

<LinearLayout 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:orientation="horizontal" >
      <EditText
        android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
      <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

Nota: Este botón no necesita el atributo android:id porque no se va le hará referencia desde el código de la actividad.

El layout actualmente está diseñando para que los widgets EditText y Button se ajusten a su contenido como se muestra en la figura 2.

Esto funcionará bien para el botón, pero no se verá demasiado bien en el campo de texto, porque el usuario puede escribir un texto más largo. Lo ideal es que el campo de texto ocupe todo el ancho de la pantalla que no se está utilizando. Puedes hacer esto mediante la propiedad weight dentro de un LinearLayout, la cual puedes especificar utilizando el atributo android:layout_weight.

El valor weight (carga, autoridad o peso), es un número que especifica la cantidad de espacio que cada vista debería utilizar, relativa a la cantidad utilizada por las vistas hermanas. Funcionará como la cantidad de ingredientes en una receta de una bebida: “dos partes de refresco y una parte de sirope” significa que dos tercios son de refresco. Por ejemplo, si tu tienes una vista con un peso de 2 y otra con un peso de 1, la suma de las dos es 3, luego la primera vista ocupará 2/3 del espacio y la secunda ocupará el resto. Si tu añades una tercera vista y le das un peso de 1, la primera vista ahora ocupará 1/2 del espacio (2/4), mientras que las dos restantes ocuparán 1/4.

Por defecto, todas las vistas tienen un peso de 0, así que si especificas un valor mayor de cero para una vista, esa vista llenará todo el espacio sobrante que no es requerido por el resto de vistas.

Modificar la Anchura del Campo de Texto

Para que el EditText ocupe el espacio sobrante en tu layout, sigue los siguientes pasos:

1. En el archivo activity_my.xml, asigna al atributo layout_weight del <EditText> el valor 1.
2. También, asigna al atributo layout_width del <EditText> el valor 0dp.

   <EditText
       android:layout_weight="1"
       android:layout_width="0dp"
       ... />

   Para mejorar la eficiencia del layout cuando especificas el peso, deberías cambiar la anchura del EditText a 0dp. Este ajuste mejora el rendimiento de tu layout, ya que usar "wrap_content" como la anchura requiere que el sistema calcule la anchura la cual es irrelevante porque el valor del peso requiere otro calculo de anchura para rellenar el espacio en blanco.

El resultado final es:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal">
    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

Ejecutar tu App

Este layout se aplica por defecto en la clase Activity que las herramientas del SDK generó cuando creaste el proyecto. Ejecuta tu app con una de las dos opciones siguientes para ver los resultados:

• En Android Studio, desde la barra de herramientas, haz clic en Run 
• En una línea de comandos, dirígete al directorio raíz de tu proyecto Android y ejecuta:

  ant debug
  adb install bin/MyFirstApp-debug.apk

Continúa con la siguiente lección par aprender como presionar un botón, leer el contenido del campo de texto, iniciar otra actividad y más.

Puedes ver más información sobre Crear una interfaz de usuario en la página oficial de Google en inglés pulsando aquí.