¿Tamaños de pantalla de presentación 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 la aplicación de Android usando phonegap. Tengo que diseñar imágenes de 4 tamaños que se ajusten a 4 tipos de pantallas como ldpi, mdpi, hdpi, xhdpi. ¿Alguien puede decirme los tamaños exactos en píxeles de estas pantallas para que pueda diseñar en ese tamaño?

Respuesta de ejemplo:

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.

<gap:splash src="splash/android/ldpi.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="splash/android/mdpi.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="splash/android/hdpi.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="splash/android/xhdpi.png" gap:platform="android" gap:density="xhdpi" />

Puede haber cualquier cantidad de 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 mínimos de pantalla, que son proporcionados por 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 de al menos 960dp x 720dp
• las pantallas grandes miden al menos 640dp x 480dp
• las pantallas normales son de al menos 470dp x 320dp
• las pantallas pequeñas miden al menos 426dp x 320dp

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

Puede encontrar más información sobre varias pantallas aquí .

9 Imagen de parche

La mejor solución es crear una imagen de nueve parches para que el borde de la imagen se pueda estirar para adaptarse 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

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 quizás también el tamaño XXHDPI debido a las áreas repetidas de las imágenes de 9 parches. Por otro lado, si solo se utilizan tamaños de retrato, el tamaño de la aplicación podría ser más menor. Más imágenes significan que se necesita más espacio.

Presta atención

Creo que no hay un tamaño exacto para todos los dispositivos. Yo uso Xperia Z 5" . Si desarrolla una aplicación multiplataforma en vista web debe tener en cuenta un montón de cosas (si la pantalla tiene botones de navegación de teclas programables o no, etc.). Por lo tanto, creo que sólo hay una solución adecuada. La solución es a Prepare una pantalla de bienvenida de 9 parches (busque el How to design a new splash screentítulo a continuación).

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

¡Eso es!

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

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
<platform name="android">
    <splash src="res/screen/android/ldpi.9.png" density="ldpi"/>
    <splash src="res/screen/android/mdpi.9.png" density="mdpi"/>
    <splash src="res/screen/android/hdpi.9.png" density="hdpi"/>
    <splash src="res/screen/android/xhdpi.9.png" density="xhdpi"/> 
</platform>

Para agregar líneas en el config.xml cuando no se usa pantallas de presentación que 9 parches

<platform name="android">
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

Cómo diseñar una nueva pantalla de presentación

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

• En Photoshop: Archivo -> Nuevo en una nueva ventana de diálogo configure sus pantallas

  Ancho: 720 píxeles Alto: 1280 píxeles

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

  Felicitaciones ... Tiene una plantilla de pantalla de presentación de 720dp x 1280dp.

Cómo generar una pantalla de bienvenida de 9 parches

Después de diseñar la pantalla de presentación, si desea diseñar la pantalla de presentación de 9 parches, debe insertar un espacio de 1 píxel para cada lado. Por esta razón, debe aumentar +2 píxeles el ancho y la altura del tamaño de su lienzo (ahora los tamaños de las imágenes son 722 x 1282).

Dejé el espacio en blanco de 1 píxel en cada lado como se indica a continuación.
Cambiando el tamaño del lienzo usando Photoshop:
- Abra un archivo png de la pantalla de bienvenida en Photoshop
- Haga clic en el icono de candado junto al nombre de 'Fondo' en el campo Capas (para dejar en blanco en lugar de otro color como el blanco) si hay como el abajo:

- Cambie el tamaño del lienzo en el menú Imagen (Ancho: 720 píxeles a 722 píxeles y Alto: 1280 píxeles a 1282 píxeles). Ahora, debería ver un espacio de 1 píxel a cada lado de la imagen de la pantalla de inicio.

Luego puede usar C: \ Program Files (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat para convertir un archivo de 9 parches. Para eso, abra su pantalla de bienvenida en la aplicación draw9patch. Debe definir su logotipo y áreas expandibles. Observe la línea negra de 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 inicio. Exactamente como lo diseñó. Las líneas derecha e inferior definen el área que se puede agregar y quitar (áreas que se repiten automáticamente).

Solo haz eso: haz zoom en el borde superior de tu imagen en la aplicación draw9patch. Haga clic y arrastre el mouse para dibujar una línea. Y presione Mayús + clic y arrastre el mouse para borrar la línea.

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

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

Y si necesita tamaños de íconos de aplicaciones 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

Para dispositivos móviles Android

LDPI- icon-36x36, splash-426x320 (ahora con valores correctos)

MDPI- icono-48x48, splash-470x320

HDPI- icono 72x72, salpicadura- 640x480

XHDPI- icono-96x96, salpicadura- 960x720

XXHDPI- icono- 144x144

Todo en píxeles.

Para dispositivos de tableta Android

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

• LDPI: Retrato: 200 X 320px. Paisaje: 320 X 200px.
• MDPI: Retrato: 320 X 480px. Paisaje: 480 X 320px.
• HDPI: Retrato: 480 X 800px. Paisaje: 800 X 480px.
• XHDPI: Retrato: 720 X 1280px. Paisaje: 1280 X 720px.
• XXHDPI: Retrato: 960 X 1600px. Paisaje: 1600 X 960px.
• XXXHDPI: Retrato: 1280 X 1920px. Paisaje: 1920 X 1280px.

• Las pantallas Xlarge son de al menos 960dp x 720dp
• Las pantallas grandes de los elementos de la lista son de al menos 640dp x 480dp
• Las pantallas normales de los elementos de la lista son al menos 470dp x 320dp
• Las pantallas pequeñas de los elementos de la lista tienen al menos 426 dp x 320 dp

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

Utilice este sitio web: http://ticons.fokkezb.nl :)

Te lo pone más fácil y genera los tamaños correctos directamente

Las pantallas xlarge son de al menos 960dp x 720dp layout-xlarge tableta de 10 "(720x1280 mdpi, 800x1280 mdpi, etc.)

las pantallas grandes son al menos una tableta tweener de 640dp x 480dp como la Streak (480x800 mdpi), tableta de 7 "(600x1024 mdpi)

Las pantallas normales tienen un diseño de al menos 470dp x 320dp pantalla típica de teléfono (480x800 hdpi)

las pantallas pequeñas tienen al menos 426dp x 320dp pantalla típica de teléfono (240x320 ldpi, 320x480 mdpi, etc.)