¿Tamaños de pantalla de presentación de Android para pantallas ldpi, mdpi, hdpi, xhdpi? - por ejemplo: 1024X768 píxeles para ldpi

103

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" />
usuario1767962
fuente
3
esto te ayudará
Mohammed Azharuddin Shaikh

Respuestas:

98

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

Alex Wiese
fuente
¿Podría incluir también xxhdpi? (si existe)
Adonis K. Kakoulidis
Google define xxhdpi como ~ 480 DPI. No proporcionan un tamaño de pantalla mínimo para esto por lo que puedo ver.
Alex Wiese
8
¿Por qué esto tiene tantos votos a favor? xlarge != xhdpi, están midiendo dos cosas totalmente diferentes. Esos tamaños de dp se enumeran para los cubos de tamaño, no para la densidad.
Geobits
@geobits mira la pregunta. Pregunta qué tamaño deberían tener sus pantallas de presentación para cada densidad que soporta. Como puede haber cualquier cantidad de tamaños diferentes debido a que Android no tiene un tamaño estándar establecido, la respuesta correcta más cercana que podemos dar son los tamaños mínimos de pantalla, que es proporcionada por Google. Puede leer más sobre esto si sigue el enlace en la respuesta.
Alex Wiese
2
Entiendo lo que estás diciendo, pero eso no es lo que dice tu respuesta. Si fuera así, ni siquiera habría comentado. Pidió una lista de tamaños, y simplemente le da una lista basada en otra cosa sin explicación. Debe editarlo, ya sea que enlace o no a los documentos.
Geobits
135

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:
ingrese la descripción de la imagen aquí
- 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.

Ejemplo de diseño de 9 parches

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
efkan
fuente
105

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
Nijil Nair
fuente
@Geobits: ambos están en píxeles. Eso es para diferentes resoluciones. No veo ninguna confusión allí. ¡¡extraño!!
Nijil Nair
1
Los tamaños que proporcione ldpi/mdpi/hdpi/xhdpicorresponden small/normal/large/xlargeen dp de acuerdo con esto . Además, si son tamaños de píxeles, deben ser de la escala 0.75/1/1.5/2. ¿Tiene una fuente para estos tamaños que no veo?
Geobits
@NijilNair: ¿cómo es que la resolución de las imágenes en la tableta es más pequeña que en los teléfonos móviles? ¿No debería ser al revés? Por ejemplo, me sorprende con el "Teléfono móvil ldpi: 426x320" y luego "Tablet ldpi: 320 x 200" ... no parece lógico en absoluto. ¡Gracias por responder!
Phalanx
@Phalanx: consulta este enlace. developer.android.com/guide/practices/… .
Nijil Nair
1
¿Está seguro de que el icono LDPI no es de 36x36?
Vladius
32
  • 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.
Manavendher
fuente
2
En todas partes donde leo, xhdpi es solo el doble que mdpi, por lo que de acuerdo con eso, xhdpi debería ser 640 x 960, pero usted lo escribió 720x1280. ¿Puede explicar cómo es 720x1280? ¿Qué fórmula usaste?
Rahul Sharma
10
  • 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.

Puneet
fuente
5

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

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

Oussama L.
fuente
Este sitio web parece ser para imágenes de iOS, no para Android.
Ryan Williams
2
Lo usé para Android y quedé bastante satisfecho con los resultados; à
Oussama L.
2

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.)

Amila
fuente