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 presiona el botón.

Figura 1: Captura de pantalla del diseño final

La interfaz de usuario (IU) de una app para 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 en formato XML. Sin embargo, en lugar de enseñarte a escribir en ese formato, en esta lección se te mostrará cómo crear un diseño con el editor de Android Studio. El editor de diseño escribe el archivo XML a medida que arrastras y sueltas vistas para compilar un diseño.

En esta lección, se supone que usas Android Studio 3.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:

En la ventana Project, abre app > res > layout > activity_main.xml.
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.
Si el editor muestra la fuente XML, haz clic en la pestaña Design, en la parte superior derecha de la ventana.
Haz clic en (Select Design Surface) y selecciona Blueprint.
Haz clic en (View Options), en la barra de herramientas del editor de diseño y asegúrate de que la opción Show All Constraints esté marcada.
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.
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.
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 elemento 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 de nivel superior y las vistas secundarias. De esta manera, puedes crear diseños simples y complejos con una jerarquía de vistas plana. Este tipo de diseño evita la necesidad de diseños anidados. Un diseño anidado (es decir, 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 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 en las partes izquierda y superior del diseño de nivel superior.

Sigue estos pasos para agregar un cuadro de texto:

Primero debes quitar todo lo que hay en el diseño. Haz clic en TextView, en el panel Component Tree, y presiona la tecla Delete.
En el panel Palette, haz clic en Text para mostrar los controles de texto disponibles.
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.
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 ello, usa los botones de Zoom en la barra de herramientas del editor de diseño.
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, estableciste el valor en 16 dp desde la parte superior del diseño.
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

En el panel Palette, haz clic en Buttons.
Arrastra el widget Button al editor de diseño y suéltalo cerca del lado derecho.
Crea una restricción desde el lado izquierdo del botón hasta el lado derecho del cuadro de texto.
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 . El anclaje de línea de base aparece dentro del botón. Mantén presionado este anclaje y arrástralo hacia el anclaje de la línea de base 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 padding 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 obtener 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:

Abre la ventana Project y, luego, abre app > res > values > strings.xml.
Este es un archivo de recursos de strings 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.
Haz clic en Open editor en la parte superior de la ventana. 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.
Haz clic en (Add Key) para crear una string nueva 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.
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:

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.
Busca la propiedad text, que actualmente está configurada en "Name", y borra el valor.
Busca la propiedad hint y, luego, haz clic en (Pick a Resource), que se encuentra a la derecha del cuadro de texto. En el diálogo que aparece, haz doble clic en la opción edit_message de la lista.
Haz clic en el botón del diseño y ubica su propiedad text, que actualmente está definida como "Button". Luego, haz clic en (Pick a Resource) y selecciona button_send.

Cómo configurar un tamaño flexible para el cuadro de texto

Para crear un diseño que reaccione a distintos tamaños de pantalla, debes hacer que el cuadro de texto se extienda para rellenar 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

Selecciona ambas vistas. Para ello, haz clic en una, mantén presionada la tecla Mayúsculas y, luego, haz clic en la otra vista. 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 (chain) es una restricción bidireccional entre dos o varias vistas que te permite organizar las vistas encadenadas de forma simultánea.
Selecciona el botón y abre la ventana Attributes. Luego, usa Constraint Widget para establecer el margen derecho en 16 dp.
Haz clic en el cuadro de texto para ver sus atributos. Luego, haz clic en el indicador de ancho dos veces para establecerlo en una línea angulada (Match Constraints), como se indica en el texto destacado 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 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 Observa el XML del diseño final 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 Code. No te preocupes si tus atributos aparecen en un orden diferente; no es un error.

Observa el XML del diseño final

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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.myfirstapp.MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:hint="@string/edit_message"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:text="@string/button_send"
        app:layout_constraintBaseline_toBaselineOf="@+id/editText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/editText" />
</androidx.constraintlayout.widget.ConstraintLayout>

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

Ejecuta la app

Si ya instalaste la app en el dispositivo durante 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. También puedes hacer clic en Run 'app' a fin de instalar y ejecutar la app.

El botón todavía no tiene funciones. Para crear otra actividad que comience cuando se presiona el botón, pasa a la lección siguiente.