Android Developers

Creación de una interfaz de usuario sencilla

En esta lección, aprenderás a:

Abrir el editor de diseño

Agregar un cuadro de texto
Agregar un botón
Cambiar las strings de IU
Hacer que el tamaño del cuadro de texto sea exible

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 lección siguiente, harás que la app responda al tocar el botón enviando el contenido del
cuadro de texto a otra activity.

Figura 1: Captura de pantalla del diseño nal.

La interfaz de usuario para una app de Android se construye usando una jerarquía de diseños (objetos ViewGroup
(https://developer.android.com/reference/android/view/ViewGroup.html)) y widgets (objetos View
(https://developer.android.com/reference/android/view/View.html)). Los diseños son contenedores invisibles 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 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 de ne
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.

Abrir el editor de diseño

Nota: En esta lección, se presupone que usas Android Studio 2.3 o versiones posteriores y que has seguido las
indicaciones de la lección anterior para crear tu proyecto de Android
(https://developer.android.com/training/basics/ rstapp/creating-project.html).

Para comenzar, con gura tu lugar de trabajo de la siguiente manera:

1. En la ventana Project de Android Studio, abre app > res > layout > activity_main.xml.

2. Para hacer más espacio para el editor de diseño, oculta la ventana Project seleccionando View > Tool Windows >
Project (o haciendo clic en Project 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 Design en la parte inferior de la ventana.

4. Haz clic en Show Blueprint para que solo se muestre el diseño de plano técnico.

5. Asegúrate de que Show Constraints esté activada. En la información sobre la herramienta de la barra de
herramientas debe aparecer la opción Hide Constraints (ya que ahora se muestran las restricciones).

6. Asegúrate de que Autoconnect esté desactivada. En la información sobre la herramienta de la barra de

herramientas debe aparecer la opción Turn On Autoconnect (ya que ahora está desactivada).

7. Haz clic en Default Margins en la barra de herramientas y selecciona 16 (puedes ajustar el margen para cada
vista posteriormente).
8. Haz clic en Device in Editor en la barra de herramientas y selecciona Pixel XL.

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

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

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 de ne 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 gura
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 gura 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 secciones siguientes, crearás un diseño similar a este.

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 Suprimir.

2. Desde la ventana Palette, a la izquierda, haz clic en Text en el subpanel izquierdo y luego arrastra Plain Text hacia el
editor de diseño y suéltalo cerca de la parte superior del diseño. Este es un widget EditText
(https://developer.android.com/reference/android/widget/EditText.html) que acepta entradas de texto sin formato.

3. 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 hasta el 75% o un valor más alto mediante los
botones de la barra de herramientas.

4. 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; especi ca que la vista debe estar a 16 dp de la parte superior
del diseño (ya que con guraste los márgenes predeterminados en 16 dp).

5. 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 gura 5.

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. Desde la ventana Palette, haz clic en Widgets en el subpanel izquierdo, arrastra Button hacia el editor de diseño y
suéltalo cerca del lado derecho.

2. Crea una restricción desde el lado izquierdo del botón hasta el lado derecho del cuadro de texto.

3. Para restringir las vistas en una alineación horizontal, debes crear una restricción entre las líneas de base del texto.
Para eso, haz clic en el botón y luego en Baseline Constraint , que se muestra justo debajo de la vista
seleccionada en el editor de diseño. 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 gura 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.

Cambiar las strings de IU

Haz clic en Show Design en la barra de herramientas para obtener una vista previa de la IU. 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 abre app > res > values > strings.xml.

Este es un archivo de recursos de strings (https://developer.android.com/guide/topics/resources/string-resource.html) en el que

debes especi car 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 jar 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
(https://developer.android.com/studio/write/translations-editor.html), que proporciona una interfaz simple para agregar y editar
tus strings predeterminadas, y ayuda a mantener organizadas todas tus strings traducidas.

3.

Figura 7: Diálogo para agregar una string nueva.

Haz clic en Add Key a n de crear una string nueva como “texto indicado” para el cuadro de texto.

1. Escribe “edit_message” como nombre para 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 con gurar 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 Properties no está visible a la derecha, haz clic en
Properties en la barra lateral derecha.

2. 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 edit_message en la lista.

3. Mientras sigues viendo las propiedades del cuadro de texto, borra también el valor para la propiedad text
(actualmente jado en “Name”).

4. Ahora haz clic en el botón en el diseño, ubica la propiedad text, haz clic en Pick a Resource y selecciona
button_send.
Hacer que el tamaño del cuadro de texto sea exible
Para crear un diseño que contemple diferentes tamaños de pantallas, ahora harás que el cuadro de texto se estire a n
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 Blueprint en la barra de herramientas del editor de diseño.

Figura 8: Resultado al hacer clic en Center Horizontally.

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 con el botón primario en una, mantén presionado Shift y haz clic en la otra) y
luego haz clic con el botón secundario en cualquiera de las vistas y selecciona Center Horizontally.

Aunque tu objetivo no es centrar las vistas, esta es una forma rápida de crear una cadena entre las dos. Una cadena
es una restricción bidireccional entre dos o más vistas que te permite organizar las vistas encadenadas de forma
simultánea. Sin embargo, esto también quita los márgenes horizontales, por lo que volverás a cambiarlos.

2. Selecciona el botón y abre la ventana Properties. Fija los márgenes derecho e izquierdo en 16.

3. Selecciona el cuadro de texto y ja solo el margen izquierdo en 16.

4. Mientras sigues viendo las propiedades del cuadro de texto, haz clic en el indicador de ancho hasta que quede
jado en Match Constraints, como se indica en la referencia 1 de la gura 9.

El valor “Match constraints” implica que las restricciones horizontales y los márgenes determinarán el ancho. 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á hecho y deberá tener el aspecto de la gura 10.

Si te parece que tu diseño no quedó como se esperaba, haz clic en el vínculo que sigue para ver cómo debería verse tu
XML y compararlo con lo que ves en la pestaña Text. (Si tus atributos aparecen en un orden diferente, no habrá
problemas).

Ver el XML del diseño nal

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.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_marginTop="16dp"
android:ems="10"
android:hint="@string/edit_message"
android:inputType="textPersonName"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button"
android:layout_marginLeft="16dp" />

<Button
 android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send"
app:layout_constraintBaseline_toBaselineOf="@+id/editText"
app:layout_constraintLeft_toRightOf="@+id/editText"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>

Para obtener más información sobre las cadenas y todo lo que puedes hacer con ConstraintLayout, lee Compilar una
IU receptiva con ConstraintLayout (https://developer.android.com/training/constraint-layout/index.html).

Ejecutar la app
Si tu app ya está instalada en el dispositivo de la lección anterior (https://developer.android.com/training/basics/ rstapp/running-

app.html), simplemente haz 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 para instalar y ejecutar la app.

El botón todavía no tiene funciones. Para iniciar otra activity cuando se toca el botón, continúa con la siguiente lección
(https://developer.android.com/training/basics/ rstapp/starting-activity.html).