Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

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. De esta manera, se configura la lección siguiente, en la que puedes obtener información sobre cómo hacer que la app envíe el contenido del cuadro de texto a otra actividad cuando se presione el botón.

Figura 1: Captura de pantalla del diseño final

La interfaz de usuario (IU) de una app de Android se compila como una jerarquía de diseños y widgets. Los diseños son objetos ViewGroup, contenedores que controlan cómo se posicionan sus vistas secundarias en la pantalla. Los widgets son objetos View, componentes de la IU, como 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, en lugar de enseñarte a escribir en formato XML, en esta lección se te mostrará cómo crear un diseño con el editor de diseño de Android Studio. El editor de diseño escribe el archivo XML a medida que arrastras y sueltas las vistas para compilar tu diseño.

En esta lección, se supone que usas Android Studio v3.0 o versiones posteriores y que completaste la sección sobre cómo 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, 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. Para ello, selecciona View > Tool Windows > Project o haz clic en Project a la izquierda de la pantalla 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 selecciona Blueprint.
  5. Haz clic en Show en la barra de herramientas del editor de diseño y asegúrate de que la opción Show All Constraints esté marcada.
  6. Comprueba que la opción de conexión automática esté desactivada. La información sobre la barra de herramientas muestra Enable Autoconnection to Parent cuando la conexión automática está desactivada.
  7. Haz clic en Default Margins en la barra de herramientas y selecciona 16. Si es necesario, puedes ajustar los márgenes para cada vista más adelante.
  8. En la barra de herramientas, haz clic en Device for Preview y selecciona 5.5, 1440 × 2560, 560 dpi (Pixel XL).

El editor de diseño ahora se ve como se muestra en la figura 3.

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

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

En el panel Component Tree en la parte inferior izquierda, se muestra la jerarquía de vistas del diseño. En este caso, la vista de 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 diseños simples y complejos con una jerarquía de vista plana. Este tipo de diseño evita la necesidad de diseños anidados. Un diseño anidado, que es un diseño dentro de otro, como se muestra en la figura 2, 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, que se muestra en la figura 4:

  • La vista A se muestra a 16 dp de la parte superior del diseño de nivel superior.
  • La vista A se muestra a 16 dp de la parte izquierda del diseño de nivel superior.
  • 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, compilarás un diseño similar al de la figura 4.

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 de nivel superior.

Sigue estos pasos para agregar un cuadro de texto:

  1. Primero debes quitar todo lo que hay en el diseño. Haz clic en TextView en el panel Component Tree y, luego, presiona la clave Delete.
  2. En el panel Palette, haz clic en Text para mostrar los controles de texto disponibles.
  3. Arrastra la opción de texto sin formato 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 puedes ver los controladores cuadrados para cambiar el tamaño de la vista en cada esquina y los anclajes de restricciones circulares en cada lado. Si deseas obtener un mejor control, quizás te convenga acercar el editor. Para hacerlo, usa los botones Zoom en la barra de herramientas del editor de diseño.
  5. Mantén presionado el anclaje en la parte superior, arrástralo hasta que se ajuste a la parte superior del diseño y luego suéltalo. De esta manera, se limita la vista dentro del margen predeterminado que se definió. En este caso, establece el valor en 16 dp desde la parte superior del diseño.
  6. Usa el mismo proceso para crear una restricción desde el lado izquierdo de la vista hasta el lado izquierdo del diseño.

El resultado debería verse como en 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 el panel Palette, haz clic en Buttons.
  2. Arrastra el widget Button al editor de diseño y suéltalo 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, crea una restricción entre las líneas de base del texto. Para ello, haz clic con el botón derecho y, luego, selecciona Show Baseline Cómo mostrar la acción del modelo de referencia en el editor de diseño. El anclaje de línea de base aparece dentro del botón. Mantén presionado este anclaje y arrástralo hacia el anclaje de modelo de referencia que se muestra en el cuadro de texto adyacente.

El resultado debería verse como en la figura 6.

Nota: También puedes usar los bordes superiores o inferiores para crear una alineación horizontal. Sin embargo, la imagen del botón incluye relleno a su alrededor, de manera que la alineación visual será incorrecta si se crea de esa manera.

Cómo cambiar las strings de la IU

Para generar una vista previa de la IU, haz clic en Select Design Surface en la barra de herramientas y selecciona Design. Observa que la entrada de texto y la etiqueta del botón están configuradas con los valores predeterminados.

Sigue estos pasos para cambiar las strings de la IU:

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

    Este es un archivo de recursos de string en el que puedes especificar todas tus strings de IU. De esta manera, puedes administrar todas tus strings de IU desde una sola ubicación para que sea más fácil encontrarlas, actualizarlas y localizarlas.

  2. Haz clic en Open editor en la parte superior de la pantalla. Se abrirá el editor de traducciones, que proporciona una interfaz simple para agregar y editar tus strings personalizadas. También te ayuda a mantener organizadas todas tus strings traducidas.
  3. Haz clic en Add Key  para crear una nueva string como "texto de sugerencia" para el cuadro de texto. Se abrirá la ventana que puedes ver en la figura 7.

    Figura 7: Diálogo para agregar una string nueva

    En el cuadro de diálogo Add Key, completa los siguientes pasos:

    1. Escribe "edit_message" en el campo Key.
    2. Introduce "Enter a message" en el campo Default Value.
    3. Haz clic en OK.
  4. Agrega otra tecla llamada "button_send" con un valor de "Send".

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

  1. Haz clic en el cuadro de texto del diseño. Si la ventana Attributes no está visible del lado derecho, haz clic en Attributes en la barra lateral de la derecha.
  2. Busca la propiedad text, que actualmente está definida en "Name", y borra el valor.
  3. Busca la propiedad hint y, luego, haz clic en Pick a Resource , que se encuentra a la derecha del cuadro de texto. En el cuadro de diálogo que aparece, haz doble clic en la opción edit_message de la lista.
  4. Haz clic en el botón del diseño y ubica su propiedad text, que actualmente está definida en "Button". Luego, haz clic en Pick a Resource y selecciona button_send.

Cómo configurar un tamaño flexible del cuadro

Para crear un diseño que reaccione a distintos tamaños de pantalla, debes hacer que el cuadro de texto se extienda para completar todo el espacio horizontal que queda una vez que se tienen en cuenta el botón y los márgenes.

Antes de continuar, haz clic en Select Design Surface en la barra de herramientas y selecciona Blueprint.

Para que el cuadro de texto sea flexible, sigue estos pasos:

Figura 8: El resultado que se obtiene cuando seleccionas Create Horizontal Chain

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. Para ello, haz clic en una, mantén presionada la tecla Mayúsculas y luego haz clic en la otra. A continuación, haz clic con el botón derecho en cualquiera de ellas y selecciona Chains > Create Horizontal Chain. Luego, se muestra un diseño como el de 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 Attributes. Luego, usa el inspector de vistas en la parte superior de la ventana Attributes para establecer el margen derecho en 16 dp.
  3. Haz clic en el cuadro de texto para ver sus atributos. Luego, haz clic en el indicador de ancho dos veces para establecerlo en Match Constraints, como se indica en el texto destacado 1 en 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 extiende hasta llenar el espacio horizontal que queda después del botón y se registran todos los márgenes.

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

Si te parece que tu diseño no quedó como esperabas, haz clic en el vínculo para ver el XML final del diseño a continuación y accederás a una vista de cómo debería verse el XML. Compáralo con lo que ves en la pestaña Text. (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 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 crear otra actividad que comience cuando se presione el botón, pasa a la lección siguiente.