Soportando distintas pantallas

Anterior Siguiente

Android categoriza las pantallas de los dispositivos usando dos propiedades generales: tamaño y densidad. Es de esperar que tu aplicación se instale en dispositivos con un amplio rango de tamaños y densidades. Como tal, deberías incluir algunos recursos alternativos para optimizar la apariencia de tu aplicación en distintos tamaños y densidades de pantalla.

  • Existen cuatro tamaños generales: small (pequeño), normal (normal), large (grande), xlarge (extragrande)
  • Y cuatro densidades generales: ldpi (baja), mdpi (media), hdpi (alta), xhdpi (extra alta)

Para declarar distintas interfaces de usuario y mapas de bits a utilizar para distintas pantallas, debes guardar estos recursos alternativos en directorios separados, de forma similar a como se hace para las cadenas de los distintos idiomas.

Ten en cuenta que las orientaciones de la pantalla (apaisado o retrato) también se consideran variaciones del tamaño de pantalla, por lo que en la mayoría de aplicaciones deberías revisar el diseño para optimizar la experiencia de usuario en cada orientación.

Crear interfaces distintas

Para optimizar la experiencia de usuario en distintos tamaños de pantalla, deberías crear un archivo XML de interfaz de usuario por cada tamaño de pantalla que quieras soportar. Cada diseño debe guardarse en el directorio de recursos apropiado, utilizando un sufijo -<tamaño_pantalla>. Por ejemplo, una interfaz de usuario diseñada para pantallas grandes se guardaría en el directorio res/layout-large/.

Nota: Android escala tu diseño de forma automática para que se ajuste a la pantalla. Por tanto, no tienes por qué preocuparte del tamaño absoluto de los elementos de interfaz de usuario en tus diseños para distintos tamaños de pantalla sino que, en su lugar, puedes concentrarte en la estructura del diseño que afecta a la experiencia de usuario (como el tamaño o la posición relativa de las vistas más importantes con relación a sus vistas hermanas).

Por ejemplo, este proyecto utiliza una interfaz de usuario por defecto y una alternativa para pantallas grandes (large):

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

Los nombres de archivo deben ser exactamente iguales, pero su contenido es distinto, para proporcionar una interfaz de usuario optimizada para su correspondiente tamaño de pantalla.

Simplemente referencia el archivo de interfaz de usuario en tu aplicación como otras veces:

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

El sistema carga la interfaz de usuario desde el archivo apropiado basándose en el tamaño de pantalla del dispositivo en que se está ejecutando tu aplicación. Para más información acerca de cómo selecciona Android el recurso apropiado puedes consultar la guía Proporcionando recursos.

Como ejemplo adicional, a continuación se muestra un proyecto con un diseño alternativo para la orientación apaisada:

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

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

Si quisieras proporcionar una interfaz de usuario para una pantalla grande en apaisado, entonces necesitarías usar tanto el calificador large como el calificador land:

MyProject/
    res/
        layout/              # por defecto (retrato)
            main.xml
        layout-land/         # apaisado
            main.xml
        layout-large/        # grandes (retrato)
            main.xml
        layout-large-land/   # grandes apaisado
            main.xml

Nota: En Android 3.2 y superior contamos con un método avanzado que permite especificar recursos para distintos tamaños de pantalla basándonos en el ancho y alto mínimo en términos de píxeles independientes de la densidad. En esta lección no se trata esta nueva técnica. Para más información, lee Diseñando para múltiples pantallas.

Crear mapas de bits distintos

Siempre deberías proporcionar mapas de bits escalados apropiadamente a cada una de las densidades generales: baja, media, alta y extra alta. Esto mejora la calidad del diseño gráfico y mejora el rendimiento.

Para generar estas imágenes, deberías partir de tu recurso original en formato vectorial y generar imágenes para cada densidad utilizando la siguiente escala:

  • xhdpi: 2.0
  • hdpi: 1.5
  • mdpi: 1.0 (original)
  • ldpi: 0.75

Esto significa que si generas una imagen de 200x200 para dispositivos xhdpi, deberías generar el mismo recurso a 150x150 para hdpi, 100x100 para mdpi, y 75x75 para dispositivos ldpi.

Una vez hecho esto, coloca los archivos en los directorios de recursos dibujables correspondientes:

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

Cuando referencies @drawable/awesomeimage, el sistema seleccionará el mapa de bits apropiado basándose en la densidad de la pantalla.

Nota: Los recursos de baja densidad (ldpi) no siempre son necesarios. Cuando proporcionas recursos hdpi, el sistema los escala a la mitad de su tamaño para que se ajusten a las pantallas ldpi.

Para más consejos y recomendaciones sobre la creación de iconos para tu aplicación, consulta la Guía de diseño de iconografía.

Anterior Siguiente