Tamaños de imagen de pantalla de bienvenida de Android para adaptarse a todos los dispositivos

Tengo un PNG de pantalla completa que quiero mostrar en splash. Sólo hay un error, y no tengo ni idea de qué tamaño poner en cada carpeta ( ldpi , mdpi , hdpi y xhdpi ). Mi aplicación se supone que funciona bien y hermoso en todos los teléfonos y tabletas. ¿Qué tamaños (en píxeles) debo crear para que el splash se muestre agradable en todas las pantallas?

Renuncia

Esta respuesta es de 2013 y está muy anticuada. A partir de Android 3.2 ahora hay 6 grupos de densidad de pantalla. Esta respuesta se actualizará tan pronto como sea posible, pero sin ETA. Consulte la documentación oficial de todas las densidades en este momento (aunque la información sobre tamaños de píxeles específicos es siempre difícil de encontrar).

Aquí está la versión tl / dr

  • Crear 4 imágenes, una para cada densidad de pantalla:

    • Xlarge (xhdpi): 640 x 960
    • Grande (hdpi): 480×800
    • Medio (mdpi): 320×480
    • Pequeño (ldpi): 240×320
  • Lea la introducción de 9 imágenes de parches en la Guía para programadores de Android

  • Diseñe imágenes que tengan áreas que se puedan estirar con seguridad sin comprometer el resultado final.

Con esto, Android seleccionará el archivo apropiado para la densidad de imagen del dispositivo, y luego estirará la imagen de acuerdo con el estándar de 9 parches.

Final del tl; dr. Mensaje completo a continuación

Estoy respondiendo con respecto al aspecto relacionado con el diseño de la pregunta. No soy un desarrollador, así que no podré proporcionar código para implementar muchas de las soluciones proporcionadas. Por desgracia, mi intención es ayudar a los diseñadores que están tan perdidos como yo cuando ayudé a desarrollar mi primera aplicación para Android.

Montaje de todos los tamaños

Con Android, las empresas pueden desarrollar sus teléfonos móviles y tablas de casi cualquier tamaño, con casi cualquier resolución que deseen. Debido a eso, no hay "tamaño de imagen correcto" para una pantalla de bienvenida, ya que no hay resoluciones de pantalla fija. Eso plantea un problema para las personas que quieren implementar una pantalla de bienvenida.

¿Sus usuarios realmente quieren ver una pantalla de bienvenida?

(En una nota de lado, las pantallas de bienvenida son algo desalentado entre los tipos de usabilidad. Se argumenta que el usuario ya sabe qué aplicación tocó, y la marca de su imagen con una pantalla de bienvenida no es necesario, ya que sólo interrumpe la experiencia del usuario con Un "anuncio" .Debe utilizarse, sin embargo, en aplicaciones que requieren una considerable carga cuando se inicializa (5s +), incluyendo juegos y tal, para que el usuario no está atascado preguntándose si la aplicación se estrelló o no)

Densidad de pantalla; 4 clases

Por lo tanto, dado tantas resoluciones de pantalla diferentes en los teléfonos en el mercado, Google implementó algunas alternativas y soluciones ingeniosas que pueden ayudar. Lo primero que debes saber es que Android separa TODAS las pantallas en 4 densidades de pantalla distintas:

  1. Baja Densidad (ldpi ~ 120dpi)
  2. Densidad media (mdpi ~ 160dpi)
  3. Alta Densidad (hdpi ~ 240dpi)
  4. Densidad extra alta (xhdpi ~ 320dpi) (Estos valores de ppp son aproximaciones, ya que los dispositivos personalizados tendrán valores de ppp variables)

Lo que usted (si usted es un diseñador) necesita saber de esto es que básicamente Android elige a partir de 4 imágenes para mostrar, dependiendo del dispositivo. Así que básicamente tienes que diseñar 4 imágenes diferentes (aunque se pueden desarrollar más para diferentes formatos como widescreen, modo retrato / paisaje, etc.).

Con esto en mente, sepa esto: a menos que diseñe una pantalla para cada resolución que se use en Android, su imagen se ajustará al tamaño de la pantalla. Y a menos que su imagen es básicamente un gradiente o desenfoque, obtendrá alguna distorsión no deseada con el estiramiento. Por lo tanto, básicamente tiene dos opciones: crear una imagen para cada combinación de tamaño / densidad de pantalla o crear cuatro imágenes de 9 parches.

La solución más difícil es diseñar una pantalla de bienvenida diferente para cada resolución. Puede comenzar siguiendo las resoluciones de la tabla al final de esta página (hay más, por ejemplo: 960 x 720 no aparece en la lista). Y suponiendo que tiene algunos pequeños detalles en la imagen, como texto pequeño, tiene que diseñar más de una pantalla para cada resolución. Por ejemplo, una imagen 480×800 que se muestra en una pantalla de tamaño medio puede parecer correcta, pero en una pantalla más pequeña (con una mayor densidad / dpi) el logotipo puede llegar a ser demasiado pequeño o algún texto podría quedar ilegible.

Imagen de 9 parches

La otra solución es crear una imagen de 9 parches . Es básicamente un borde transparente de 1 pixel alrededor de la imagen y dibujando píxeles negros en el área superior e izquierda de este borde puede definir qué partes de la imagen se le permitirá estirar. No voy a entrar en los detalles de cómo funcionan las imágenes de 9 parches, pero en pocas palabras, los píxeles que se alinean con las marcas en el área superior e izquierda son los píxeles que se repetirán para estirar la imagen.

Algunas reglas básicas

  1. Usted puede hacer estas imágenes en photoshop (o cualquier software de edición de imágenes que puede crear con precisión pngs transparente).
  2. El borde de 1 píxel tiene que ser FULL TRANSPARENT.
  3. El borde transparente de 1 píxel tiene que ser todo alrededor de su imagen, no sólo superior e izquierdo.
  4. Sólo puede dibujar negro (# 000000) píxeles en esta área.
  5. Los bordes superior e izquierdo (que definen el estiramiento de la imagen) sólo pueden tener un punto (1px x 1px), dos puntos (ambos 1px x 1px) o UNA línea continua (ancho x 1px o 1px x altura).
  6. Si elige utilizar 2 puntos, la imagen se expandirá proporcionalmente (de modo que cada punto se expandirá hasta que se alcance la anchura / altura final)
  7. El borde 1px tiene que ser además de las dimensiones del archivo base deseado. Así que una imagen de 100×100 9 parches debe tener 102×102 (100×100 + 1px en la parte superior, inferior, izquierda y derecha)
  8. Las imágenes de 9 parches deben finalizar con * .9.png

Por lo tanto, puede colocar un punto a cada lado de su logotipo (en el borde superior) y un punto por encima y por debajo (en el borde izquierdo), y estas filas y columnas marcadas serán los únicos píxeles a estirar.

Ejemplo

Esta es una imagen de 9 parches, 102x102px (tamaño final 100×100, para propósitos de aplicación):

Imagen de 9 parches, 102x102px

Aquí hay un zoom de 200% de la misma imagen:

La misma imagen, ampliada 2x para mayor claridad

Observe las marcas 1px en la parte superior e izquierda, indicando qué filas / columnas se expandirán.

Esto es lo que esta imagen se vería en 100×100 dentro de la aplicación:

Traducido en 100x100

Y esto es lo que le gustaría si se amplió a 460×140:

Traducido en 460x140

Una última cosa a considerar. Estas imágenes pueden verse bien en la pantalla del monitor y en la mayoría de los móviles, pero si el dispositivo tiene una densidad de imagen muy alta (dpi), la imagen parecería demasiado pequeña. Probablemente todavía legible, pero en una tableta con resolución 1920×1200, la imagen aparecería como un cuadrado muy pequeño en el medio. ¿Cuál es la solución? Diseñe 4 imágenes de lanzador de 9 parches diferentes, cada una para un conjunto de densidad diferente. Para asegurarse de que no se produzca ningún encogimiento, debe diseñar en la resolución común más baja para cada categoría de densidad. El encogimiento es indeseable aquí porque el 9-patch sólo explica el estiramiento, por lo que en un proceso de encogimiento el texto pequeño y otros elementos pueden perder legibilidad.

Aquí hay una lista de las resoluciones más pequeñas y comunes para cada categoría de densidad:

  • Xlarge (xhdpi): 640 x 960
  • Grande (hdpi): 480×800
  • Medio (mdpi): 320×480
  • Pequeño (ldpi): 240×320

Diseñe cuatro pantallas de bienvenida en las resoluciones anteriores, expanda las imágenes, coloque un borde transparente 1px alrededor del lienzo y marque qué filas / columnas serán extensibles. Tenga en cuenta que estas imágenes se utilizarán para CUALQUIER dispositivo en la categoría de densidad, por lo que su imagen ldpi (240 x 320) podría ser estirada a 1024×600 en una tableta extra grande con una pequeña densidad de imagen (~ 120 dpi). Así que 9-patch es la mejor solución para el estiramiento, siempre y cuando no desea una foto o gráficos complicados para una pantalla de bienvenida (tenga en cuenta estas limitaciones a medida que crea el diseño).

De nuevo, la única manera de que este estiramiento no ocurra es diseñar una pantalla cada resolución (o una para cada combinación resolución-densidad, si desea evitar que las imágenes se vuelvan demasiado pequeñas / grandes en dispositivos de alta / baja densidad) La imagen no se estira y tiene un color de fondo aparezcan donde se produzca el estiramiento (recuerde también que un color específico prestado por el motor de Android probablemente se verá diferente del mismo color específico prestado por photoshop debido a perfiles de color).

Espero que esto tenga sentido. ¡Buena suerte!

MODO RETRATO

MDPI es 320×480 dp = 320x480px (1x)

LDPI es 0.75 x MDPI = 240x360px

HDPI es 1,5 x MDPI = 480x720px

XHDPI es 2 x MDPI = 640x960px

XXHDPI es 3 x MDPI = 960 x 1440 px

XXXHDPI es 4 x MDPI = 1280x1920px

MODO PAISAJE

MDPI es 480×320 dp = 480x320px (1x)

LDPI es 0.75 x MDPI = 360x240px

HDPI es 1.5 x MDPI = 720x480px

XHDPI es 2 x MDPI = 960x640px

XXHDPI es 3 x MDPI = 1440x960px

XXXHDPI es 4 x MDPI = 1920x1280px

RETRATO

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

PAISAJE

LDPI: 320 x 200 píxeles

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

He buscado la mejor y la respuesta más simple para hacer la imagen de 9 parches. Ahora hacer la imagen del remiendo 9 es la tarea más fácil.

Desde https://romannurik.github.io/AndroidAssetStudio/index.html puede hacer una imagen de 9 parches para todas las resoluciones – XHDPI, HDPI, MDPI, LDPI en un solo clic.

Usar PNG no es una buena idea. En realidad, es costoso en lo que respecta al rendimiento. Puede utilizar archivos XML dibujables, por ejemplo, el fondo de Facebook .

Esto le ayudará a suavizar y acelerar su rendimiento, y para el logotipo utilizar .9 imágenes de parches.

 Density buckets LDPI 120dpi .75x MDPI 160dpi 1x HDPI 240dpi 1.5x XHDPI 320dpi 2x XXHDPI 480dpi 3x XXXHDPI 640dpi 4x px / dp = dpi / 160 dpi 

En mi caso, utilicé la lista dibujable en style.xml. Con la lista de la capa drawable, usted acaba de necesitar un png para todo el tamaño de pantalla.

 <resources xmlns:tools="http://schemas.android.com/tools"> <!-- Base application theme. --> <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar"> <item name="android:windowNoTitle">true</item> <item name="android:windowBackground">@drawable/flash_screen</item> <item name="android:windowTranslucentStatus" tools:ignore="NewApi">true</item> </style> 

Y flash_screen.xml en la carpeta dibujable.

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/white"></item> <item> <bitmap android:src="@drawable/background_noizi" android:gravity="center"></bitmap> </item> 

"Background_noizi" es png en la carpeta dibujable. Espero que ayude

Hace algún tiempo creé un archivo excel con dimensiones soportadas
Espero que esto sea útil para alguien

Para ser honesto perdí la idea, pero se refiere a otra función de pantalla como el tamaño (no sólo la densidad)
https://developer.android.com/guide/practices/screens_support.html
Por favor, infórmeme si hay algunos errores

Link1: dimensions.xlsx

Link2: dimensions.xlsx

** Si está buscando detalles de pantalla para todo tipo de dispositivos principales **

Ir a material.io

  • Cómo encontrar el dispositivo como LDPI MDPI HDPI o XHDPI
  • ¿Cómo detectar si Daydream está encendido?
  • Desactivar la pantalla mediante programación cuando la cara está cerca de la pantalla en Android
  • Orientación de la pantalla de Android NDK
  • El receptor de difusión de Android no recibe ACTION_SCREEN_ON
  • Desactivar el protector de pantalla de Android
  • Problema con los descriptores HID de la pantalla táctil USB de Android
  • Desactivar la pantalla en android
  • ¿Cómo atenuar / desenfoque sólo parte de la pantalla?
  • Uso de iPad con 11 dedos ... Amplíe el límite de Android en Código
  • Comportamiento de ciclo de vida extraño en mi aplicación Screen Saver
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.