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

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

Qué aprenderás

• Cómo trabajar con View y ViewGroup
• Cómo organizar vistas en un Activity con LinearLayout.
• Cómo usar ScrollView para mostrar el contenido desplazable
• Cómo cambiar la visibilidad de un View
• Cómo crear y usar recursos de cadenas y dimensiones
• Cómo crear un diseño lineal con el editor de diseño de Android Studio

Actividades

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

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

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

1. Abre Android Studio si aún no lo has hecho.
2. Si ya hay un proyecto abierto en Android Studio, selecciona File > New > New Project.
   
   
   
3. Si aún no hay un proyecto 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, establece los siguientes parámetros y haz clic en Finish.
   

Atributo	Valor
Nombre de la aplicación	AboutMe
Nombre de la empresa (Android)	com.android.example.AboutMe (o tu propio dominio)
Guardar ubicación	Deja la ubicación predeterminada o cámbiala al directorio que prefieras.
Idioma	Kotlin
Nivel de API mínimo	API 19: Android 4.4 (KitKat)
Este proyecto admitirá aplicaciones instantáneas	Deja esta casilla de verificación sin marcar.
Usar artefactos de AndroidX	Selecciona esta casilla de verificación.

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

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

La plantilla Empty Activity crea una sola 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 su ViewGroup raíz y un solo TextView como contenido.

En esta tarea, cambiarás el elemento raíz ViewGroup generado por un LinearLayout. También puedes organizar 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 componen 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 para arrastrar elementos de 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, la vista de plano técnico o ambas. 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 para cambiar algunos atributos de diseño. Por ejemplo, para cambiar la visualización de tu diseño en el editor de diseño, usa el menú desplegable Select Design Surface :

• Usa Design para obtener una vista previa real de tu diseño.
• Usa Blueprint para ver únicamente el contorno 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 seleccionado actualmente. Para alternar entre una lista completa de atributos y los atributos que se usan con frecuencia, usa el ícono en la parte superior del panel.

Árbol de componentes: Muestra la jerarquía del diseño como un árbol de vistas. El Component Tree es útil cuando tienes vistas pequeñas, ocultas o superpuestas que no podrías seleccionar de otra manera en el editor de diseño.

Paso 1: Agrega un TextView

1. Abre el archivo res/layout/activity_main.xml, si aún no está abierto.
2. Cambia a la pestaña Text y revisa el código. El código tiene un LinearLayout como grupo de vistas raíz. (Las vistas de grupo son vistas que contienen otras vistas).
   
   El 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: La pestaña Diseño y la pestaña Texto muestran el mismo diseño, solo que de una manera diferente. Los cambios que realices en una pestaña se reflejarán en la otra.

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

Atributo	Valor
ID	name_text
texto	Establécelo con tu nombre. (Uno de los campos de texto muestra un ícono de llave inglesa para indicar que es para el espacio de nombres tools. El que no tiene la llave es para el espacio de nombres android (este es el campo text que deseas).
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	Centrar

Paso 2: Crea un recurso de cadena

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

Para resolver la advertencia, crea un recurso de cadena:

1. En el panel Atributos, haz clic en los tres puntos junto al atributo texto que configuraste con 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 Resource name en name. Establece el campo Valor del recurso en tu propio nombre. Haz clic en Aceptar. Observa que la advertencia ya no aparece.
   
   
   
4. Abre el archivo res/values/strings.xml y busca el recurso de cadena recién creado llamado name.

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

Paso 3: Crea 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 Texto.
2. En la línea textSize, haz clic en el número (20sp) y escribe Alt+Enter (Option+Enter en Mac). Selecciona Extract dimension resource en el menú emergente.
3. En el diálogo Extract Resource, ingresa text_size en el campo Resource name. Haz clic en Aceptar.
   
   
   
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 aún no estaba presente en tu 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 Activity. El archivo de recursos 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 tu app. Se mostrará un TextView con tu nombre.
   
   

Cuando miras la pantalla de tu app, tu nombre se muestra en la parte superior, por lo que ahora agregarás padding y un margen.

Padding frente a margen

El relleno 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 padding 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 "inicial" de la vista.
• android:paddingEnd especifica el padding para el borde "final" 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 principal, como se muestra en la figura anterior. Los siguientes son atributos de margen de uso común:

• android:layout_margin especifica un margen para los cuatro lados de la vista.
• android:layout_marginBottom especifica el espacio fuera del lado inferior de esta vista.
• android:layout_marginStart especifica el espacio fuera del lado "inicial" de esta vista.
• android:layout_marginEnd especifica el espacio en el lado final de esta vista.
• android:layout_marginLeft especifica el espacio en el lado izquierdo de esta vista.
• android:layout_marginRight especifica el espacio en el lado derecho de esta vista.

Derecha/izquierda frente a inicio/final

"Derecha" y "izquierda" siempre hacen referencia a los lados derecho e izquierdo de la pantalla, ya sea que tu app use un flujo de izquierda a derecha (LTR) o de derecha a izquierda (RTL). "Inicio" y "final" siempre hacen referencia al inicio y al final del flujo:

• Para un flujo LTR, start = left y end=right.
• Para un flujo de RTL, start=right y end=left.

Si tu app se orienta al nivel de API 17 (Android 4.2) o versiones posteriores, haz lo siguiente:

• Usa "start" y "end" en lugar de "left" y "right".
• Por ejemplo, android:layout_marginLeft debería convertirse en android:layout_marginStart para admitir idiomas RTL.

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

• Agrega "start" y "end" además de "left" y "right".
• Por ejemplo, usa android:paddingLeft y android:paddingStart.

Paso 1: Agrega relleno

Para agregar espacio entre tu nombre y el borde superior de la vista de texto name, agrega relleno 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 su panel Attributes.
3. En la parte superior del panel Atributos, haz clic en el ícono de doble flecha para ver todos los atributos disponibles.
4. Busca Padding, expándelo y haz 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 especifiques el tamaño del texto, usa siempre sp (píxeles escalables).
7. Haz clic en Aceptar.

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 "margin" para encontrar Layout_Margin.
2. Expande Layout_Margin y haz clic en los tres puntos … junto al atributo top.
3. Crea un recurso dimen nuevo 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 forma 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 del menú 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 Normal.
4. Selecciona el botón de selección Add font to project.
5. Haz clic en Aceptar.
   
   

La carpeta res ahora tiene una carpeta font que contiene un archivo de fuente roboto.ttf. Se agrega 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 el color y el tamaño de la fuente, el color de fondo, el padding, el margen y otros atributos comunes.

Puedes extraer el formato de la vista de texto name en un diseño y reutilizarlo para cualquier cantidad de vistas en tu app. Reutilizar un diseño le da a tu app un aspecto coherente cuando tienes 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 el árbol de componentes 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. Estos atributos suelen ser diferentes para cada vista, por lo que no quieres que formen parte del diseño.
3. En el campo Nombre del diseño, ingresa NameStyle.
4. Haz clic en Aceptar.
   
   
   
5. Un diseño 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 diseño NameStyle, que se verá similar a este:

<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 usa 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 del mundo real constan de una combinación de vistas para mostrar imágenes, mostrar texto y aceptar la entrada del usuario en forma de texto o eventos de clic. En esta tarea, agregarás una vista para mostrar una imagen.

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

Android incluye recursos de imágenes, como íconos, avatares y fondos de muestra. Agregarás uno de estos recursos a tu app.

1. Muestra el archivo de diseño en la pestaña Design y, luego, arrastra un ImageView desde el panel Palette hasta debajo de name_text en el 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. Haz clic en Aceptar.
   
   
   
   La imagen de estrella se agrega al diseño debajo de tu nombre. Como tienes un LinearLayout vertical, las vistas que agregues se alinearán verticalmente.
   
   
5. Cambia a la pestaña Text y observa el código ImageView generado. El ancho se establece en match_parent, por lo que la vista será tan ancha como su elemento principal. La altura se establece 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 del id del ImageView, haz clic con el botón derecho en "@+id/imageView" y selecciona Refactor > Rename.
7. En el diálogo Rename, establece id en @+id/star_image. Haz clic en Refactor.
   
   
   

Sugerencia: Refactor > Rename cambia el nombre de todas las ocurrencias 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 se debe a la falta de un contentDescription, que los lectores de pantalla usan para describir imágenes al usuario.
9. En el panel Atributos, 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 Nombre del recurso en yellow_star y el campo Valor del recurso en Yellow star. Haz clic en Aceptar.
11. Usa el panel Attributes para agregar un margen superior de 16dp (que es @dimen/layout_margin) a yellow_star, para separar la imagen de la estrella del nombre.
12. Ejecuta tu app. Tu nombre y la imagen de la estrella se muestran en la IU de la app.
    
    

Un ScrollView es un grupo de vistas que permite que se pueda desplazar la jerarquía de vistas que hay adentro. Las vistas de desplazamiento solo pueden incluir una vista adicional, o grupo de vistas, como elemento secundario. Por lo general, la vista secundaria es un LinearLayout. Dentro de un LinearLayout, puedes agregar otras vistas.

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

En esta tarea, agregarás un ScrollView que le permita al usuario desplazarse por una vista de texto que muestra una breve biografía. Si solo vas a hacer que una vista se pueda desplazar, puedes colocarla directamente en el ScrollView, que es lo que harás 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 al Component Tree. Coloca la vista de desplazamiento debajo de la imagen de la 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 del ScrollView coinciden con los del elemento principal. Una vez que la vista de texto name_text y la vista de imagen star_image usaron suficiente espacio vertical para mostrar su contenido, el sistema Android diseña el ScrollView para llenar el resto del espacio disponible en la pantalla.

4. Agrega un id al ScrollView y llámalo bio_scroll. Si agregas un id al ScrollView, el sistema Android tendrá un identificador para la vista, de modo que, cuando el usuario rote el dispositivo, el sistema conservará la posición de desplazamiento.
5. Dentro de ScrollView, quita el código de LinearLayout, ya que tu app solo tendrá una vista desplazable: un TextView.
6. Arrastra un TextView de Palette a Component Tree. Coloca el TextView debajo del bio_scroll, como un elemento secundario de bio_scroll.
   
   
7. Establece el id de la nueva vista de texto en bio_text.
8. A continuación, agregarás un diseño para la nueva vista de texto. En el panel Atributos, haz clic en los tres puntos … junto al atributo style para abrir el diálogo Recursos.
9. En el diálogo Resources, busca NameStyle. Selecciona NameStyle en la lista y haz clic en Aceptar. 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 cadena llamado bio y agrega un texto largo sobre ti o sobre lo que quieras.
   

Nota:

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

Aquí tienes 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 cadena bio que contiene tu biografía.
3. Para que el texto de bio_text sea más fácil de leer, agrega espacio 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 extiende hasta los bordes laterales de la pantalla. Para solucionar este problema, puedes agregar atributos de padding izquierdo, inicial, derecho y final al LinearLayout raíz. No es necesario que agregues relleno inferior, ya que el texto que llega hasta la parte inferior le indica al usuario que se puede desplazar.
4. Agrega un padding de inicio y finalización de 16dp al elemento LinearLayout raíz.
5. Cambia 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 "start" y "end" en lugar de "left" y "right" para el padding y el margen, de modo que tu app se adapte 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 genial.

Proyecto de Android Studio: AboutMe

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

Dentro de ScrollView, agrega un ImageView arriba de TextView. Cuando ejecutes la app, esta imagen, a diferencia de la estrella, se desplazará fuera de la vista a medida que el texto se desplace hacia arriba.

Sugerencia: La vista de desplazamiento solo puede tener una vista secundaria. Debes envolver 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 de forma horizontal o vertical.
• 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 quieres desplazarte por más de una vista, agrega un ViewGroup, como un LinearLayout, al ScrollView y coloca las vistas por las que se desplazará dentro de ese ViewGroup.
• El editor de diseño es un editor de diseño visual dentro 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 y el tamaño de la fuente, el color de fondo, el padding y el margen.
• Puedes extraer y recopilar todo el formato de una vista en un estilo. Para que tu app tenga un aspecto coherente, reutiliza el estilo para otras vistas.

Curso de Udacity:

• Developing Android Apps with Kotlin

Documentación para desarrolladores de Android:

• Diseños
• ViewGroup
• View
• Diseño lineal
• ScrollView
• Cómo brindar compatibilidad con 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 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 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 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 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.