Tamaños de pantalla de bienvenida de Android para pantallas ldpi, mdpi, hdpi, xhdpi? – Por ejemplo: 1024X768 píxeles para ldpi

Tengo que diseñar pantallas de presentación (imágenes que se ajustan a la pantalla mientras se cargan) para aplicaciones de Android usando Phonegap. Tengo que diseñar 4 imágenes de tamaño que se ajusten a 4 tipos de pantallas como ldpi, mdpi, hdpi, xhdpi. ¿Alguien puede decirme los tamaños exactos en píxeles para estas pantallas para que pueda diseñar en ese tamaño?

Ejemplo de respuesta:

ldpi - 1024X768 px mdpi - 111 X 156 px We support ldpi, mdpi, hdpi and xhdpi displays; the following will define splash screens for each specific screen type.     

Puede haber varios tamaños de pantalla diferentes debido a que Android no tiene un tamaño estándar establecido, por lo que como guía puede usar los tamaños de pantalla mínimos que proporciona Google.

Según las estadísticas de Google, la mayoría de las pantallas ldpi son pantallas pequeñas y la mayoría de las pantallas mdpi, hdpi, xhdpi y xxhdpi son pantallas de tamaño normal.

  • Las pantallas xlarge son al menos 960dp x 720dp
  • pantallas de gran tamaño son de al menos 640dp x 480dp
  • las pantallas normales son al menos 470dp x 320dp
  • las pantallas pequeñas son al menos 426 pd x 320 pd

Puede ver las estadísticas sobre los tamaños relativos de los dispositivos en el tablero de Google que está disponible aquí .

Puede encontrar más información en pantallas múltiples aquí .

Imagen de 9 parches

La mejor solución es crear una imagen de nueve plots para que el borde de la imagen pueda estirarse para ajustarse al tamaño de la pantalla sin afectar el área estática de la imagen.

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Para dispositivos móviles con Android

LDPI- icon-36×36, splash-426×320 (ahora con los valores correctos)


MDPI- icon-48×48, splash-470×320


HDPI- icon 72×72, splash- 640×480


XHDPI- icon-96×96, splash- 960×720


XXHDPI- icono- 144×144

Todo en pixeles

Para dispositivos con tableta Android

 LDPI: Portrait: 200x320px Landscape: 320x200px MDPI: Portrait: 320x480px Landscape: 480x320px HDPI: Portrait: 480x800px Landscape: 800x480px XHDPI: Portrait: 720px1280px Landscape: 1280x720px 

Tamaños de pantalla de bienvenida para Android

y al mismo tiempo para Cordova (también conocido como Phonegap), React-Native y todas las demás plataformas de desarrollo

 Format : 9-Patch PNG (recommended) Dimensions - LDPI: - Portrait: 200x320px - Landscape: 320x200px - MDPI: - Portrait: 320x480px - Landscape: 480x320px - HDPI: - Portrait: 480x800px - Landscape: 800x480px - XHDPI: - Portrait: 720px1280px - Landscape: 1280x720px - XXHDPI - Portrait: 960x1600px - Landscape: 1600x960px - XXXHDPI - Portrait: 1280x1920px - Landscape: 1920x1280px 

Nota: No es necesario preparar XXXHDPI y también puede ser XXHDPI debido a las áreas repetitivas de las imágenes de 9 parches. Por otro lado, si solo se usan los tamaños de retrato, el tamaño de la aplicación podría ser menor. Más fotos significan más espacio es necesario.

Presta atención

Creo que no hay un tamaño exacto para todos los dispositivos. Uso Xperia Z 5 “. Si desarrolla una aplicación crossplatform-webview, debería considerar muchas cosas (tanto si la pantalla tiene botones de navegación con teclas progtwigbles como si no, etc.). Por lo tanto, creo que solo hay una solución adecuada. prepare una pantalla de bienvenida de 9 parches (encuentre How to design a new splash screen encabezado de How to design a new splash screen continuación).

  1. Cree pantallas de bienvenida para los tamaños de pantalla anteriores como 9-patch . Asigne nombres a sus archivos con sufijos .9.png
  2. Agregue las líneas a continuación en su archivo config.xml
  3. Agregue el complemento de pantalla de bienvenida si es necesario.
  4. Ejecute su proyecto.

¡Eso es!

Código específico de cordova
Se agregarán líneas en config.xml para pantallas de presentación de 9 parches

         

Se agregarán líneas en el config.xml cuando se utilicen pantallas de presentación que no sean de 9 parches

           

Cómo diseñar una nueva pantalla de bienvenida

Describiría una forma simple de crear una pantalla de bienvenida adecuada de esta manera. Supongamos que estamos diseñando una pantalla de 1280 pd x 720 pd – xhdpi (x-large). He escrito por el ejemplo siguiente;

  • En Photoshop: Archivo -> Nuevo en el nuevo cuadro de diálogo configurar sus pantallas

    Ancho: 720 píxeles Altura: 1280 píxeles

    Supongo que los tamaños anteriores significan que la resolución es de 320 píxeles / pulgada. Pero para garantizar que puede cambiar el valor de resolución a 320 en su ventana de diálogo. En este caso Pixels / Inch = DPI

    Felicitaciones … Usted tiene una plantilla de pantalla de bienvenida de 720dp x 1280dp.

Cómo generar una pantalla de bienvenida de 9 parches

Después de diseñar su pantalla de bienvenida, si desea diseñar la pantalla de bienvenida de 9-Patch, debe insertar un espacio de 1 píxel para cada lado. Por este motivo, deberías boost +2 píxel el ancho y el alto de tu canvas (ahora tus tamaños de imagen son 722 x 1282).

He dejado la brecha de 1 píxel en blanco en cada lado como se indica a continuación.
Cambiar el tamaño del canvas usando Photoshop:
– Abrir un archivo png de pantalla de bienvenida en Photoshop
– Haga clic en el icono de candado al lado del nombre ‘Fondo’ en el campo Capas (para dejar en blanco en lugar de otro color como blanco) si hay alguno de los siguientes:
enter image description here
– Cambie el tamaño del canvas desde el menú Imagen (Ancho: 720 píxeles a 722 píxeles y Altura: 1280 píxeles a 1282 píxeles). Ahora, debería ver un espacio de 1 píxel en cada lado de la imagen de la pantalla de presentación.

Luego puede usar C: \ Archivos de progtwig (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat para convertir un archivo de 9 parches. Para eso abre tu pantalla de inicio en la aplicación draw9patch. Debe definir su logotipo y áreas expandibles. Observe la línea negra en la siguiente pantalla de presentación de ejemplo. El grosor de la línea negra es de solo 1 px;) Las líneas negras de los lados izquierdo y superior definen el área de visualización obligatoria de la pantalla de bienvenida. Exactamente como lo diseñó. Las líneas derecha e inferior definen el área extraíble y aditable (áreas que se repiten automáticamente).

Simplemente hazlo: acerca el borde superior de tu imagen a la aplicación draw9patch. Haga clic y arrastre su mouse para dibujar la línea. Y presiona shift + clic y arrastra el mouse para borrar la línea.

Muestra de diseño de 9 parches

Si desarrolla una aplicación multiplataforma (como Cordova / PhoneGap), puede encontrar la siguiente dirección casi todos los tamaños de pantallas de presentación de OS móvil. Haga clic para Windows Phone , WebOS , BlackBerry , Bada-WAC y los tamaños de pantalla de presentación de Bada .

https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes

Y si necesita tamaños de icons de aplicaciones de iOS, Android, etc., puede visitar aquí .

IOS

 Format : PNG (recommended) Dimensions - Tablet (iPad) - Non-Retina (1x) - Portrait: 768x1024px - Landscape: 1024x768px - Retina (2x) - Portrait: 1536x2048px - Landscape: 2048x1536px - Handheld (iPhone, iPod) - Non-Retina (1x) - Portrait: 320x480px - Landscape: 480x320px - Retina (2x) - Portrait: 640x960px - Landscape: 960x640px - iPhone 5 Retina (2x) - Portrait: 640x1136px - Landscape: 1136x640px - iPhone 6 (2x) - Portrait: 750x1334px - Landscape: 1334x750px - iPhone 6 Plus (3x) - Portrait: 1242x2208px - Landscape: 2208x1242px 
  • LDPI: Retrato: 200 X 320px. Paisaje: 320 X 200px.
  • MDPI: Retrato: 320 X 480 px. Paisaje: 480 X 320px.
  • HDPI: Retrato: 480 X 800px. Paisaje: 800 X 480 px.
  • XHDPI: Retrato: 720 X 1280 px. Paisaje: 1280 X 720px.
  • XXHDPI: Retrato: 960 X 1600px. Paisaje: 1600 X 960 px.
  • XXXHDPI: Retrato: 1280 X 1920 px. Paisaje: 1920 X 1280 px.
  • Las pantallas Xlarge tienen al menos 960 ppp x 720 pb
  • Las pantallas grandes del elemento de lista tienen al menos 640 pb x 480 pb
  • Las pantallas normales del elemento de lista son al menos 470 pd x 320 pd
  • Las pantallas pequeñas de elementos de lista tienen al menos 426 pd x 320 pb

Use esto para crear sus imágenes y ponerlas en una carpeta de recursos específica.

Simplemente use este sitio web: http://ticons.fokkezb.nl 🙂

Te lo facilita y genera los tamaños correctos directamente

Las pantallas xlarge tienen una distribución de al menos 960 pb x 720 pb, una gran tableta de 10 “(720×1280 mdpi, 800×1280 mdpi, etc.)

las pantallas grandes tienen al menos una tableta tweener de 640 pb x 480 pb, como la tableta Streak (480×800 mdpi), 7 “(600×1024 mdpi)

las pantallas normales tienen un diseño típico de al menos 470 ppp x 320 pd (480×800 ppp)

las pantallas pequeñas tienen al menos 426 ppp x 320 ppp de pantalla típica del teléfono (240×320 ldpi, 320×480 mdpi, etc.)