studio - Tamaños de imagen de la pantalla de inicio de Android para adaptarse a todos los dispositivos

tamaño de imagenes para aplicaciones moviles (9)

Renuncia

Esta respuesta es de 2013 y está seriamente 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 siempre es difícil de encontrar).

Aquí está la versión tl / dr

Crea 4 imágenes, una para cada densidad de pantalla:
- xlarge (xhdpi): 640x960
- grande (hdpi): 480x800
- mediano (mdpi): 320x480
- pequeño (ldpi): 240x320
Lea la introducción de la imagen de 9 parches en la Guía del desarrollador de Android
Diseñe imágenes que tengan áreas que puedan estirarse 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 según el estándar de 9 parches.

fin de tl; dr. Post completo por delante

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

Ajuste 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 un "tamaño de imagen correcto" para una pantalla de inicio, ya que no hay resoluciones de pantalla fijas. Eso plantea un problema para las personas que desean implementar una pantalla de inicio.

¿Tus usuarios realmente quieren ver una pantalla de bienvenida?

(En una nota lateral, las pantallas de inicio están algo desalentadas entre los usuarios de la usabilidad. Se argumenta que el usuario ya sabe en qué aplicación hizo tapping, y no es necesario marcar su imagen con una pantalla de inicio, ya que solo interrumpe la experiencia del usuario con un "anuncio". Sin embargo, debe usarse en aplicaciones que requieran una carga considerable cuando se inicializa (5s +), incluidos los juegos y demás, para que el usuario no se atasque preguntándose si la aplicación se bloqueó o no)

Densidad de pantalla; 4 clases

Entonces, dadas las diferentes resoluciones de pantalla en los teléfonos del 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:

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

Lo que usted (si es un diseñador) necesita saber de esto es que, básicamente, Android elige entre 4 imágenes para mostrar, según el dispositivo. 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 esto en mente, sepa esto: a menos que diseñe una pantalla para cada resolución única que se usa en Android, su imagen se ampliará para ajustarse 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. Básicamente, tiene dos opciones: crear una imagen para cada combinación de densidad / tamaño de pantalla, o crear cuatro imágenes de 9 parches.

La solución más difícil es diseñar una pantalla de inicio 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 se encuentra en la lista). Y suponiendo que tiene algunos pequeños detalles en la imagen, como el texto pequeño, tiene que 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 / dpi) el logotipo puede volverse demasiado pequeño, o algún texto puede resultar ilegible.

Imagen de 9 parches

La otra solución es crear una imagen de 9 parches . Es básicamente 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 la imagen se podrán estirar. No voy a 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

Puede hacer estas imágenes en photoshop (o en cualquier software de edición de imágenes que pueda crear páginas transparentes con precisión).
El borde de 1 píxel debe ser COMPLETAMENTE TRANSPARENTE.
El borde transparente de 1 píxel tiene que estar alrededor de su imagen, no solo arriba y a la izquierda.
solo puede dibujar píxeles negros (# 000000) en esta área.
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).
Si elige usar 2 puntos, la imagen se ampliará proporcionalmente (por lo que cada punto tomará turnos para expandirse hasta que se logre la anchura / altura final)
El borde de 1px debe ser adicional a las dimensiones del archivo base previsto. Por lo tanto, una imagen de 100x100 de 9 parches debe tener 102x102 (100x100 + 1px en la parte superior, inferior, izquierda y derecha)
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 arriba y abajo (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 (100x100 tamaño final, para propósitos de la aplicación):

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

Observe las marcas de 1px 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 muy alta (ppp), la imagen se vería demasiado pequeña. Probablemente todavía sea legible, pero en una tableta con una resolución de 1920x1200, la imagen aparecerá como un cuadrado muy pequeño en el medio. Entonces, ¿cuál es la solución? Diseñe 4 imágenes de lanzadores de 9 parches diferentes, cada una para un conjunto de densidad diferente. Para asegurarse de que no se producirá una 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 el parche 9 solo explica el estiramiento, por lo que, en un proceso de reducción, el texto pequeño y otros elementos pueden perder la 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
mediano (mdpi): 320x480
pequeño (ldpi): 240x320

Así que diseñe cuatro pantallas de inicio en las resoluciones anteriores, expanda las imágenes, coloque un borde transparente de 1px alrededor del lienzo y marque las filas / columnas que se podrán estirar. 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 extenderse a 1024x600 en una tableta extra grande con una densidad de imagen pequeña (~ 120 dpi). Por lo tanto, 9-patch es la mejor solución para el estiramiento, siempre y cuando 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 ocurra 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 sean demasiado pequeñas / grandes en dispositivos de alta / baja densidad), o para contar la imagen no se estira y aparece un color de fondo en cualquier lugar donde se produzca el estiramiento (también recuerde que un color específico representado 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 algún sentido. ¡Buena suerte!

Tengo una pantalla completa PNG que quiero mostrar en splash. Solo hay un error allí, y no tengo idea de qué tamaño colocar en cada carpeta ldpi ( 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 el splash se vea bien en todas las pantallas?

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

En mi caso, usé la lista dibujable en style.xml. Con la lista de capas dibujable, solo ha necesitado un png para todos los tamaños de pantalla.

<resources xmlns:tools="http://schemas.android.com/tools">  <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 una carpeta dibujable. Espero que te ayude

Hace algún tiempo creé un archivo excel con dimensiones compatibles
Espero que esto sea de ayuda para alguien.

Para ser honesto, perdí la idea, pero se refiere a otra característica de la pantalla como tamaño (no solo densidad)

Por favor avísame si hay algunos errores.

Link1: dimensiones.xlsx

Link2: dimensiones.xlsx

He buscado la mejor y la respuesta más sencilla para hacer una imagen de 9 parches. Ahora hacer la imagen del parche 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 se refiere 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 use imágenes de parche .9.

** Si está buscando detalles de pantalla para todos los tipos de dispositivos principales **

ir a material.io

RETRATO

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

PAISAJE

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

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