Recursos y diseño adaptable en Android

¿Qué son los recursos en Android y por qué importan?

En Android, los recursos son archivos externos al código (texto, imágenes, dimensiones, colores, estilos, etc.) que se almacenan en la carpeta res/. Separar estos elementos del código permite: localización (múltiples idiomas), adaptación a tamaños de pantalla y densidades, y mantenimiento (cambios sin tocar lógica).

Los recursos se organizan por tipo y pueden tener variantes usando calificadores, por ejemplo: values-es/ para español, layout-land/ para orientación horizontal, o drawable-hdpi/ para densidades.

Tipos de recursos más usados

Strings (texto) y localización

Los textos deben vivir en res/values/strings.xml para poder traducirse y reutilizarse. Evita “hardcodear” textos en el código o en layouts.

<resources>    <string name="app_name">MiApp</string>    <string name="welcome_title">Bienvenido</string>    <string name="items_count">Tienes %1$d elementos</string></resources>

Observa el uso de %1$d para formateo con parámetros (en este caso un entero). Esto facilita traducciones correctas sin concatenaciones.

Dimensiones (dp, sp) y consistencia visual

Las dimensiones se definen en res/values/dimens.xml. Usa:

Continúa en nuestra aplicación.

• Escuche el audio con la pantalla apagada.
• Obtenga un certificado al finalizar.
• ¡Más de 5000 cursos para que explores!

O continúa leyendo más abajo...

Descargar la aplicación

• dp para tamaños y márgenes (independiente de densidad).
• sp para texto (respeta la escala de fuente del usuario).

<resources>    <dimen name="padding_screen">16dp</dimen>    <dimen name="spacing_small">8dp</dimen>    <dimen name="text_title">20sp</dimen></resources>

Centralizar dimensiones ayuda a mantener coherencia y a crear variantes para pantallas grandes sin reescribir layouts.

Drawables (imágenes, formas y selectores)

En res/drawable/ puedes guardar imágenes (PNG/WebP), vectores (vector) y también recursos XML como formas y selectores. Los vectores suelen ser preferibles para iconos por su escalabilidad.

<!-- res/drawable/bg_rounded.xml --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">    <solid android:color="@android:color/white" />    <corners android:radius="12dp" />    <padding android:left="12dp" android:top="8dp" android:right="12dp" android:bottom="8dp" /></shape>

Este tipo de drawable evita depender de imágenes para fondos simples y se adapta mejor a distintas densidades.

Soporte de localización (idiomas) con variantes de recursos

Estructura típica

Para traducir textos, crea carpetas de valores por idioma:

• res/values/strings.xml (por defecto)
• res/values-es/strings.xml (español)
• res/values-en/strings.xml (inglés)

Android selecciona automáticamente la mejor coincidencia según el idioma del sistema.

Ejemplo de traducción

<!-- res/values/strings.xml (default) --> <resources>    <string name="welcome_title">Welcome</string></resources>

<!-- res/values-es/strings.xml --> <resources>    <string name="welcome_title">Bienvenido</string></resources>

Recomendación: mantén las mismas claves (name) en todos los idiomas para evitar fallos y textos faltantes.

Plurales y formatos

Para cantidades, usa plurals en lugar de condicionales manuales:

<plurals name="cart_items">    <item quantity="one">%1$d artículo</item>    <item quantity="other">%1$d artículos</item></plurals>

Esto mejora la corrección gramatical y facilita traducciones a idiomas con reglas más complejas.

Diseño adaptable: tamaños, orientación y densidades

1) Tamaños de pantalla y “responsive UI”

Android corre en teléfonos pequeños, plegables, tablets y pantallas externas. La adaptación se logra combinando:

• Layouts flexibles (constraints, pesos, tamaños “wrap”/“match”).
• Recursos alternativos (por ejemplo, layout-sw600dp para tablets).
• Dimensiones alternativas (por ejemplo, values-sw600dp/dimens.xml).

El calificador sw600dp significa “smallest width” de al menos 600dp, típico para tablets.

2) Orientación (portrait/landscape)

Para pantallas en horizontal, puedes crear variantes específicas:

• layout/ (por defecto)
• layout-land/ (horizontal)

Úsalo cuando el cambio de orientación requiera reorganizar componentes, no solo ajustar márgenes.

3) Densidades (ldpi, mdpi, hdpi, xhdpi…)

La densidad afecta cómo se ven las imágenes. Reglas prácticas:

• Usa dp para medidas de UI y evita píxeles.
• Para iconos, prefiere Vector Drawable.
• Si usas bitmaps, provee variantes en carpetas como drawable-mdpi, drawable-hdpi, drawable-xhdpi, etc.

Así evitas imágenes borrosas o demasiado pesadas en dispositivos de alta densidad.

Accesibilidad: contraste, tamaños y contenido descriptivo

Contraste y legibilidad

Para que el texto sea legible, asegúrate de un contraste suficiente entre texto y fondo. Recomendaciones prácticas:

• Evita grises claros sobre fondo blanco.
• Si usas imágenes de fondo, añade una capa (scrim) semitransparente detrás del texto.
• Prueba en modo oscuro si tu app lo soporta (recursos values-night).

Tamaños: respeta la escala del usuario

Usa sp para texto. Esto permite que el tamaño aumente si el usuario configuró fuentes grandes. Evita fijar alturas rígidas que corten texto cuando la fuente crece.

Contenido descriptivo (lectores de pantalla)

Para elementos no textuales (iconos, imágenes), define descripciones. En vistas tradicionales se usa android:contentDescription. Para iconos decorativos, se puede dejar sin descripción para evitar ruido en lectores de pantalla, pero para acciones (por ejemplo, botón de “buscar”) es imprescindible.

<ImageButton    android:id="@+id/btnSearch"    android:layout_width="48dp"    android:layout_height="48dp"    android:src="@drawable/ic_search"    android:contentDescription="@string/search" />

También es buena práctica asegurar tamaños táctiles cómodos (aprox. 48dp de alto/ancho para objetivos interactivos).

Guía paso a paso: extraer textos a recursos

Paso 1: identifica textos “hardcodeados”

Busca textos escritos directamente en layouts o en código (por ejemplo: android:text="Enviar" o textView.text = "Enviar").

Paso 2: crea o reutiliza una clave en strings.xml

En res/values/strings.xml, agrega:

<string name="action_send">Enviar</string>

Paso 3: reemplaza el texto por la referencia al recurso

En XML:

android:text="@string/action_send"

En código (vistas tradicionales):

textView.text = getString(R.string.action_send)

Con formato:

val count = 3 textView.text = getString(R.string.items_count, count)

Paso 4: verifica que no haya duplicados

Si encuentras varios textos iguales (“Aceptar”, “Cancelar”), reutiliza la misma clave si el significado es el mismo en toda la app. Si el significado cambia según contexto, usa claves distintas para permitir traducciones correctas.

Guía paso a paso: crear variantes de recursos (idioma, night, tablets)

Variante por idioma (es/en)

• Crea res/values-en/strings.xml.
• Copia las mismas claves y traduce valores.

<!-- res/values-en/strings.xml --> <resources>    <string name="action_send">Send</string></resources>

Variante para modo oscuro (night)

Para colores y estilos, crea:

• res/values/colors.xml
• res/values-night/colors.xml

<!-- res/values/colors.xml --> <resources>    <color name="surface">#FFFFFF</color>    <color name="on_surface">#111111</color></resources>

<!-- res/values-night/colors.xml --> <resources>    <color name="surface">#121212</color>    <color name="on_surface">#F2F2F2</color></resources>

Luego, en layouts o estilos, referencia siempre @color/surface y @color/on_surface (no valores hex directos).

Variante para tablets (sw600dp)

Opción A: cambiar dimensiones sin tocar layouts:

• res/values/dimens.xml
• res/values-sw600dp/dimens.xml

<!-- res/values/dimens.xml --> <resources>    <dimen name="padding_screen">16dp</dimen></resources>

<!-- res/values-sw600dp/dimens.xml --> <resources>    <dimen name="padding_screen">24dp</dimen></resources>

Opción B: crear un layout alternativo si la estructura cambia:

• res/layout/activity_main.xml
• res/layout-sw600dp/activity_main.xml

Android elegirá automáticamente el layout más adecuado.

Validación práctica: probar la UI en múltiples dispositivos del emulador

Objetivo de la validación

Comprobar que tu UI: no corta textos, mantiene proporciones, respeta escalas de fuente, se ve bien en diferentes densidades y funciona en portrait/landscape.

Paso a paso en Android Studio (Emulator)

1. Crea o abre un conjunto de dispositivos virtuales (AVD) con variedad realista:

   • Teléfono pequeño (por ejemplo 5.4”)
   • Teléfono grande (por ejemplo 6.7”)
   • Tablet (por ejemplo 10” o perfil con sw600dp)
   • Un dispositivo con densidad alta (xxhdpi) y otro más baja

2. Ejecuta la app en el primer emulador y navega por las pantallas clave.

3. Rota la pantalla (portrait/landscape) y revisa:

   • Reflow de contenido
   • Elementos fuera de pantalla
   • Listas que pierden espacio o botones inaccesibles

4. Cambia el idioma del sistema en el emulador (Settings > System > Languages) y valida:

   • Textos más largos (por ejemplo, alemán o francés) no rompen el layout
   • No hay claves faltantes (fallback inesperado al idioma por defecto)

5. Activa tamaño de fuente grande (Settings > Accessibility > Font size / Display size) y revisa:

   • Textos truncados
   • Botones que se solapan
   • Campos de formulario con etiquetas ilegibles

6. Prueba modo oscuro (Settings > Display > Dark theme) y valida contraste y legibilidad.

7. Revisa accesibilidad básica:

   • Elementos interactivos con tamaño táctil suficiente
   • Iconos con contentDescription cuando representan acciones
   • Orden de enfoque razonable al navegar con teclado/lector

Checklist rápida de errores comunes