X

Soporte de Diferentes Pantallas

Android clasifica las pantallas de los dispositivos en función de dos propiedades generales: el tamaño y la densidad. Deberías preparar tu app para que sea compatible en todos los dispositivos posibles en cualquier rango tanto de tamaño como densidad de pantalla, dando soporte a diferentes pantallas. Por tanto, deberías incluir recursos alternativos que optimicen la apariencia de tu app para dichos pantallas con diferentes tamaños y densidades.

  • Hay cuatro tamaños generales: small, normal, large y xlarge.
  • Y cuatro densidades generales: low (ldpi), medium (mdpi), high (hdpi), extra high (xhdpi).

También tienes que asegurarte del funcionamiento de tu app en función de la orientación de la pantalla (horizontal o vertical), optimizando la misma para que funcione correctamente en ambos modos y en todas las pantallas posibles.

Crear Diferentes Layouts

Para optimizar la experiencia de usuario de tu app en diferentes tamaños de pantalla, deberías crear un único archivo XML para cada tamaño al que quieras dar soporte. Cada layout debería guardarse en el directorio de recursos apropiado, añadiendo el sufijo -screen_size, en el cual será diferente para cada tamaño de pantalla. Por ejemplo, un único layout para pantallas grandes debería guardarse en el directorio res/layout-large/.

Nota: Android automáticamente escala tu layout para que encaje propiamente en la pantalla. Así, tus layout para diferentes tamaños de pantalla no necesitan preocuparse sobre el tamaño absoluto de los elementos de la UI, pero ten en cuenta que la estructura de dichos layout puede afectar a la experiencia de usuario (ya sea el tamaño de pantalla o la posición de las vistas importantes en relación a otras vistas hermanas).

Por ejemplo, este proyecto incluye un layout por defecto y un layout alternativo para pantallas grandes:

MyProject/
    res/
        layout/
            activity_main.xml
        layout-large/
            activity_main.xml

Los nombres de los archivos deben ser exactamente iguales, pero sus contenidos son diferentes en orden de proporcionar una UI optimizada para cada tamaño de pantalla correspondiente.

La referencia única al archivo del layout en tu app se hace de forma habitual:

@Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
}

El sistema carga el archivo layout desde el directorio de layout apropiado basándose en el tamaño de pantalla de el dispositivo en el cual tu app se está ejecutando. Para más informacións obre como Android selecciona el recurso apropiado, visita la guía Proporcionar Recursos.

Otro ejemplo, un proyecto con un layout alternativo para la orientación horizontal:

MyProject/
    res/
        layout/
            activity_main.xml
        layout-land/
            activity_main.xml

Por defecto, el archivo layout/activity_main.xml se utiliza para la orientación vertical.

Si quieres proporcionar un layout especial para el modo horizontal para cada tipo de pantalla, también puedes hacerlo del siguiente modo:

MyProject/
    res/
        layout/              # default (portrait)
            activity_main.xml
        layout-land/         # landscape
            activity_main.xml
        layout-large/        # large (portrait)
            activity_main.xml
        layout-large-land/   # large landscape
            activity_main.xml

Nota: Desde Android 3.2, se soporta un método avanzado para definir diferentes tamaños de pantalla que te permiten especificar recursos basándose en la anchura y altura mínimas en orden de píxeles independientes de densidad (dpi). Esta lección no cubre esta nueva técnica. Para más información, visita Diseñar para Diferentes Pantallas.

Crear Diferentes Bitmaps

Deberías siempre proporcionar recursos bitmaps (imágenes) que se escalen de forma apropiada a cada tipo de densidad de pantalla: low, medium, high, y extra-high. Esto ayuda a que tu app presenta una buena calidad gráfica y obtenga un mejor rendimiento en todas las densidades de pantalla existentes.

Para generar dichas imágenes, deberías comenzar con un recurso raw (sin modificaciones) en formato vector y generar las imágenes para cada densidad de pantalla siguiendo la siguiente escala de tamaño:

  • xhdpi: 2.0
  • hdpi: 1.5
  • mdpi: 1.0 (línea base)
  • ldpi: 0.75

Esto significa que si quieres generar una imagen de 200×200 para dispositivos xhdpi, deberías generar el mismo recurso en 150×150 para hdpi, 100×100 para mdpi, y 75×75 para ldpi.

Entonces, coloca los archivos en el directorio de recursos drawable apropiado:

MyProject/
    res/
        drawable-xhdpi/
            imagen.png
        drawable-hdpi/
            imagen.png
        drawable-mdpi/
            imagen.png
        drawable-ldpi/
            imagen.png

En cualquier momento en el que hagas referencia mediante @drawable/imagen, el sistema selecciona el bitmap apropiado basándose en la densidad de pantalla.

Nota: Los recursos low-density (ldpi), no son siempre necesarios. Cuando proporcionas activos hdpi, el sistema los escala para que encajen correctamente en pantallas ldpi.

Para más información sobre consejos y guías de diseño sobre crear activos de iconos para tu app, visita la guía de diseño Iconografía.

Puedes ver más información sobre Soporte de Diferentes Pantallas en la página oficial de Google en inglés pulsando aquí.

Los comentarios de Disqus están cargando....