Tengo un PNG de pantalla completa que quiero mostrar en splash. Sólo un error allí, y no tienen idea de qué tamaño para poner en cada carpeta estirable ( ldpi, mdpi, hdpi, y xhdpi). Se supone que mi aplicación se ejecuta bien y hermosa en todos los teléfonos y tabletas. ¿Qué tamaños (en píxeles) debo crear para que la presentación se vea bien en todas las pantallas?

Descargo de responsabilidad

Esta respuesta es de 2013 y está muy desactualizada. A partir de Android 3.2, ahora hay 6 grupos de densidad de pantalla. Esta respuesta se actualizará tan pronto como pueda, 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

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

  • xlarge (xhdpi): 640x960
  • grande (hdpi): 480x800
  • medio (mdpi): 320x480
  • pequeño (ldpi): 240x320

• Lea la introducción de la imagen de 9 parches en la Guía para desarrolladores de Android

• Diseñe imágenes que tengan áreas que se puedan estirar de manera segura sin comprometer el resultado final

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

final de tl; dr. Publicación completa por delante

Estoy respondiendo con respecto al aspecto relacionado con el diseño de la pregunta. No soy desarrollador, por lo 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 de Android.

Se adapta a todos los tamaños.

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

¿Sus usuarios realmente quieren ver una pantalla de bienvenida?

(En una nota al margen, las pantallas de presentación están algo desaconsejadas entre los chicos de usabilidad. Se argumenta que el usuario ya sabe qué aplicación tocó, y no es necesario marcar su imagen con una pantalla de presentación, ya que solo interrumpe la experiencia del usuario con un "anuncio". Debe usarse, sin embargo, en aplicaciones que requieren una carga considerable cuando se inicializa (5s +), incluidos juegos y demás, para que el usuario no se quede atascado preguntándose si la aplicación se bloqueó o no)

Densidad de pantalla; 4 clases

Entonces, dadas 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 debe 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 ~ 240 ppp)
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 es diseñador) necesita saber es que Android básicamente elige entre 4 imágenes para mostrar, dependiendo del dispositivo. Entonces, básicamente, tiene que diseñar 4 imágenes diferentes (aunque se pueden desarrollar más para diferentes formatos, como pantalla panorámica, modo retrato / paisaje, etc.).

Con eso en mente, tenga esto en cuenta: a menos que diseñe una pantalla para cada resolución que se use en Android, su imagen se estirará para adaptarse al tamaño de la pantalla. Y a menos que su imagen sea básicamente un degradado o desenfoque, obtendrá una distorsión no deseada con el estiramiento. Entonces, tiene básicamente 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 presentación diferente para cada resolución. Puede comenzar siguiendo las resoluciones en la tabla al final de esta página (hay más. Ejemplo: 960 x 720 no está en la lista). Y suponiendo que tenga algunos pequeños detalles en la imagen, como texto pequeño, debe diseñar más de una pantalla para cada resolución. Por ejemplo, una imagen de 480x800 que se muestra en una pantalla mediana puede verse bien, pero en una pantalla más pequeña (con mayor densidad / ppp), el logotipo puede ser demasiado pequeño o puede que algún texto sea ilegible.

Imagen de 9 parches

La otra solución es crear una imagen de 9 parches . Básicamente es un borde transparente de 1 píxel alrededor de su imagen, y al dibujar píxeles negros en el área superior e izquierda de este borde puede definir qué partes de su imagen se podrán estirar. No entraré en detalles sobre cómo funcionan las imágenes de 9 parches, pero, en resumen, 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. Puede hacer estas imágenes en Photoshop (o cualquier software de edición de imágenes que pueda crear pngs transparentes con precisión).
2. El borde de 1 píxel debe ser TRANSPARENTE COMPLETO.
3. El borde transparente de 1 píxel debe estar alrededor de su imagen, no solo arriba y a la izquierda.
4. solo puede dibujar píxeles negros (# 000000) en esta área.
5. Los bordes superior e izquierdo (que definen el estiramiento de la imagen) solo 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 usar 2 puntos, la imagen se expandirá proporcionalmente (por lo que cada punto se turnará para expandirse hasta alcanzar el ancho / alto final)
7. El borde de 1px debe ser adicional a las dimensiones del archivo base previsto. Por lo tanto, una imagen de 9 parches de 100x100 debe tener 102x102 (100x100 + 1px en la parte superior, inferior, izquierda y derecha)
8. Las imágenes de 9 parches tienen que terminar con * .9.png

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

Ejemplo

Aquí hay una imagen de 9 parches, 102x102px (tamaño final de 100x100, para fines de aplicación):

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

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

Así es como se vería esta imagen en 100x100 dentro de la aplicación:

Y esto es lo que le gustaría si se expandiera a 460x140:

Una última cosa a considerar. Estas imágenes pueden verse bien en la pantalla de su monitor y en la mayoría de los móviles, pero si el dispositivo tiene una densidad de imagen (ppp) muy alta, la imagen se verá demasiado pequeña. Probablemente todavía sea legible, pero en una tableta con una resolución de 1920x1200, la imagen aparecería como un cuadrado muy pequeño en el medio. Entonces, ¿cuál es la solución? Diseñe 4 imágenes de iniciador de 9 parches diferentes, cada una para un conjunto de densidad diferente. Para garantizar que no se produzca reducción, debe diseñar en la resolución común más baja para cada categoría de densidad. En este caso, la reducción no es deseable porque 9 parches solo explican el estiramiento, por lo que en un proceso de reducción, 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): 640x960
• grande (hdpi): 480x800
• medio (mdpi): 320x480
• pequeño (ldpi): 240x320

Por lo tanto, diseñe cuatro pantallas de bienvenida en las resoluciones anteriores, expanda las imágenes, coloque un borde transparente de 1 px alrededor del lienzo y marque qué filas / columnas serán estirables. Tenga en cuenta que estas imágenes se usarán para CUALQUIER dispositivo en la categoría de densidad, por lo que su imagen ldpi (240 x 320) podría extenderse a 1024x600 en una tableta extra grande con una densidad de imagen pequeña (~ 120 ppp). Por lo tanto, 9-patch es la mejor solución para el estiramiento, siempre que no desee una foto o gráficos complicados para una pantalla de inicio (tenga en cuenta estas limitaciones al crear el diseño).

Nuevamente, la única forma de que este estiramiento no suceda es diseñar una pantalla para cada resolución (o una para cada combinación de resolución-densidad, si desea evitar que las imágenes se vuelvan demasiado pequeñas / grandes en dispositivos de alta / baja densidad), o decir la imagen no se estira y aparece un color de fondo donde sea que se produzca el estiramiento (recuerde también que un color específico generado por el motor de Android probablemente se verá diferente del mismo color específico representado por Photoshop, debido a los perfiles de color).

Espero que esto tenga sentido. ¡Buena suerte!

MODO RETRATO

MDPI es 320x480 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 = 960x1440px

XXXHDPI es 4 x MDPI = 1280x1920px

MODO PAISAJE

MDPI es 480x320 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

EDITAR:

Sugeriría usar Lottie para la pantalla de inicio si está leyendo esto en 2019+

RETRATO

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

PAISAJE

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

He buscado la mejor y más simple respuesta para hacer una imagen de 9 parches. Ahora hacer la imagen de 9 parches 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 con solo un clic.

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

Esto lo ayudará a suavizar y acelerar su rendimiento, y para que el logotipo use imágenes de parche .9.

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

Hace algún tiempo creé un archivo de Excel con dimensiones compatibles
Espero que esto sea útil para alguien

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

Enlace1: dimensiones.xlsx

Enlace2: dimensiones.xlsx

En mi caso, utilicé la lista dibujable en style.xml. Con la lista de capas dibujable, solo necesita una png para todos los tamaños 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>
</layer-list>

"background_noizi" es un archivo png en la carpeta dibujable. Espero que esto ayude.

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

ir a material.io

Solución editada que hará que su SplashScreen se vea genial en todas las API, incluidas API21 a API23

Si solo está apuntando a APIs24 +, simplemente puede reducir su vector dibujable directamente en su archivo xml de la siguiente manera:

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
    android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
    android:strokeColor="#292929"
    android:strokeWidth="24" />
</vector>

en el código anterior, estoy volviendo a escalar un dibujo que dibujé en un lienzo de 640x640 para que sea 240x240. luego lo puse en mi pantalla de inicio dibujable así y funciona muy bien:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">

<!-- The background color, preferably the same as your normal theme -->
<item>
    <shape>
        <size android:height="120dp" android:width="120dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item
    android:drawable="@drawable/logo_vect"
    android:gravity="center">

</item>
</layer-list>

mi código en realidad solo dibuja el triángulo en la imagen en la parte inferior, pero aquí puede ver lo que puede lograr con esto. La resolución finalmente es excelente en comparación con los bordes pixelados que obtenía al usar el mapa de bits. así que use un vector dibujable por todos los medios (hay un sitio llamado vectr que usé para crear el mío sin la molestia de descargar software especializado).

EDITAR para que funcione también en API21-22-23

Si bien la solución anterior funciona para dispositivos que ejecutan API24 +, me decepcionó mucho después de instalar mi aplicación en un dispositivo que ejecuta API22. Me di cuenta de que la pantalla de bienvenida intentaba nuevamente llenar toda la vista y parecía una mierda. Después de arrancarme las cejas durante medio día, finalmente forcé una solución por fuerza de voluntad.

necesita crear un segundo archivo llamado exactamente como el splashscreen xml (digamos splash_screen.xml) y colocarlo en 2 carpetas llamadas drawable-v22 y drawable-v21 que creará en la carpeta res / (para verlas usted tiene que cambiar la vista de su proyecto de Android a Project). Esto sirve para indicarle a su teléfono que redirija a los archivos ubicados en esas carpetas cada vez que el dispositivo relevante ejecute una API correspondiente al sufijo -vXX en la carpeta dibujable, consulte este enlace . coloque el siguiente código en la lista de capas del archivo splash_screen.xml que cree en estas carpetas:

<item>
<shape>
    <size android:height="120dp" android:width="120dp"/>
    <solid android:color="@android:color/white"/>
</shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
    <bitmap android:gravity="center"
        android:src="logo_vect"/>

</item>

Por alguna razón para estas API, debe envolver su dibujo en un mapa de bits para que funcione y que el resultado final se vea igual. El problema es que debe usar el enfoque con las carpetas extraíbles adicionales, ya que la segunda versión del archivo splash_screen.xml provocará que su pantalla de inicio no se muestre en todos los dispositivos que ejecutan API superiores a 23. Es posible que también deba colocar la primera versión de splash_screen.xml en drawable-v24, ya que Android se predetermina a la carpeta drawable-vXX más cercana que puede encontrar para obtener recursos. espero que esto ayude

Basado en esta respuesta de Lucas Cerro , calculé las dimensiones usando las proporciones en los documentos de Android , usando la línea de base en la respuesta. ¡Espero que esto ayude a alguien más a venir a esta publicación!

• xxxlarge (xxxhdpi): 1280x1920 (4.0x)
• xxlarge (xxhdpi): 960x1440 (3.0x)
• xlarge (xhdpi): 640x960 (2.0x)
• grande (hdpi): 480x800 (1.5x)
• medio (mdpi): 320x480 (línea base 1.0x)
• pequeño (ldpi): 240x320 (0.75x)