Register now for Android Dev Summit 2019!

Cómo crear una interfaz de usuario sencilla

En esta lección, usarás Android Studio Layout Editor para crear un diseño que incluya un cuadro de texto y un botón. En la próxima lección, harás que la app responda al presionar el botón enviando el contenido del cuadro de texto a otra actividad.

Figura 1: Captura de pantalla del diseño final

La interfaz de usuario para una app de Android se crea usando una jerarquía de diseños (objetos ViewGroup) y widgets (objetos View). Los diseños son contenedores que controlan la manera en que se posicionan sus vistas secundarias en la pantalla. Los widgets son componentes de la IU, como los botones y 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 usando Android Studio Layout Editor, que te permite construirlos fácilmente arrastrando y soltando vistas.

En esta lección, se presupone que usas Android Studio 3.0 o versiones posteriores, y que has seguido las indicaciones de la lección anterior 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 "Project" de Android Studio, abre app > res > layout > activity_main.xml.
  2. A fin de hacer más espacio para el editor de diseño, oculta la ventana Project seleccionando View > Tool Windows > Project (o haciendo clic en Project , a la izquierda de Android Studio).
  3. Si en el editor se muestra el código fuente XML, haz clic en la pestaña Design, en la parte inferior de la ventana.
  4. Haz clic en Select Design Surface y elige Blueprint.
  5. En la barra de herramientas de Layout Editor, haz clic en Show y asegúrate de que la opción Show Constraints esté seleccionada.
  6. Asegúrate de que la opción "Autoconnect" esté desactivada. En la información sobre la herramienta de la barra de herramientas debe aparecer la opción Turn On Autoconnect (porque esta desactivada).
  7. Haz clic en Default Margins , en la barra de herramientas, y selecciona 16 (podrás ajustar el margen para cada vista más adelante).
  8. En la barra de herramientas, haz clic en Device for Preview y selecciona 5.5, 1440 × 2560, 560dpi (Pixel XL).

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

Figura 3: El editor de diseño muestra activity_main.xml.

Para obtener más información, consulta la introducción a Layout Editor.

En la ventana Component Tree 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 únicamente un objeto TextView.

ConstraintLayout es un diseño que define la posición para cada vista a partir de restricciones sobre vistas del mismo nivel y del diseño primario. De esta manera, puedes crear tanto diseños simples como complejos con una jerarquía de vista plana. Es decir, se evita la necesidad de 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 próximas secciones, crearás 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 superior e izquierda del diseño primario

  1. Primero debes quitar lo que ya está en el diseño. Para eso, haz clic en TextView, en la ventana Component Tree, y luego presiona "Delete".
  2. En Palette, haz clic en Text para mostrar los controles de texto disponibles.
  3. Arrastra la opción Plain Text al editor de diseño y suéltala cerca de la parte superior del diseño. Este es un widget 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 un mayor control, puedes acercar la vista en el editor mediante los botones de la barra de herramientas de Layout Editor.

  5. Haz clic sobre el anclaje del lado superior y, sin soltar el botón, arrástralo hacia arriba hasta que se acople a la parte superior del diseño y suéltalo. Eso es una restricción: especifica que la vista debe estar a 16 dp de la parte superior del diseño (ya que 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 Palette, haz clic en Buttons.
  2. Arrastra la opción Button 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. Haz clic en el botón y, luego, en la opción Edit Baseline , que aparece en el editor de diseño, directamente debajo de la vista seleccionada. El anclaje de línea de base aparece dentro del botón. Haz clic sobre este anclaje y, sin soltar el botón, arrástralo hacia el anclaje de línea de base que se muestra 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 usando los bordes superior o inferior, pero el botón incluye relleno alrededor de su imagen. Por ello, la alineación visual será errónea si alineas estas vistas de esa manera.

Cómo cambiar las strings de IU

Para generar una vista previa de la IU, haz clic en Select Design Surface , en la barra de herramientas, y selecciona Design. Ten en cuenta que la entrada de texto se completa previamente con "Name" y el botón lleva la etiqueta "Button". Cambiarás estas strings.

  1. Abre la ventana Project y, luego, app > res > values > strings.xml.

    Este es un archivo de recursos de strings en el que debes especificar todas tus strings de IU. Esto te permite controlar todas las strings de IU en una única ubicación, lo que permite encontrarlas, actualizarlas y localizarlas (si se compara con fijar strings en el código de tu diseño o tu app) más fácilmente.

  2. Haz clic en Open editor, en la parte superior de la ventana del editor. Con esto se abre Translations Editor, que proporciona una interfaz simple para agregar y editar tus strings predeterminadas, y ayuda a mantener organizadas todas tus strings traducidas.
  3. Haz clic en Add Key fin de crear una string nueva como "texto indicado" para el cuadro de texto.

    Figura 7: Diálogo para agregar una string nueva

    1. En el diálogo Add Key, ingresa "edit_message" como el nombre de la clave.
    2. Escribe "Enter a message" como valor.
    3. Haz clic en OK.
  4. Agrega otra clave llamada "button_send" con el valor "Send".

Ahora podrás configurar estas strings para cada vista. Para eso, regresa al archivo de diseño haciendo 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 Attributes no está visible a la derecha, haz clic en Attributes , en la barra lateral derecha.
  2. Ubica la propiedad text (actualmente fijada en "Name") y borra el valor.
  3. Ubica la propiedad hint y haz clic en Pick a Resource , a la derecha del cuadro de texto. Dentro del diálogo que se muestra, haz doble clic en la opción edit_message de la lista.
  4. Ahora haz clic en el botón en el diseño, ubica la propiedad text (configurada como "Button"), haz clic en Pick a Resource y selecciona button_send.

Cómo hacer que el tamaño del cuadro de texto sea flexible

Para crear un diseño que contemple diferentes tamaños de pantallas, ahora harás que el cuadro de texto se estire a fin de llenar todo el espacio horizontal que queda (luego de considerar el botón y los márgenes).

Antes de continuar, haz clic en Show , en la barra de herramientas, y selecciona Blueprint.

Figura 8: El resultado de elegir Create Horizontal Chain

Figura 9: Hacer clic para cambiar el ancho a Match Constraints

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

  1. Selecciona ambas vistas (haz clic en una, mantén presionado mayúscula y haz clic con el mismo botón en la otra) y luego haz clic con el botón derecho en cualquiera de las vistas y selecciona Chain > Create Horizontal Chain. Debería aparecer el diseño tal como se muestra en la figura 8.

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

  2. Selecciona el botón y abre la ventana Attributes. Usando el inspector de vistas de la parte superior de la ventana Attributes, fija el margen derecho en 16.
  3. Ahora, haz clic en el cuadro de texto para ver sus atributos. Haz clic dos veces en el indicador de ancho para fijarlo en Match Constraints, como se indica en la referencia 1 de la figura 9.

    "Match constraints" significa que el ancho se expande para cumplir con la definición de las limitaciones horizontales y los márgenes. Por lo tanto, el cuadro de texto se estirará para llenar 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 se incluye a continuación para ver cómo debería verse tu XML y compararlo con lo que aparece en la pestaña Text. (Si tus atributos aparecen en un orden diferente, no habrá problemas).

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 tu app ya está instalada en el dispositivo de la lección anterior, simplemente haz clic en Apply Changes en la barra de herramientas para actualizar la app con el nuevo diseño. O haz clic en Run 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.