Android Academy · Lección

Temas y estilos

Defina Styles reutilizables para los widgets y Themes para su aplicación. Configure los roles de color de Material 3, la escala tipográfica, fuentes personalizadas y el modo oscuro.

Temas y estilos es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 2 de 5. 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 5 lecciones en total.

Estilos frente a temas

Hay dos conceptos que suelen confundirse:

Style — conjunto de atributos de una vista que se aplica a un único widget (por ejemplo, tamaño del texto, color y relleno). Se establece con style="@style/MyButton".
Theme — conjunto de atributos semánticos que se aplica a una Activity o a la aplicación. Las vistas buscan los atributos del tema mediante ?attr/colorPrimary.

Definir un estilo

Cree estilos en res/values/styles.xml. Los estilos pueden heredar de un elemento principal:

<!-- res/values/styles.xml -->
<resources>
    <style name="TitleText" parent="TextAppearance.Material3.HeadlineMedium">
        <item name="android:textColor">@color/on_surface</item>
        <item name="android:fontFamily">@font/roboto_bold</item>
    </style>

    <style name="PrimaryButton" parent="Widget.Material3.Button">
        <item name="android:paddingHorizontal">24dp</item>
        <item name="cornerRadius">8dp</item>
    </style>
</resources>

<!-- Using a style in XML: -->
<TextView
    style="@style/TitleText"
    android:text="Hello!" />

Definir un tema

Los temas heredan de un elemento principal de Material 3 y sobrescriben los atributos de color y forma:

<!-- res/values/themes.xml -->
<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Color -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorOnPrimary">@color/on_primary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorBackground">@color/background</item>

        <!-- Typography -->
        <item name="textAppearanceBodyMedium">@style/BodyMedium</item>

        <!-- Shape -->
        <item name="shapeAppearanceMediumComponent">@style/Shape.Medium</item>
    </style>
</resources>

Sistema de colores de Material 3

Material 3 utiliza roles de color semánticos en lugar de valores hexadecimales sin procesar. Roles principales:

colorPrimary — color principal de la marca
colorOnPrimary — texto e iconos sobre el fondo principal
colorSecondary — color de acento
colorSurface — fondos de tarjetas y hojas
colorError — estados de error
colorBackground — fondo de la ventana

Recursos de color

Defina los colores en res/values/colors.xml:

<!-- res/values/colors.xml -->
<resources>
    <color name="primary">#6750A4</color>
    <color name="on_primary">#FFFFFF</color>
    <color name="secondary">#625B71</color>
    <color name="on_secondary">#FFFFFF</color>
    <color name="surface">#FFFBFE</color>
    <color name="background">#FFFBFE</color>
    <color name="error">#B3261E</color>
</resources>

Tema oscuro

Los temas DayNight de Material 3 gestionan automáticamente el modo oscuro. Añada una variante nocturna para los colores:

<!-- res/values-night/colors.xml  (night override) -->
<resources>
    <color name="primary">#D0BCFF</color>
    <color name="on_primary">#381E72</color>
    <color name="surface">#1C1B1F</color>
    <color name="background">#1C1B1F</color>
</resources>

// Switch dark mode programmatically:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)   // force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)    // force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // auto

Tipografía

Material 3 define una escala tipográfica. Utilice atributos textAppearance para mantener la coherencia del texto:

<TextView
    android:textAppearance="?attr/textAppearanceDisplayLarge"
    android:text="Big Title" />

<TextView
    android:textAppearance="?attr/textAppearanceHeadlineMedium"
    android:text="Section Header" />

<TextView
    android:textAppearance="?attr/textAppearanceBodyMedium"
    android:text="Body text content here" />

<TextView
    android:textAppearance="?attr/textAppearanceLabelSmall"
    android:text="Caption" />

Fuentes personalizadas

Añada una fuente a res/font/ y haga referencia a ella desde su tema o estilo:

<!-- res/font/my_font.xml — font family -->
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="400"
          app:font="@font/roboto_regular" />
    <font app:fontStyle="normal" app:fontWeight="700"
          app:font="@font/roboto_bold" />
</font-family>

<!-- Apply to a style: -->
<style name="Theme.MyApp" parent="...">
    <item name="android:fontFamily">@font/my_font</item>
</style>

Aplicar un tema a una Activity

Establezca el tema en AndroidManifest.xml. Puede utilizar un tema diferente para cada Activity:

<!-- AndroidManifest.xml -->
<application
    android:theme="@style/Theme.MyApp">

    <!-- Different theme for splash screen -->
    <activity
        android:name=".SplashActivity"
        android:theme="@style/Theme.MyApp.Splash" />

    <activity
        android:name=".MainActivity" />
</application>

Leer atributos del tema en el código

Acceda a cualquier atributo del tema en tiempo de ejecución desde el código Kotlin:

fun getColorFromTheme(context: Context, attrResId: Int): Int {
    val typedValue = TypedValue()
    context.theme.resolveAttribute(attrResId, typedValue, true)
    return typedValue.data
}

// Usage:
val primaryColor = getColorFromTheme(this, com.google.android.material.R.attr.colorPrimary)
binding.myView.setBackgroundColor(primaryColor)

Material Theme Builder

Utilice Material Theme Builder (m3.material.io/theme-builder) para generar una combinación de colores completa de Material 3 a partir del color de su marca. Exporta archivos XML listos para usar en colors.xml y themes.xml. Es la forma más rápida de obtener un sistema de diseño coherente.

Comprobación rápida

¿Cuál es la diferencia principal entre un Style y un Theme en Android?

Resumen: temas y estilos

El diseño coherente empieza aquí:

Styles — atributos a nivel de widget, reutilizables en varias vistas
Themes — atributos a nivel de aplicación o Activity, con roles de color semánticos
Roles de color de Material 3: colorPrimary, colorSurface, colorError, etc.
Modo oscuro mediante values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM
Escala tipográfica mediante atributos textAppearance
Utilice Material Theme Builder para generar combinaciones de colores rápidamente

Siguiente: dibujar vistas personalizadas desde cero.

Preguntas frecuentes

¿La lección «Temas y estilos» es gratis?

Sí — el texto completo de «Temas y estilos» 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 5 lecciones en total.

¿Qué aprenderé en «Temas y estilos»?

Defina Styles reutilizables para los widgets y Themes para su aplicación. Configure los roles de color de Material 3, la escala tipográfica, fuentes personalizadas y el modo oscuro. 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 2 de 5.

¿Cuánto tiempo toma la lección «Temas y estilos»?

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