Android Academy · Lección

Layouts y vistas

Diseñe interfaces de usuario con layouts XML. Utilice ConstraintLayout, LinearLayout y vistas habituales como TextView, Button, ImageView y EditText.

Layouts y vistas es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 3 de 7. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 7 lecciones en total.

Crear interfaces de usuario con XML

Las interfaces de usuario de Android se definen en archivos de diseño XML almacenados en res/layout/. El diseño describe la estructura y el aspecto de la pantalla: qué vistas se muestran y dónde.

A continuación, el código Kotlin infla este diseño e interactúa con las vistas en tiempo de ejecución.

Tipos de vistas comunes

Los widgets View más utilizados:

TextView — muestra texto
EditText — campo de entrada de texto
Button — botón en el que se puede hacer clic
ImageView — muestra una imagen
CheckBox — alterna entre activado y desactivado
Switch — interruptor de activado/desactivado (Material)

ConstraintLayout

ConstraintLayout es el diseño recomendado para la mayoría de las pantallas. Permite colocar vistas en relación unas con otras o con el elemento principal mediante restricciones, como si conectara puntos de anclaje.

Jerarquía plana: no necesita diseños anidados
Flexible: se adapta a cualquier tamaño de pantalla
Se usa de forma predeterminada en los proyectos nuevos de Android Studio

XML de ConstraintLayout

Un TextView centrado en la pantalla en ConstraintLayout:

<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android!"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

LinearLayout

LinearLayout organiza las vistas en una sola fila o columna:

android:orientation="vertical" — apila las vistas de arriba abajo
android:orientation="horizontal" — organiza las vistas una junto a otra
android:layout_weight — distribuye proporcionalmente el espacio restante

Es sencillo y predecible, pero evite anidarlo a demasiada profundidad.

Atributos de diseño principales

Toda View tiene estos atributos esenciales:

layout_width / layout_height: match_parent, wrap_content o un valor fijo en dp
id: se usa para hacer referencia a la vista desde Kotlin
margin: espacio fuera de la vista
padding: espacio dentro de la vista

Use dp para los tamaños (píxeles independientes de la densidad) y sp para los tamaños de texto.

ScrollView

Cuando el contenido es más alto que la pantalla, inclúyalo en un ScrollView:

Solo puede contener un elemento secundario directo (normalmente un LinearLayout)
El desplazamiento vertical está activado de forma predeterminada
Use HorizontalScrollView para el desplazamiento horizontal

Para listas dinámicas largas, use RecyclerView en su lugar: es más eficiente.

Buscar vistas en el código

Hay dos formas de acceder a las vistas desde el código Kotlin:

findViewById(R.id.tvTitle) — forma clásica; devuelve la vista mediante su ID
ViewBinding — enfoque moderno: genera una clase de binding a partir del XML y proporciona acceso con seguridad de tipos a todas las vistas

Se recomienda encarecidamente usar ViewBinding; lo aprenderá en la próxima lección.

Usar findViewById

Acceda a las vistas y modifíquelas desde onCreate:

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tvTitle = findViewById<TextView>(R.id.tvTitle)
        tvTitle.text = "Welcome!"
        tvTitle.textSize = 20f
    }
}

Comprobación rápida

¿Qué unidad debe usar para el tamaño del texto en los diseños de Android?

Repaso: diseños y vistas

Ahora puede diseñar pantallas de Android:

Las interfaces de usuario se definen en archivos de diseño XML dentro de res/layout/
Vistas comunes: TextView, EditText, Button, ImageView
ConstraintLayout: flexible, con jerarquía plana y recomendado
LinearLayout: organización sencilla en filas o columnas
Use dp para los tamaños y sp para el texto
Acceda a las vistas desde Kotlin con findViewById

A continuación: haga que su interfaz sea interactiva gestionando la entrada del usuario.

Preguntas frecuentes

¿La lección «Layouts y vistas» es gratis?

Sí — el texto completo de «Layouts y vistas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 7 lecciones en total.

¿Qué aprenderé en «Layouts y vistas»?

Diseñe interfaces de usuario con layouts XML. Utilice ConstraintLayout, LinearLayout y vistas habituales como TextView, Button, ImageView y EditText. Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 7.

¿Cuánto tiempo toma la lección «Layouts y vistas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Android Academy