Register now for Android Dev Summit 2019!

Cómo crear una interfaz de usuario sencilla

En esta lección, aprenderás a usar el editor de diseño de Android Studio para crear un diseño que incluya un cuadro de texto y un botón. En la siguiente sección, aprenderás a hacer que la app envíe el contenido del cuadro de texto a otra actividad cuando se presiona el botón.

Figura 1: Captura de pantalla del diseño final

La interfaz de usuario para una app de Android se crea mediante una jerarquía de diseños (objetos ViewGroup) y widgets (objetos View). Los diseños son contenedores que controlan cómo se posicionan las vistas secundarias en la pantalla. Los widgets son componentes de la IU, como los botones y los cuadros de texto.

Figura 2: Ilustración de cómo los objetos ViewGroup forman ramas en el diseño y contienen objetos View

Android proporciona un vocabulario XML para las clases ViewGroup y View, por lo que la mayor parte de tu IU se define en archivos XML. Sin embargo, el propósito de esta lección no es enseñarte a escribir en lenguaje XML, sino mostrarte cómo crear diseños con el editor de diseño de Android Studio, el cual permite crearlos fácilmente al arrastrar y soltar vistas.

En esta lección, se asume que usas Android Studio 3.0 o versiones posteriores y que seguiste las indicaciones de las lecciones anteriores para crear tu proyecto de Android.

Cómo abrir el editor de diseño

Para comenzar, configura tu lugar de trabajo de la siguiente manera:

  1. En la ventana Proyecto de Android Studio, abre app > res > diseño > activity_main.xml.
  2. Para hacer más espacio para el editor de diseño, oculta la ventana Proyecto al seleccionar Vista > Ventanas de herramientas > Proyecto (o al hacer clic en Proyecto  en el lado izquierdo de Android Studio).
  3. Si en tu editor se muestra el código fuente XML, haz clic en la pestaña Diseño en la parte inferior de la ventana.
  4. Haz clic en Seleccionar superficie de diseño  y selecciona Plano.
  5. Haz clic en Mostrar  en la barra de herramientas del editor de diseño y asegúrate de que la opción Mostrar restricciones esté marcada.
  6. Asegúrate de que la opción de conexión automática esté desactivada. La información sobre la herramienta en la barra de herramientas debe mostrar Activar conexión automática  (porque esta opción está desactivada actualmente).
  7. Haz clic en Márgenes predeterminados  en la barra de herramientas y selecciona 16 (también podrás ajustar los márgenes de cada vista más adelante).
  8. Haz clic en Dispositivo para vista previa  en la barra de herramientas y selecciona 5.5, 1440 × 2560, 560 dpi (Pixel XL).

Ahora tu editor deberá verse como en la figura 3.

Figura 3: activity_main.xml en el editor de diseño

Para obtener información adicional, consulta la introducción al editor de diseño.

En la ventana Árbol de componentes de la parte inferior izquierda, se muestra la jerarquía de vistas del diseño. En este caso, la vista raíz es un ConstraintLayout que contiene solo un objeto TextView.

ConstraintLayout es un diseño que define la posición de cada vista a partir de restricciones sobre el diseño principal y las vistas secundarias. De esta manera, puedes crear tanto diseños simples como complejos con una jerarquía de vista plana. Es decir, no se necesitan los diseños anidados (un diseño dentro de otro, como se muestra en la Figura 2), lo que puede aumentar el tiempo necesario para dibujar la IU.

Figura 4: Ilustración de dos vistas ubicadas dentro de un ConstraintLayout.

Por ejemplo, puedes declarar el siguiente diseño (en la figura 4):

  • La vista A se muestra a 16 dp de la parte superior del diseño primario.
  • La vista A se muestra a 16 dp de la parte izquierda del diseño primario.
  • La vista B se muestra a 16 dp a la derecha de la vista A.
  • La vista B se encuentra alineada con la parte superior de la vista A.

En las siguientes secciones, aprenderás a crear un diseño similar a este.

Cómo agregar un cuadro de texto

Figura 5: El cuadro de texto tiene restricciones respecto de las partes izquierda y superior del diseño principal

  1. Primero debes quitar todo lo hay en el diseño. Para ello, haz clic en TextView en la ventana Árbol de componentes y, luego, presiona Borrar.
  2. En la Paleta, haz clic en Texto para mostrar los controles de texto disponibles.
  3. Arrastra la opción Texto sin formato al editor de diseño y suéltala cerca de la parte superior del diseño. Este es un widget de EditText que acepta entradas de texto sin formato.
  4. Haz clic en la vista del editor de diseño. Ahora podrás ver los controladores para cambiar el tamaño en cada esquina (cuadrados) y los anclajes de restricción en cada lado (círculos).

    Si deseas tener un mayor control, puedes acercar la vista en el editor mediante los botones de la barra de herramientas del editor de diseño.

  5. Mantén presionado el anclaje del lado superior, arrástralo hacia arriba hasta que se acople a la parte superior del diseño y, luego, suéltalo. Esta es una restricción que especifica que la vista debe estar a 16 dp de la parte superior del diseño (porque configuraste los márgenes predeterminados en 16 dp).
  6. Del mismo modo, crea una restricción desde el lado izquierdo de la vista hasta el lado izquierdo del diseño.

El resultado deberá verse como la captura de pantalla de la figura 5.

Cómo agregar un botón

Figura 6: El botón tiene restricciones respecto del lado derecho del cuadro de texto y de su línea de base

  1. En la Paleta, haz clic en Botones.
  2. Arrastra la opción Botón al editor de diseño y suéltala cerca del lado derecho.
  3. Crea una restricción desde el lado izquierdo del botón hasta el lado derecho del cuadro de texto.
  4. Para restringir las vistas en una alineación horizontal, debes crear una restricción entre las líneas de base del texto. Para ello, haz clic en el botón y, luego, en Editar línea de base , que aparece en el editor de diseño justo debajo de la vista seleccionada. El anclaje de línea de base aparece dentro del botón. Mantén presionado este anclaje y arrástralo hacia el anclaje de línea de base que aparece en el cuadro de texto.

El resultado deberá verse como la captura de pantalla de la figura 6.

Nota: También puedes crear una alineación horizontal con el borde superior o inferior, pero el botón incluye relleno alrededor de su imagen. Por lo tanto, la alineación visual será errónea si alineas estas vistas de esa manera.

Cómo cambiar las strings de la IU

Para obtener una vista previa de la IU, haz clic en Seleccionar superficie de diseño  en la barra de herramientas y selecciona Diseño. Ten en cuenta que la entrada de texto se completa previamente con "Nombre" y el botón se etiqueta como "Botón", así que ahora deberás cambiar estas strings.

  1. Abre la ventana Proyecto y, luego, abre app > res > valores > strings.xml.

    Este es un archivo de recursos de strings en el que debes especificar todas tus strings de IU. De esta manera, podrás controlar todas las strings de IU en una única ubicación, lo que hará que sea más fácil encontrarlas, actualizarlas y localizarlas (si se compara con la fijación de strings hard-coded en el código de tu diseño o app).

  2. En la parte superior de la ventana del editor, haz clic en Abrir editor para abrir el editor de traducciones, que proporciona una interfaz sencilla en la que podrás agregar y editar tus strings predeterminadas, y ayuda a mantener organizadas todas las strings traducidas.
  3. Haz clic en Agregar tecla  para crear una nueva string como "texto de sugerencia" para el cuadro de texto.

    Figura 7: Diálogo para agregar una string nueva

    1. En el diálogo Agregar tecla, ingresa "editar_mensaje" para el nombre de la tecla.
    2. Introduce "Ingresar un mensaje" para el valor.
    3. Haz clic en Aceptar.
  4. Agrega otra tecla llamada "botón_enviar" con un valor de "Enviar".

Ahora podrás configurar estas strings para cada vista. Para ello, vuelve al archivo de diseño al hacer clic en activity_main.xml en la barra de pestañas y agrega las strings de la siguiente manera:

  1. Haz clic en el cuadro de texto del diseño y, si la ventana Atributos no está visible del lado derecho, haz clic en Atributos  en el lado derecho de la barra lateral.
  2. Ubica la propiedad text (actualmente establecida en "Nombre") y borra el valor.
  3. Ubica la propiedad hint y, luego, haz clic en Seleccionar un recurso  del lado derecho del cuadro de texto. Dentro del diálogo que aparece, haz doble clic en editar_mensaje en la lista.
  4. Luego, haz clic en el botón del diseño, ubica la propiedad text (actualmente establecida en "Botón"), haz clic en Seleccionar un recurso  y, luego, selecciona botón_enviar.

Cómo configurar un tamaño flexible del cuadro

Si quieres crear un diseño que contemple diferentes tamaños de pantalla, deberás hacer que el cuadro de texto se estire para que llene todo el espacio horizontal que queda (luego de considerar el botón y los márgenes).

Antes de continuar, haz clic en Mostrar  en la barra de herramientas y selecciona Plano.

Figura 8: El resultado que se obtiene cuando seleccionas Crear cadena horizontal

Figura 9: Haz clic para cambiar el ancho a fin de Ajustar a las restricciones

Figura 10: El cuadro de texto se estirará hasta llenar el espacio sobrante

  1. Selecciona ambas vistas (haz clic en una, mantén presionada la tecla Shift y haz clic en la otra), luego haz clic con el botón derecho en cualquiera de las vistas y selecciona Cadena > Crear cadena horizontal. El diseño debería aparecer como se muestra en la Figura 8.

    Una cadena es una restricción bidireccional entre dos o varias vistas que te permite organizar las vistas encadenadas de forma simultánea.

  2. Selecciona el botón y abre la ventana Atributos. Con el inspector de vistas de la parte superior de la ventana Atributos, establece el margen derecho en 16.
  3. Ahora, haz clic en el cuadro de texto para ver sus atributos. Haz doble clic en el indicador de ancho de manera que se establezca en Ajustar a las restricciones, como se indica en la leyenda 1 de la Figura 9.

    La opción "Ajustar a las restricciones" implica que el acho se expande para cumplir con los márgenes y las restricciones horizontales establecidos. Por lo tanto, el cuadro de texto se estirará para rellenar el espacio horizontal (luego de considerar el botón y todos los márgenes).

El diseño quedará listo y deberá tener el aspecto de la figura 10.

Si te parece que tu diseño no quedó como esperabas, haz clic en el vínculo que aparece debajo para ver cómo debería verse tu XML y compararlo con lo que ves en la pestaña Texto. (No te preocupes si tus atributos aparecen en un orden diferente, no es un error).

Para obtener más información sobre las cadenas y todo lo que puedes hacer con ConstraintLayout, lee Cómo compilar una IU receptiva con ConstraintLayout.

Cómo ejecutar la app

Si ya instalaste la app en el dispositivo en la lección anterior, solo debes hacer clic en Aplicar cambios  en la barra de herramientas para actualizar la app con el nuevo diseño. O bien, haz clic en Ejecutar  para instalar y ejecutar la app.

El botón todavía no tiene funciones. Para iniciar otra actividad cuando se presiona el botón, continúa con la siguiente lección.