Aspectos básicos de Kotlin para Android 02.1: Diseño lineal con el editor de diseño

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.

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
• Los aspectos básicos de LinearLayout
• Crear una app simple que use LinearLayout y TextView

Qué aprenderás

• Cómo trabajar con View y ViewGroup
• Cómo organizar las vistas en un Activity con LinearLayout.
• Cómo usar ScrollView para mostrar el contenido por el que es posible desplazarse
• Cómo cambiar la visibilidad de un objeto View
• Cómo crear y usar recursos de dimensiones y strings.
• Cómo crear un diseño lineal con el editor de diseño de Android Studio

Actividades

• Crea la app About.
• Agrega un elemento TextView al diseño para mostrar tu nombre.
• Agrega un ImageView.
• Agrega un elemento ScrollView para mostrar texto desplazable.

En la app de AboutMe, puedes mostrar datos interesantes sobre ti o puedes personalizar la app para un amigo, un familiar o una mascota. Esta app muestra un nombre, un botón LISTO, una imagen de estrella y algo de texto desplazable.

En esta tarea, crearás el proyecto AboutMe Android Studio.

1. Abre Android Studio si aún no está abierto.
2. Si un proyecto ya está abierto en Android Studio, selecciona File > New > New Project.
   
   
   
3. Si un proyecto aún no está abierto, selecciona + Start a new Android Studio project en el diálogo Welcome to Android Studio.
   
   
   
4. En el diálogo Create New Project, en la pestaña Phone and Tablet, selecciona la plantilla Empty Activity. Haz clic en Siguiente.
   
   
   
5. En el siguiente diálogo Create New Project, configura los siguientes parámetros y haz clic en Finish.
   

Atributo	Valor
Nombre de la aplicación	Acerca de mí
Nombre de la empresa en Android	com.android.example.AboutMe (o su propio dominio)
Guardar ubicación	Deje la ubicación predeterminada o cámbiela a su directorio preferido.
Idioma	Kotlin
Nivel mínimo de API	API 19: Android 4.4 (KitKat)
Este proyecto admitirá apps instantáneas	No marques esta casilla de verificación.
Cómo usar artefactos de AndroidX	Seleccione esta casilla de verificación.

Android Studio tardará un momento en generar los archivos del proyecto.

6. Ejecuta la app. Verás la string "Hello World" en la pantalla en blanco.
   

La plantilla Empty Activity crea una única actividad vacía, Mainactivity.kt. La plantilla también crea un archivo de diseño llamado activity_main.xml. El archivo de diseño tiene ConstraintLayout como raíz ViewGroup y una sola TextView como contenido.

En esta tarea, cambiarás la raíz ViewGroup generada por un LinearLayout. También organizas los elementos de la IU de forma vertical.

Ver grupos

Un ViewGroup es una vista que puede contener vistas secundarias, que son otras vistas y grupos de vistas. Las vistas que conforman un diseño se organizan como una jerarquía de vistas con un grupo de vistas como raíz.

En un grupo de vistas LinearLayout, los elementos de la IU se organizan de forma horizontal o vertical.

Cambia el diseño raíz para que use un grupo de vistas LinearLayout:

1. Selecciona el panel Project > Android. En la carpeta app/res/layout , abre el archivo activity_main.xml.
2. Selecciona la pestaña Text y cambia el grupo de vistas raíz de ConstraintLayout a LinearLayout.
3. Quita el TextView. En el elemento LinearLayout, agrega el atributo android:orientation y establécelo en vertical.

Antes:

<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=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Después:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

El editor de diseño es una herramienta de diseño visual dentro de Android Studio. En lugar de escribir código XML manualmente para compilar el diseño de tu app, puedes usar el editor de diseño a fin de arrastrar los elementos de la IU al editor de diseño.

Para ver el editor de diseño, haz clic en la pestaña Design. En la siguiente captura de pantalla, se muestran las partes del editor de diseño.

Design editor: Muestra una representación visual del diseño de la pantalla en la vista de diseño, de plano o de ambos. El editor de diseño es la parte principal del editor de diseño.

Barra de herramientas: Proporciona botones para configurar la apariencia de tu diseño en el editor de diseño y cambiar algunos atributos de diseño. Por ejemplo, para cambiar la forma en que se muestra tu diseño en el editor de diseño, usa el menú desplegable Select Design Surface :

• Utiliza Design para obtener una vista previa real de tu diseño.
• Use Blueprint para ver solo los contornos de cada vista.
• Usa Design + Blueprint para ver ambas pantallas una al lado de la otra.

Palette: Proporciona una lista de vistas y grupos de vistas que puedes arrastrar a tu diseño o al panel Component Tree.

Attributes: Muestra los atributos de la vista o el grupo de vistas que seleccionaste. Para alternar entre una lista completa de atributos y los atributos de uso frecuente, usa el ícono en la parte superior del panel.

Árbol de componentes: muestra la jerarquía de diseño como un árbol de vistas. El árbol de componentes es útil cuando tienes vistas pequeñas, ocultas o superpuestas que, de otro modo, no podrías seleccionar en el editor de diseño.

Paso 1: Agrega una TextView

1. Abre el archivo res/layout/activity_main.xml si aún no está abierto.
2. Ve a la pestaña Text y, luego, inspecciona el código. El código tiene un LinearLayout como su grupo de vista raíz. (Los grupos de vistas son vistas que contienen otras vistas).
   
   LinearLayout tiene los atributos obligatorios layout_height, layout_width y orientation, que es vertical de forma predeterminada.
3. Cambia a la pestaña Design para abrir el editor de diseño.

Nota: Las pestañas Diseño y Texto muestran el mismo diseño, pero de manera diferente. Los cambios que haga en una pestaña se reflejarán en la otra.

4. Arrastra una vista de texto del panel Palette al editor de diseño.
   
   
   
5. Observa el panel de árbol de componentes. La nueva vista de texto se coloca como un elemento secundario del grupo de vistas superior, que es LinearLayout.
   
   
6. Abre el panel Attributes si todavía no está abierto. (Para abrir el panel, haz doble clic en el elemento TextView recién agregado en el editor de diseño).
7. Configure los siguientes atributos en el panel Attributes:

Atributo	Valor
ID	name_text
texto	Configúralo con tu nombre. (Uno de los campos de texto muestra un ícono de llave inglesa para indicar que corresponde al espacio de nombres tools. La que no tiene el ícono de llave inglesa es para el espacio de nombres android (este es el campo texto que deseas).
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	Centro

Paso 2: Crea un recurso de strings

En Component Tree, junto a TextView,, verás un ícono de advertencia . Para ver el texto de la advertencia, haz clic en el ícono o apuntarlo, como se muestra en la siguiente captura de pantalla.

Para resolver la advertencia, crea un recurso de strings:

1. En el panel Attributes, haz clic en los tres puntos junto al atributo text que estableciste para tu nombre. Se abrirá el editor de recursos.
   
   
   
2. En el diálogo Resources, selecciona Add new resource > New string Value.
3. En el diálogo New String Value Resource, establece el campo Nombre del recurso en name. Establece el campo Valor del recurso en tu propio nombre. Haz clic en OK. Observa que la advertencia ya no está.
   
   
   
4. Abre el archivo res/values/strings.xml y busca el recurso de strings recién creado llamado name.

<string name="name">Aleks Haecky</string>

Paso 3: Cree un recurso de dimensión

Acabas de agregar un recurso con el editor de recursos. También puedes extraer recursos en el editor de código XML para crear recursos nuevos:

1. En el archivo activity_main.xml, cambia a la pestaña Text.
2. En la línea textSize, haz clic en el número (20sp) y escribe Alt+Enter (Option+Enter en una Mac). Seleccione Extraer recurso de dimensión del menú emergente.
3. En el diálogo Extract Resource, ingresa text_size en el campo Resource name. Haz clic en OK.
   
   
   
4. Abre el archivo res/values/dimens.xml para ver el siguiente código generado:

<dimen name="text_size">20sp</dimen>

Nota: Si el archivo dimens.xml no estaba presente en la carpeta res/values, Android Studio lo creará.

5. Abre el archivo MainActivity.kt y busca el siguiente código al final de la función onCreate():

setContentView(R.layout.activity_main)

La función setContentView() conecta el archivo de diseño con el elemento Activity. El archivo del recurso de diseño especificado es R.layout.activity_main:

• R es una referencia al recurso. Es una clase generada automáticamente con definiciones para todos los recursos de tu app.
• layout.activity_main indica que el recurso es un diseño llamado activity_main.

6. Ejecuta la app. Se mostrará un TextView con tu nombre.
   
   

En la pantalla de tu app, tu nombre aparecerá en la parte superior, por lo que agregarás relleno y un margen.

Padding frente a margen

Padding es el espacio dentro de los límites de una vista o un elemento. Es el espacio entre los bordes de la vista y el contenido de la vista, como se muestra en la siguiente figura.

El tamaño de una vista incluye su relleno. Los siguientes son atributos de relleno de uso general:

• android:padding especifica el padding para los cuatro bordes de la vista.
• android:paddingTop especifica el padding para el borde superior.
• android:paddingBottom especifica el padding para el borde inferior.
• android:paddingStart especifica el padding para el borde de la vista.
• android:paddingEnd especifica el relleno para el borde "fin" y de la vista.
• android:paddingLeft especifica el padding para el borde izquierdo.
• android:paddingRight especifica el padding para el borde derecho.

El margen es el espacio que se agrega fuera de los bordes de la vista. Es el espacio desde el borde de la vista hasta su elemento superior, como se muestra en la figura anterior. Los siguientes son atributos de margen de uso general:

• android:layout_margin especifica un margen para los cuatro lados de la vista.
• android:layout_marginBottom especifica el espacio fuera de la parte inferior de esta vista.
• android:layout_marginStart especifica el espacio fuera de la parte lateral de esta vista.
• android:layout_marginEnd especifica el espacio en el extremo final de esta vista.
• android:layout_marginLeft especifica el espacio a la izquierda de esta vista.
• android:layout_marginRight especifica el espacio a la derecha de esta vista.

Derecha/izquierda en comparación con inicio/finalización

"Left" y "izquierda" siempre consulta los lados derecho e izquierdo de la pantalla, si tu app usa un flujo de izquierda a derecha (LTR) o un flujo de derecha a izquierda (RTL). El inicio y el final siempre se refieren al inicio y al final del flujo:

• En el caso de un flujo de izquierda a derecha, comienza con los signos izquierdo e izquierdo = derecho.
• Para un flujo de derecha a izquierda, start=right y end=left.

Si tu app está orientada al nivel de API 17 (Android 4.2) o superior:

• Usar "start" y "end" en lugar de
• Por ejemplo, android:layout_marginLeft debe convertirse en android:layout_marginStart para admitir idiomas con escritura de derecha a izquierda.

Si quieres que tu app funcione con versiones anteriores a Android 4.2; es decir, si la targetSdkVersion o minSdkVersion de la app es 16 o inferior:

• Agregar los botones de inicio y fin, además de los de la izquierda y los de la derecha
• Por ejemplo, usa android:paddingLeft y android:paddingStart.

Paso 1: Agregue padding

Para colocar espacio entre tu nombre y el borde superior de la vista de texto name, agrega padding superior.

1. Abre el archivo activity_main.xml en la pestaña Design.
2. En Component Tree o en el editor de diseño, haz clic en la vista de texto para abrir el panel Attributes.
3. En la parte superior del panel Attributes, haz clic en el ícono de flecha doble para ver todos los atributos disponibles.
4. Busque Padding, expándalo y haga clic en los tres puntos ... junto al atributo top. Aparecerá el diálogo Resources.
5. En el diálogo Resources, selecciona Add new resource > New dimen Value.
6. En el diálogo New Dimension Value Resource, crea un nuevo recurso dimen llamado small_padding con un valor de 8dp.
   
   La abreviatura dp significa independiente de la densidad. Si quieres que un elemento de la IU tenga el mismo tamaño en pantallas con diferentes densidades, usa dp como unidad de medida. Sin embargo, cuando especifique el tamaño del texto, utilice siempre el valor sp (píxeles escalables).
7. Haga clic en OK.

Paso 2: Agrega un margen

Para alejar la vista de texto name del borde del elemento principal, agrega un margen superior.

1. En el panel Attributes, busca < margen de diseño.
2. Expanda Layout_Margin y haga clic en los tres puntos ... que se encuentran junto al atributo top.
3. Crea un nuevo recurso dimen llamado layout_margin y hazlo 16dp. Haz clic en OK.

Paso 3: Agrega una fuente

Para que la vista de texto name se vea mejor, usa la fuente Roboto de Android. Esta fuente es parte de la biblioteca de compatibilidad y la agregas como un recurso.

1. En el panel Attributes, busca "fontFamily"
2. En el campo fontFamily, haz clic en la flecha desplegable, desplázate hasta la parte inferior de la lista y selecciona More Fonts.
3. En el diálogo Resources, busca rob y elige Roboto. En la lista Vista previa, selecciona Regular.
4. Selecciona el botón de selección Agregar fuente al proyecto.
5. Haz clic en OK.
   
   

La carpeta res ahora tiene una carpeta font que contiene un archivo de fuente roboto.ttf. Se agregó el atributo @font/roboto a tu TextView.

Paso 4: Extrae el estilo

Un estilo es una colección de atributos que especifican la apariencia y el formato de una vista. Un estilo puede incluir color y tamaño de fuente, color de fondo, relleno, margen y otros atributos comunes.

Puedes extraer el formato de la vista de texto name en un estilo y reutilizar el estilo para cualquier cantidad de vistas en tu aplicación. Si vuelves a utilizar un estilo, la aplicación tendrá una apariencia coherente cuando tengas varias vistas. El uso de estilos también te permite mantener estos atributos comunes en una sola ubicación.

1. Haz clic con el botón derecho en TextView en Component Tree y selecciona Refactor > Extract Style.
2. En el diálogo Extract Android Style, desmarca las casillas de verificación layout_width, layout_height y textAlignment. Generalmente, estos atributos son diferentes para cada vista, de manera que no deseas que formen parte del estilo.
3. En el campo Nombre del estilo, ingresa NameStyle.
4. Haz clic en OK.
   
   
   
5. Un estilo también es un recurso, por lo que se guarda en la carpeta res/values/ en un archivo styles.xml. Abre styles.xml y examina el código generado para el estilo NameStyle, que será similar al siguiente:

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. Abre activity_main.xml y cambia a la pestaña Text. Observa que el estilo generado se utiliza en la vista de texto como style="@style/NameStyle".
7. Ejecuta la app y observa los cambios en la fuente y el padding alrededor de tu TextView.

La mayoría de las apps para Android reales incluyen una combinación de vistas a fin de mostrar imágenes, mostrar texto y aceptar entradas del usuario en forma de eventos de clic o texto. En esta tarea, agregarás una vista para mostrar una imagen.

Un objeto ImageView es una vista para mostrar recursos de imagen. Por ejemplo, un objeto ImageView puede mostrar recursos Bitmap, como archivos PNG, JPG, GIF o WebP, o un recurso Drawable, como un dibujo vectorial.

En Android, se incluyen recursos de imagen, como íconos de muestra, avatares y fondos. Agregarás uno de estos recursos a tu app.

1. Muestra el archivo de diseño en la pestaña Design y, luego, arrastra una ImageView desde el panel Palette hasta name_text debajo de Component Tree. Se abrirá el diálogo Resources.
2. Selecciona Drawable si aún no está seleccionado.
3. Expande android, desplázate y selecciona btn_star_big_on. Es la estrella amarilla .
4. Haga clic en OK.
   
   
   
   La imagen destacada se agrega al diseño debajo de tu nombre. Como tienes una LinearLayout vertical, las vistas que agregas están alineadas verticalmente.
   
   
5. Cambia a la pestaña Text y observa el código ImageView generado. El ancho es match_parent, por lo que la vista será tan ancha como su elemento superior. Se estableció la altura en wrap_content, por lo que la vista será tan alta como su contenido. El ImageView hace referencia al elemento de diseño btn_star_big_on.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. Para cambiar el nombre de id de ImageView, haz clic con el botón derecho en "@+id/imageView" y selecciona Refactor > Rename.
7. En el diálogo Rename, cambia id a @+id/star_image. Haz clic en Refactor.
   
   
   

Sugerencia: Refactor > Rename cambia los nombres de los casos de un atributo o nombre de variable en el proyecto de tu app.

8. En la pestaña Design, en Component Tree, haz clic en el ícono de advertencia junto a star_image. La advertencia es para una contentDescription faltante, que los lectores de pantalla usan para describir imágenes al usuario.
9. En el panel Attributes, haz clic en los tres puntos ... junto al atributo contentDescription. Se abrirá el diálogo Resources.
10. En el diálogo Resources, selecciona Add new resource > New string Value. Establece el campo Resource name en yellow_star y el campo Resource value en Yellow star. Haz clic en OK.
11. Usa el panel Attributes para agregar un margen superior de 16dp (que es @dimen/layout_margin) a yellow_star , a fin de separar la imagen en estrella del nombre.
12. Ejecuta la app. Tu nombre y la imagen de la estrella se muestran en la IU de tu app.
    
    

Un objeto ScrollView es un grupo de vistas que permite que se pueda desplazar la jerarquía de vistas que hay adentro. Una vista de desplazamiento puede contener solo una otra vista, o grupo de vistas, como elemento secundario. La vista secundaria suele ser un elemento LinearLayout. Dentro de un LinearLayout, puedes agregar otras vistas.

En la siguiente imagen, se muestra un ejemplo de una ScrollView que contiene una LinearLayout que contiene varias otras vistas.

En esta tarea, agregarás una ScrollView que permite al usuario desplazarse por una vista de texto que muestra una breve biografía. Si solo deseas que una vista sea desplazable, puedes colocar la vista directamente en ScrollView, que es lo que haces en esta tarea.

Paso 1: Agrega un ScrollView que contenga un TextView

1. Abre el archivo activity_main.xml en la pestaña Design.
2. Arrastra una vista de desplazamiento al diseño arrastrándola al editor de diseño o a Component Tree. Coloca la vista de desplazamiento debajo de la imagen en forma de estrella.
3. Cambia a la pestaña Text para inspeccionar el código generado.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

La altura y el ancho de ScrollView coinciden con el elemento principal. Una vez que la vista de texto name_text y la vista de imagen star_image hayan usado suficiente espacio vertical para mostrar su contenido, el sistema Android colocará el ScrollView para llenar el resto del espacio disponible en la pantalla.

4. Agrega un elemento id a ScrollView y llámalo bio_scroll. Agregar una id a la ScrollView le brinda al sistema Android un controlador para la vista, de modo que, cuando el usuario rota el dispositivo, el sistema conserva la posición de desplazamiento.
5. Dentro del ScrollView, quita el código LinearLayout, ya que tu app solo tendrá una vista desplazable, una TextView.
6. Arrastra un elemento TextView de Palette a Component Tree. Coloca TextView bajo bio_scroll, como elemento secundario de bio_scroll.
   
   
7. Establece el id de la vista de texto nueva en bio_text.
8. A continuación, agregarás un estilo a la vista de texto nueva. En el panel Attributes, haz clic en los tres puntos ... junto al atributo style para abrir el diálogo Resources.
9. En el diálogo Resources, busca NameStyle. Selecciona NameStyle de la lista y haz clic en OK. La vista de texto ahora usa el estilo NameStyle, que creaste en una tarea anterior.
   
   

Paso 2: Agrega tu biografía al nuevo TextView

1. Abre strings.xml, crea un recurso de strings llamado bio y escribe algo extenso sobre ti o sobre lo que quieras.
   

Nota:

• Usa \n para indicar un salto de línea.
• Si usas un apóstrofo, debes escapar con una barra inversa. Por ejemplo:
  "You mustn\'t forget the backslash."
• Para escribir en negrita, usa <b>...</b> y, para cursiva, usa <i>...</i>. Por ejemplo:
  "This text is <b>bold</b> and this text is <i>italics</i>."

A continuación, se muestra un ejemplo de biografía:

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. En la vista de texto bio_text, establece el valor del atributo text en el recurso de string bio que contiene tu biografía.
3. Para que el texto bio_text sea más fácil de leer, agrega espaciado entre las líneas. Usa el atributo lineSpacingMultiplier y asígnale un valor de 1.2.
   
   
   
   Observa cómo en el editor de diseño, el texto bio se ejecuta en los bordes laterales de la pantalla. Para solucionar este problema, puedes agregar atributos de relleno izquierdo, inicial, derecho y final al LinearLayout raíz. No es necesario agregar padding en la parte inferior, ya que el texto que se ejecuta hasta el final le indica al usuario que el texto se puede desplazar.
4. Agrega padding de inicio y finalización de 16dp a la raíz LinearLayout.
5. Ve a la pestaña Text, extrae el recurso de dimensión y asígnale el nombre layout_padding.
   
   

Nota: A partir del nivel de API 17, usa los caracteres "start" y "end" en lugar de "left" y "right" para el relleno y el margen a fin de adaptar tu app a los idiomas RTL, como el árabe.

6. Ejecuta tu app y desplázate por el texto.
   
   

¡Felicitaciones!

Creaste una app completa desde cero, ¡y se ve increíble!

Proyecto de Android Studio: Acerca de mí

Nota: Todos los desafíos de programación son opcionales.

Dentro del ScrollView, agrega un ImageView sobre el TextView. Cuando ejecutas la app, esta imagen, a diferencia de la estrella, se desplaza fuera de la vista a medida que el texto se desplaza hacia arriba.

Sugerencia: La vista de desplazamiento solo puede tener una vista secundaria. Debes unir las dos vistas desplazables, ImageView y TextView, en un LinearLayout.

• Un ViewGroup es una vista que puede contener otras vistas. LinearLayout y ScrollView son grupos de vistas.
• LinearLayout es un grupo de vistas que organiza sus vistas secundarias horizontalmente o verticalmente.
• Usa un ScrollView cuando necesites mostrar contenido en la pantalla, como texto largo o una colección de imágenes. Una vista de desplazamiento solo puede contener una vista secundaria. Si deseas desplazarte por más de una vista, agrega un ViewGroup, como un LinearLayout, a la ScrollView, y coloca las vistas que deseas desplazar dentro de ese ViewGroup.
• El editor de diseño es un editor de diseño visual de Android Studio. Puedes usar el editor de diseño para compilar el diseño de tu app arrastrando elementos de la IU al diseño.
• Un estilo es una colección de atributos que especifican la apariencia de una vista. Por ejemplo, un estilo puede especificar el color, el tamaño y el color de fuente, el relleno y el margen.
• Puedes extraer y recopilar todo el formato de una vista en un estilo. Para darle a tu app una apariencia coherente, reutiliza el estilo para otras vistas.

Curso de Udacity:

• Cómo desarrollar apps para Android con Kotlin

Documentación para desarrolladores de Android:

• Diseños
• ViewGroup
• View
• Diseño lineal
• ScrollView
• Admite diferentes densidades de píxeles (dp)
• Cómo compilar una IU con un editor de diseño
• Documentación de Android Studio
• 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 de las siguientes opciones es un grupo de vistas?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

Pregunta 2

¿Cuál de las siguientes jerarquías de vistas enumeradas no es válida?

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

Pregunta 3

Los estilos son recursos que se definen en styles.xml. Con ellos, puedes definir los colores, las fuentes, el tamaño del texto y muchas otras características de una vista. ¿Verdadero o falso?

▢ Verdadero

▢ Falso

Pregunta 4

Un ScrollView es un grupo de vistas que puede contener cualquier cantidad de vistas o grupos de vistas como sus elementos secundarios. ¿Verdadero o falso?

▢ Verdadero

▢ Falso

Pregunta 5

¿Qué elemento de la IU se puede usar para mostrar imágenes en tu app?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

Comienza la siguiente lección: 2.2: Cómo agregar interactividad del usuario

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.