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 de forma secuencial. Todos los codelabs del curso se enumeran en la página de destino de los codelabs de Android Kotlin Fundamentals.

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 de forma secuencial.

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 para Android en Kotlin
• Ejecutar una app para Android en un emulador o en un dispositivo
• Crear 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 con una vista EditText
• Cómo establecer 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 View

Actividades

• Agregar interactividad a la app de AboutMe, que se usó en un codelab anterior
• Agrega un 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 interacción del usuario. Agregarás un campo de apodo, un botón LISTO y una vista de texto para mostrar el apodo. Una vez que el usuario ingresa un apodo y presiona el botón LISTO, la vista de texto se actualiza para mostrar el apodo ingresado. El usuario puede volver a actualizar el apodo presionando la vista de texto.

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

Paso 1: Inicio

1. Si aún no tienes la app de AboutMe de un codelab anterior, descarga el código de partida, AboutMeInteractive-Starter. Este es el mismo código que completaste 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 ningún texto.

Las apps son más interesantes si el usuario puede interactuar con ellas, por ejemplo, si puede ingresar texto. Para aceptar la entrada de texto, Android proporciona un widget de interfaz de usuario (IU) llamado texto de edición. Defines un texto de edición con EditText, una subclase de TextView. Un texto de edición permite al usuario ingresar y modificar la entrada 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 un TextView, se muestra en la parte superior de la lista de elementos de texto en el panel Palette. Debajo de Ab TextView, hay varias vistas de EditText.
   
   En el panel Palette, observa cómo el ícono de TextView muestra las letras Ab sin subrayado. Sin embargo, los íconos de EditText muestran Ab con un guion bajo. El subrayado 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 apropiado (como un teclado en pantalla).
3. Arrastra un texto de edición PlainText al Component Tree y colócalo debajo de name_text y encima de 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 tu app. Sobre la imagen de la estrella, verás un texto de edición con el texto predeterminado "Nombre".
   
   
   

En esta tarea, agregarás un texto de sugerencia, cambiarás la alineación del texto, cambiarás el estilo a NameStyle y establecerás el tipo de entrada para darle estilo a tu vista EditText.

Paso 1: Agrega texto de sugerencia

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

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

Sugerencia: Es una buena práctica mostrar una sugerencia en cada vista de EditText para ayudar a los usuarios a comprender qué entrada se espera para los campos editables.

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 Atributos, quita el valor Name del atributo text. El valor del atributo text debe estar vacío para que se muestre la sugerencia.

Paso 2: Establece 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 y el teclado en pantalla adecuados, según el tipo de entrada establecido.

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 marcado. Puedes seleccionar más de un tipo de entrada.

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

Para los 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 apodo:

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 constar de texto, un ícono o ambos.

En esta tarea, agregarás un botón LISTO en el que el usuario deberá presionar después de ingresar un apodo. El botón intercambia la vista EditText por una vista TextView que muestra el apodo. Para actualizar el apodo, el usuario puede presionar la vista TextView.

Paso 1: Agrega un botón DONE

1. Arrastra un botón desde el panel Palette hasta el Component Tree. Coloca el botón debajo del texto de edición nickname_edit.
   
   
2. Crea un nuevo recurso de cadena llamado done. Asigna a la cadena un valor de Done.

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

3. Usa el panel Attributes para establecer los siguientes atributos en la vista Button recién agregada:

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 principal, LinearLayout.

4. Cambia el diseño a Widget.AppCompat.Button.Colored, que es uno de los diseños 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 color de acento, colorAccent. El color de énfasis 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: Aplica estilo al botón DONE

1. En el panel Attributes, selecciona Layout_Margin > Top para agregar un margen superior. Establece el margen superior en layout_margin, que se define en el archivo dimens.xml.
   
   
   
2. Establece el atributo fontFamily en roboto en el menú desplegable.
   
   
   
3. Cambia a la pestaña Text y verifica el código XML generado 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 del botón 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 HEX en el margen izquierdo del editor de archivos.

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

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

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

Paso 1: Agrega un TextView para el apodo

1. Arrastra una vista de texto desde el panel Palette hasta el Component Tree. Coloca la vista de texto debajo de done_button y encima de star_image.
   
   

2. Usa el panel Attributes para establecer los siguientes atributos para la nueva vista TextView:

Atributo	Valor
id	nickname_text
style	NameStyle
textAlignment	(centro)

Paso 2: Cambia la visibilidad del 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 ningún espacio en el diseño.

1. En el panel Attributes, establece el visibility de la vista de texto nickname_text en gone, porque no quieres que tu app muestre esta vista de texto al principio.
   
   
   
   Observa que, a medida que 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 del diseño.
2. Cambia el valor del atributo text de la vista nickname_text a una cadena vacía.

El código XML generado para este 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 del diseño debería ser similar a la siguiente:

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

El objeto de escucha de clics tiene, de forma genérica, este formato, en el que la vista pasada es la que recibió el clic o la presión.

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

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

• En el diseño en 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 forma programática en el tiempo de ejecución, en onCreate() del Activity, llamando a setOnClickListener. Por ejemplo:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

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

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

• Obtén el texto del texto de edición nickname_edit.
• Configura el texto en la vista de texto nickname_text.
• Oculta el texto de edición y el botó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. Establece el texto en la vista de texto nicknameTextView en el texto que el usuario ingresó en editText, y obténlo de la propiedad text.

nicknameTextView.text = editText.text

5. Oculta la vista del apodo EditText configurando la propiedad visibility de editText en View.GONE.

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

editText.visibility = View.GONE

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

view.visibility = View.GONE

7. Al final de la función addNickname, haz que la vista del apodo TextView sea visible configurando su propiedad visibility en View.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 realizará cuando se presione 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 Button de LISTO . Usa la función findViewById() y llama a setOnClickListener. Pasa una referencia a la función de objeto de escucha de clics, addNickname().

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

En el código anterior, it hace referencia a done_button, que es la vista que se pasa como 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 apodo.

Observa que, incluso después de que el usuario presiona el botón LISTO, el teclado sigue visible. Este comportamiento es el predeterminado.

Paso 3: Oculta 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 quieres 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. Observa que, después de presionar LISTO, el teclado se oculta.

El usuario no puede cambiar el apodo después de presionar el botón LISTO. En la siguiente tarea, harás que la app sea más interactiva y agregarás funcionalidad para que el usuario pueda actualizar el apodo.

En esta tarea, agregarás un objeto de escucha de clics a la vista de texto del apodo. El objeto de escucha de clics oculta la vista de texto del apodo, 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 objeto de escucha de clics llamada updateNickname(view: View) para la vista de texto del apodo.

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, mostrar el botón LISTO y ocultar 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 objeto de escucha de clics, que es updateNickname().

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

5. Ejecuta tu app. Ingresa un sobrenombre, presiona el botón LISTO y, luego, presiona la vista de sobrenombre TextView. Desaparece la vista del sobrenombre y se hacen visibles el texto de edición y el botón LISTO.
   
   
   

Ten en cuenta que, de forma predeterminada, la vista EditText no tiene el enfoque y el teclado no está visible. Al usuario le resulta difícil darse cuenta de que se puede hacer clic en la vista de texto del sobrenombre. En la siguiente tarea, agregarás el enfoque y un estilo a la vista de texto del apodo.

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 TextView del apodo

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 como sugerencia para el usuario de que la vista de texto del apodo se puede hacer clic.

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

2. Ejecuta tu app final. El texto de edición tiene el enfoque, el sobrenombre se muestra en el texto de edición y la vista de texto del sobrenombre tiene un estilo.

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

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 IU al diseño.
• EditText es un elemento de la IU que 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 constar de texto, un ícono o ambos.

Objetos de escucha de clics

• Puedes hacer que cualquier View responda a los toques agregándole un objeto de escucha de clics.
• La función que define el objeto de escucha de clics recibe el View en el que se hizo clic.

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

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

Curso de Udacity:

• Developing Android Apps with 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 actividades para el hogar para los alumnos que trabajan en este codelab como parte de un curso dirigido por un instructor. Depende del instructor hacer lo siguiente:

• Si es necesario, asigna una tarea.
• Comunicarles a los alumnos cómo enviar las actividades para el hogar.
• Califica las actividades para el hogar.

Los instructores pueden usar estas sugerencias en la medida que quieran y deben asignar cualquier otra actividad para el hogar que consideren apropiada.

Si estás trabajando en este codelab por tu cuenta, usa estas actividades para el hogar para probar 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 del 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

No se recomienda proporcionar sugerencias para las vistas EditText porque desorganizan el campo de entrada. ¿Verdadero o falso?

• Verdadero
• Falso

Pregunta 4

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

• Una vista 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 obtener vínculos a otros codelabs de este curso, consulta la página de destino de los codelabs de Conceptos básicos de Kotlin para Android.