Aspectos básicos de Kotlin para Android 02.2: Cómo agregar interactividad del usuario

Este codelab es parte del curso Conceptos básicos de Kotlin para Android. Aprovecharás al máximo este curso si trabajas con los codelabs en secuencia. Todos los codelabs del curso se detallan en la página de destino de codelabs sobre los aspectos básicos de Kotlin para Android.

Estos codelabs forman parte del curso Conceptos básicos de Kotlin para Android. Aprovecharás al máximo este curso si trabajas con los codelabs en secuencia.

Los codelabs de esta serie son los siguientes:

• 2.1 Diseño lineal con el editor de diseño
• 2.2 Cómo agregar interactividad del usuario
• 2.3 Diseño de restricciones con el editor de diseño
• 2.4 Conceptos básicos de la vinculación de datos

Conocimientos que ya deberías tener

• Cómo crear una app básica de Android en Kotlin
• Ejecución de una app para Android en un emulador o dispositivo
• Creación de un diseño lineal con el editor de diseño de Android Studio
• Crear una app simple que use LinearLayout, TextView, ScrollView y un botón con un controlador de clics

Qué aprenderás

• Cómo obtener la entrada del usuario mediante una vista EditText
• Cómo establecer el texto en una vista TextView con el texto de la vista EditText.
• Cómo trabajar con View y ViewGroup
• Cómo cambiar la visibilidad de un objeto View

Actividades

• Agregarás interactividad a la app AboutMe, que es de un codelab anterior.
• Agrega un elemento EditText para que el usuario pueda ingresar texto.
• Agrega un Button y, luego, implementa su controlador de clics.

En este codelab, extenderás la app de AboutMe para agregar la interacción del usuario. Para mostrar el sobrenombre, agrega un campo de sobrenombre, un botón LISTO y una vista de texto. Una vez que el usuario ingrese un sobrenombre y presione el botón LISTO, se actualizará la vista de texto para mostrar el sobrenombre ingresado. El usuario puede presionar la vista de texto para volver a actualizar el sobrenombre.

En esta tarea, agregarás un campo de entrada EditText para permitir que el usuario ingrese un sobrenombre.

Paso 1: Comienza

1. Si todavía no tienes la app AboutMe de un codelab anterior, descarga el código de inicio, AboutMeInteractive-Starter. Es el mismo código que terminaste en un codelab anterior.
2. Abre el proyecto AboutMeInteractive-Starter en Android Studio.
3. Ejecuta la app. Verás una vista de texto del nombre, una imagen de estrella y un segmento largo de texto en una vista de desplazamiento.
   
   
   
   Observa que el usuario no puede cambiar nada de texto.

Las apps son más interesantes si el usuario puede interactuar con ellas, por ejemplo, si puede ingresar texto. Para aceptar entradas de texto, Android proporciona un widget de interfaz de usuario (IU) llamado edición de texto. Para definir un texto de edición, utiliza EditText, una subclase de TextView. Un texto de edición permite al usuario ingresar y modificar entradas de texto, como se muestra en la siguiente captura de pantalla.

Paso 2: Agrega un EditText

1. En Android Studio, abre el archivo de diseño activity_main.xml en la pestaña Design.
2. En el panel Palette, haz clic en Text.
   
   
   
   Ab TextView, que es una TextView, se muestra en la parte superior de la lista de elementos de texto del panel Palette. Debajo de Ab TextView hay varias vistas EditText.
   
   En el panel Palette, observa cómo el ícono de TextView muestra las letras Ab sin guion bajo. Sin embargo, los íconos EditText muestran Ab con un guion bajo. El guion bajo indica que la vista se puede editar.
   
   Para cada una de las vistas EditText, Android establece diferentes atributos, y el sistema muestra el método de entrada táctil correspondiente (como un teclado en pantalla).
3. Arrastra un elemento de texto de PlainText al árbol de componentes y colócalo debajo del name_text y arriba del star_image.
   
   
   
4. Usa el panel Attributes para establecer los siguientes atributos en la vista EditText.

Atributo	Valor
id	nickname_edit
layout_width	match_parent (predeterminado)
layout_height	wrap_content (predeterminado)

5. Ejecuta la app. Arriba de la imagen en estrella, verás un texto de edición con un texto predeterminado "Name".
   
   
   

En esta tarea, diseñarás tu vista de EditText agregando una sugerencia, cambiando la alineación del texto, cambiando el estilo a NameStyle y configurando el tipo de entrada.

Paso 1: Agrega texto de sugerencia

1. Agrega un nuevo recurso de strings para la sugerencia en el archivo string.xml.

<string name="what_is_your_nickname">What is your Nickname?</string>

Sugerencia: Se recomienda mostrar una sugerencia en cada vista EditText para ayudar a los usuarios a comprender qué entrada se espera en los campos que se pueden editar.

2. Usa el panel Attributes para establecer los siguientes atributos en la vista EditText:

Atributo	Valor
style	NameStyle
textAlignment	(centro)
hint	@string/what_is_your_nickname

3. En el panel Attributes, quita el valor Name del atributo text. El valor del atributo text debe estar vacío para que se muestre la sugerencia.

Paso 2: Configure el atributo inputType

El atributo inputType especifica el tipo de entrada que los usuarios pueden ingresar en la vista EditText. El sistema Android muestra el campo de entrada correspondiente y el teclado en pantalla, según el tipo de entrada configurado.

Para ver todos los tipos de entrada posibles, en el panel Attributes, haz clic en el campo inputType o en los tres puntos ... junto al campo. Se abrirá una lista que muestra todos los tipos de entrada que puedes usar, con el tipo de entrada activo actualmente. Puedes seleccionar más de un tipo de entrada.

Por ejemplo, para contraseñas, usa el valor textPassword. El campo de texto oculta la entrada del usuario.

Para números de teléfono, usa el valor phone. Se muestra un teclado numérico y el usuario solo puede ingresar números.

Establece el tipo de entrada para el campo de sobrenombre:

1. Establece el atributo inputType en textPersonName para el texto de edición nickname_edit.
2. En el panel Component Tree, observa una advertencia de autoFillHints. Esta advertencia no se aplica a esta app y está fuera del alcance de este codelab, por lo que puedes ignorarla. (Si quieres obtener más información sobre el autocompletado, consulta Cómo optimizar tu app para el autocompletado).
   
3. En el panel Attributes, verifica los valores de los siguientes atributos de la vista EditText:

Atributo	Valor
id	nickname_edit
layout_width	match_parent (predeterminado)
layout_height	wrap_content (predeterminado)
style	@style/NameStyle
inputType	textPersonName
hint	"@string/what_is_your_nickname"
text	(vacío)

Un Button es un elemento de la IU que el usuario puede presionar para realizar una acción. Un botón puede ser texto, un ícono o ambos, y un ícono.

En esta tarea, agregarás el botón LISTO, que el usuario presiona después de escribir un sobrenombre. El botón cambia la vista EditText por una vista TextView que muestra el sobrenombre. Para actualizar el sobrenombre, el usuario puede presionar la vista TextView.

Paso 1: Agrega un botón LISTO

1. Arrastra un botón del panel Palette a Component Tree. Coloca el botón debajo del texto nickname_edit edit.
   
   
2. Crea un nuevo recurso de strings llamado done. Asígnale a la string un valor de Done.

<string name="done">Done</string>

3. Usa el panel Attributes para configurar los siguientes atributos en la vista Button agregada recientemente:

Atributo	Valores
id	done_button
text	@string/done
layout_gravity	center_horizontal
layout_width	wrap_content

El atributo layout_gravity centra la vista en su diseño superior, LinearLayout.

4. Cambia el estilo a Widget.AppCompat.Button.Colored, que es uno de los estilos predefinidos que proporciona Android. Puedes seleccionar el estilo en el menú desplegable o en la ventana Resources.
   
   
   
   Este estilo cambia el color del botón al de acento, colorAccent. El color de los elementos destacados se define en el archivo res/values/colors.xml.
   
   
   

El archivo colors.xml contiene los colores predeterminados de tu app. Puedes agregar nuevos recursos de color o cambiar los recursos de color existentes en tu proyecto, según los requisitos de tu app.

Archivo colors.xml de muestra:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

Paso 2: Personaliza el botón LISTO

1. En el panel Attributes, agrega un margen superior seleccionando Layout_Margin > Top. Establece el margen superior en layout_margin, que se define en el archivo dimens.xml.
   
   
   
2. Establece el atributo fontFamily en roboto desde el menú desplegable.
   
   
   
3. Ve a la pestaña Text y verifica el código XML que se generó para el botón recién agregado.
   

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

Paso 3: Cambia el recurso de color

En este paso, cambiarás el color de los elementos destacados para que coincida con la barra de la app de tu actividad.

1. Abre res/values/colors.xml y cambia el valor de colorAccent a #76bf5e.
   

<color name="colorAccent">#76bf5e</color>

Puedes ver el color correspondiente al código hexadecimal, en el margen izquierdo del editor de archivos.

Observa el cambio de color del botón en el editor de diseño.

2. Ejecuta la app. Deberías ver un botón con estilo LISTO debajo del texto de edición.
   
   
   

Después de que el usuario ingrese un sobrenombre y presione el botón LISTO, se mostrará en una vista de TextView. En esta tarea, agregarás una vista de texto con un fondo de color. La vista de texto muestra el sobrenombre del usuario sobre la star_image.

Paso 1: Agrega un elemento TextView para el sobrenombre

1. Arrastra una vista de texto del panel Palette al árbol de componentes. Coloca la vista de texto debajo del done_button y arriba de la star_image.
   
   

2. Usa el panel Attributes a fin de configurar los siguientes atributos para la vista nueva TextView:

Atributo	Valor
id	nickname_text
style	NameStyle
textAlignment	(centro)

Paso 2: Cambia la visibilidad de TextView

Puedes mostrar u ocultar vistas en tu app con el atributo visibility. Este atributo toma uno de los siguientes tres valores:

• visible: La vista es visible.
• Invisible: Oculta la vista, pero esta sigue ocupando espacio en el diseño.
• gone: Oculta la vista, y esta no ocupa espacio en el diseño.

1. En el panel Attributes, establece el elemento visibility de la vista de texto nickname_text en gone, ya que no quieres que tu app muestre esta vista de texto al principio.
   
   
   
   Observa que, cuando cambias el atributo en el panel Attributes, la vista nickname_text desaparece del editor de diseño. La vista está oculta en la vista previa de diseño.
2. Cambia el valor del atributo text de la vista nickname_text a una string vacía.

El código XML generado para este objeto TextView debería ser similar al siguiente:

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

La vista previa de diseño debería tener el siguiente aspecto:

Un controlador de clics en el objeto Button (o en cualquier vista) especifica la acción que se realizará cuando se presiona el botón (ver). La función que controla el evento de clic debe implementarse en el Activity que aloja el diseño con el botón (ver).

El objeto de escucha de clics tiene genéricamente este formato, en el que la vista pasada es la vista que recibió el clic o el toque.

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

Puedes adjuntar la función de escucha de clics a los eventos de clic de botón de dos maneras:

• En el diseño XML, puedes agregar el atributo android:onClick al elemento <Button>. Por ejemplo:

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

O

• Puedes hacerlo de manera programática en el entorno de ejecución, en onCreate() de Activity, llamando a setOnClickListener. Por ejemplo:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

En esta tarea, agregarás un objeto de escucha de clics para el elemento done_button de manera programática. Agrega el objeto de escucha de clics en la actividad correspondiente, que es MainActivity.kt.

La función de objeto de escucha de clics, llamada addNickname, hará lo siguiente:

• Obtén el texto del texto de edición nickname_edit.
• Establece el texto en la vista de texto nickname_text.
• Oculta el texto y el botón de edición.
• Muestra el sobrenombre TextView.

Paso 1: Agrega un objeto de escucha de clics

1. En Android Studio, en la carpeta java, abre el archivo MainActivity.kt.
2. En MainActivity.kt, dentro de la clase MainActivity, agrega una función llamada addNickname. Incluye un parámetro de entrada llamado view de tipo View. El parámetro view es el View en el que se llama a la función. En este caso, view será una instancia de tu botón LISTO.

private fun addNickname(view: View) {
}

3. Dentro de la función addNickname, usa findViewById() para obtener una referencia al texto de edición nickname_edit y a la vista de texto nickname_text.

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

4. Configura el texto de la vista de texto nicknameTextView para el texto que el usuario ingresó en editText y obtenlo de la propiedad text.

nicknameTextView.text = editText.text

5. Para ocultar la vista de sobrenombre EditText, configura la propiedad visibility de editText como View.GONE.

En una tarea anterior, cambiaste la propiedad de visibility con el editor de diseño. Aquí hace lo mismo de manera programática.

editText.visibility = View.GONE

6. Para ocultar el botón LISTO, configura la propiedad visibility como View.GONE. Ya tienes la referencia del botón como el parámetro de entrada de la función, view.

view.visibility = View.GONE

7. Al final de la función addNickname, configura la propiedad visibility como View.VISIBLE para hacer que la vista del sobrenombre TextView sea visible.

nicknameTextView.visibility = View.VISIBLE

Paso 2: Adjunta el objeto de escucha de clics al botón LISTO

Ahora que tienes una función que define la acción que se debe realizar cuando se presiona el botón LISTO, debes adjuntar la función a la vista Button.

1. En MainActivity.kt, al final de la función onCreate(), obtén una referencia a la vista LISTO Button. Usa la función findViewById() y llama a setOnClickListener. Pasa una referencia a la función de escucha de clics, addNickname().

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

En el código anterior, it hace referencia al done_button, que es la vista pasada como el argumento.

2. Ejecuta la app, ingresa un sobrenombre y presiona el botón LISTO. Observa cómo el texto de edición y el botón se reemplazan por la vista de texto del sobrenombre.

Ten en cuenta que, incluso después de que el usuario presiona el botón LISTO, el teclado permanece visible. Este es el comportamiento predeterminado.

Paso 3: Ocultar el teclado

En este paso, agregarás código para ocultar el teclado después de que el usuario presione el botón LISTO.

1. En MainActivity.kt, al final de la función addNickname(), agrega el siguiente código. Si deseas obtener más información sobre cómo funciona este código, consulta la documentación de hideSoftInputFromWindow.

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

2. Vuelve a ejecutar tu app. Ten en cuenta que, después de presionar LISTO, el teclado estará oculto.

El usuario no puede cambiar el sobrenombre después de que presiona el botón LISTO. En la próxima tarea, agregarás más funcionalidad a la app y agregarás funcionalidad para que el usuario pueda actualizar el sobrenombre.

En esta tarea, agregarás un objeto de escucha de clics a la vista de texto del sobrenombre. El objeto de escucha de clics oculta la vista de texto del sobrenombre, muestra el texto de edición y muestra el botón LISTO.

Paso 1: Agrega un objeto de escucha de clics

1. En MainActivity, agrega una función de escucha de clics llamada updateNickname(view: View) para la vista de texto del sobrenombre.

private fun updateNickname (view: View) {
}

2. Dentro de la función updateNickname, obtén una referencia al texto de edición nickname_edit y una referencia al botón LISTO. Para ello, usa el método findViewById().

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

3. Al final de la función updateNickname, agrega código para mostrar el texto de edición, muestra el botón LISTO y oculta la vista de texto.

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

4. En MainActivity.kt, al final de la función onCreate(), llama a setOnClickListener en la vista de texto nickname_text. Pasa una referencia a la función de escucha de clics, que es updateNickname().

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

5. Ejecuta la app. Ingresa un sobrenombre, presiona el botón LISTO y, luego, presiona la vista de sobrenombre TextView. La vista de sobrenombre desaparece y el texto editado y el botón LISTO se vuelven visibles.
   
   
   

Ten en cuenta que, de forma predeterminada, la vista EditText no tiene foco, y el teclado no es visible. Es difícil para el usuario descubrir que se puede hacer clic en la vista de texto del sobrenombre. En la siguiente tarea, agregarás el foco y un estilo a la vista de texto del sobrenombre.

Paso 2: Establece el enfoque en la vista EditText y muestra el teclado

1. Al final de la función updateNickname, establece el enfoque en la vista EditText. Usa el método requestFocus().

// Set the focus to the edit text.
editText.requestFocus()

2. Al final de la función updateNickname, agrega código para que el teclado sea visible.

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

Paso 3: Agrega un color de fondo a la vista de TextView del sobrenombre

1. Establece el color de fondo de la vista de texto nickname_text en @color/colorAccent y agrega un padding inferior de @dimen/small_padding. Estos cambios servirán para indicarle al usuario que se puede hacer clic en la vista de texto del sobrenombre.

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

2. Ejecuta la app final. Se enfoca el texto de edición, se muestra el sobrenombre en el texto de edición y se le da estilo a la vista de texto del sobrenombre.

Ahora, muéstrale a tu amigo tu app de AboutMe interactiva.

Proyecto de Android Studio: AboutMeInteractive

• La herramienta Layout Editor de Android Studio es un editor de diseño visual. Puedes usar el editor de diseño para compilar el diseño de tu app arrastrando elementos de la IU al diseño.
• EditText es un elemento de la IU que le permite al usuario ingresar y modificar texto.
• Un Button es un elemento de la IU que el usuario puede presionar para realizar una acción. Un botón puede ser texto, un ícono o ambos, y un ícono.

Objetos de escucha de clics

• Puedes hacer que cualquier View responda cuando se lo presiona agregando un objeto de escucha de clics.
• La función que define el objeto de escucha de clics recibe el View en el que se hace clic.

Puedes adjuntar una función de escucha de clics a un objeto View de dos maneras:

• En el diseño XML, agrega el atributo android:onClick al elemento <View>.
• De manera programática, usa la función setOnClickListener(View.OnClickListener) en el elemento Activity correspondiente.

Curso de Udacity:

• Cómo desarrollar apps para Android con Kotlin

Documentación para desarrolladores de Android:

• Cómo compilar una IU con un editor de diseño
• Button
• EditText
• Tipos de entrada
• Cómo controlar las entradas del teclado
• Estilos y temas

En esta sección, se enumeran las posibles tareas para los alumnos que trabajan con este codelab como parte de un curso que dicta un instructor. Depende del instructor hacer lo siguiente:

• Si es necesario, asigna la tarea.
• Informa a los alumnos cómo enviar los deberes.
• Califica las tareas.

Los instructores pueden usar estas sugerencias lo poco o lo que quieran, y deben asignar cualquier otra tarea que consideren apropiada.

Si estás trabajando en este codelab por tu cuenta, usa estas tareas para poner a prueba tus conocimientos.

Responde estas preguntas

Pregunta 1

¿Cuál es la subclase de EditText?

• View
• LinearLayout
• TextView
• Button

Pregunta 2

¿Cuál de los siguientes valores de atributo visibility, si se configura en una vista, hace que la vista esté oculta y no ocupe espacio en el diseño?

• visible
• Invisible
• gone
• hide

Pregunta 3

Para las vistas de EditText, no es una buena práctica proporcionar sugerencias, ya que estas obstruyen el campo de entrada. ¿Verdadero o falso?

• Verdadero
• Falso

Pregunta 4

¿Cuál de estas afirmaciones sobre las vistas Button es verdadera?

• Una vista de Button es un grupo de vistas.
• Solo puedes tener tres vistas Button por pantalla.
• Las vistas Button son elementos en los que se puede hacer clic y, cuando lo haces, el objeto de escucha de clics adjunto realiza una acción.
• Button es una extensión de ImageView.

Comienza la siguiente lección: 2.3: Diseño de restricciones con el editor de diseño

Para ver vínculos a otros codelabs de este curso, consulta la página de destino de codelabs sobre aspectos básicos de Kotlin para Android.