Tailles d'écran de démarrage Android pour les écrans ldpi, mdpi, hdpi, xhdpi? - par exemple: 1024X768 pixels pour ldpi


103

Je dois concevoir des écrans de démarrage (images qui s'adaptent à l'écran lors du chargement) pour une application Android en utilisant phonegap. Je dois concevoir des images de 4 tailles qui conviennent à 4 types d'écrans comme ldpi, mdpi, hdpi, xhdpi. Quelqu'un peut-il me dire les tailles exactes en pixels de ces écrans afin que je puisse concevoir dans cette taille?

Exemple de réponse:

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" />

Réponses:


98

Il peut y avoir un nombre illimité de tailles d'écran différentes en raison du fait qu'Android n'a pas de taille standard définie, vous pouvez donc utiliser les tailles d'écran minimales fournies par Google.

Selon les statistiques de Google, la majorité des écrans ldpi sont de petits écrans et la majorité des écrans mdpi, hdpi, xhdpi et xxhdpi sont des écrans de taille normale.

  • Les écrans xlarge mesurent au moins 960dp x 720dp
  • les grands écrans mesurent au moins 640dp x 480dp
  • les écrans normaux mesurent au moins 470dp x 320dp
  • les petits écrans mesurent au moins 426dp x 320dp

Vous pouvez consulter les statistiques sur les tailles relatives des appareils sur le tableau de bord de Google qui est disponible ici .

Plus d'informations sur plusieurs écrans peuvent être trouvées ici .

9 Image de patch

La meilleure solution consiste à créer une image à neuf patchs afin que la bordure de l'image puisse s'étirer pour s'adapter à la taille de l'écran sans affecter la zone statique de l'image.

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


Pourriez-vous également inclure xxhdpi? (s'il existe)
Adonis K.Kakoulidis

Google définit xxhdpi comme ~ 480 DPI. Ils ne fournissent pas une taille d'écran minimale pour cela d'après ce que je peux voir.
Alex Wiese

8
Pourquoi cela a-t-il autant de votes positifs? xlarge != xhdpi, ils mesurent deux choses totalement différentes. Ces tailles dp sont répertoriées pour les seaux de taille, pas pour la densité.
Geobits

@geobits regarde la question. Il demande quelle taille devraient avoir ses écrans de démarrage pour chaque densité qu'il prend en charge. Comme il peut y avoir n'importe quel nombre de tailles différentes en raison du fait qu'Android n'a pas de taille standard définie, la réponse correcte la plus proche que nous pouvons donner est la taille d'écran minimale, fournie par Google. Vous pouvez en savoir plus à ce sujet si vous suivez le lien dans la réponse.
Alex Wiese

2
Je comprends ce que vous dites, mais ce n'est pas ce que dit votre réponse. Si c'était le cas, je n'aurais même pas fait de commentaire. Il a demandé une liste de tailles, et vous donnez simplement une liste basée sur autre chose sans explication. Vous devez le modifier, que vous ayez ou non un lien vers les documents.
Geobits du

135

Tailles de l'écran de démarrage pour Android

et en même temps pour Cordova (alias Phonegap), React-Native et toutes les autres plateformes de développement

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

Remarque: la préparation de XXXHDPI n'est pas nécessaire et peut-être aussi de la taille XXHDPI en raison des zones répétitives des images à 9 patchs. D'un autre côté, si seules les tailles Portrait sont utilisées, la taille de l'application pourrait être plus réduite. Plus de photos signifie plus d'espace est nécessaire.

Faites attention

Je pense qu'il n'y a pas de taille exacte pour tous les appareils. J'utilise Xperia Z 5 ". Si vous développez une application crossplatform-webview, vous devriez considérer beaucoup de choses (que l'écran ait des boutons de navigation par touches programmables ou non, etc.). Par conséquent, je pense qu'il n'y a qu'une seule solution appropriée. La solution est de préparez un écran de démarrage de 9 patchs (trouvez l'en- How to design a new splash screentête ci-dessous).

  1. Créez des écrans de démarrage pour les tailles d'écran ci-dessus en 9 patchs . Donnez des noms à vos fichiers avec les suffixes .9.png
  2. Ajoutez les lignes ci-dessous dans votre fichier config.xml
  3. Ajoutez le plugin d'écran de démarrage si nécessaire.
  4. Exécutez votre projet.

C'est tout!

Code spécifique à Cordova
A ajouter des lignes dans le fichier config.xml pour les écrans de démarrage à 9 patchs

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

A ajouter des lignes dans le fichier config.xml lors de l'utilisation d' écrans de démarrage non -9-patch

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

Comment concevoir un nouvel écran de démarrage

Je décrirais un moyen simple de créer un écran de démarrage approprié en utilisant cette méthode. Supposons que nous concevons un écran 1280dp x 720dp - xhdpi (x-large). J'ai écrit pour l'exemple ci-dessous;

  • Dans Photoshop: Fichier -> Nouveau dans une nouvelle fenêtre de dialogue définissez vos écrans

    Largeur: 720 pixels Hauteur: 1280 pixels

    Je suppose que les tailles ci-dessus signifient que la résolution est de 320 pixels / pouce. Mais pour vous assurer que vous pouvez changer la valeur de résolution à 320 dans votre fenêtre de dialogue. Dans ce cas Pixels / Inch = DPI

    Félicitations ... Vous avez un modèle d'écran de démarrage 720dp x 1280dp.

Comment générer un écran de démarrage à 9 patchs

Après avoir conçu votre écran de démarrage, si vous souhaitez concevoir un écran de démarrage 9-Patch, vous devez insérer un espace de 1 pixel pour chaque côté. Pour cette raison, vous devez augmenter de +2 pixels la largeur et la hauteur de la taille de votre toile (maintenant vos tailles d'image sont 722 x 1282).

J'ai laissé l'espace vide de 1 pixel de chaque côté comme indiqué ci-dessous.
Modification de la taille du canevas à l'aide de Photoshop:
- Ouvrez un fichier png d'écran de démarrage dans Photoshop
- Cliquez sur l'icône de verrouillage à côté du nom `` Arrière-plan '' dans le champ Calques (pour laisser vide au lieu d'une autre couleur comme le blanc) s'il y a comme le ci-dessous: - Modifiez la taille du canevas dans le menu Image (Largeur: 720 pixels à 722 pixels et Hauteur: 1280 pixels à 1282 pixels). Maintenant, devrait voir un espace de 1 pixel de chaque côté de l'image de l'écran de démarrage.
entrez la description de l'image ici


Ensuite, vous pouvez utiliser C: \ Program Files (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat pour convertir un fichier 9-patch. Pour cela, ouvrez votre écran de démarrage sur l'application draw9patch. Vous devez définir votre logo et les zones extensibles. Notez la ligne noire de l'écran de démarrage de l'exemple suivant. L'épaisseur de la ligne noire n'est que de 1 px;) Les lignes noires des côtés gauche et supérieur définissent la zone d'affichage incontournable de votre écran de démarrage. Exactement comme vous l'avez conçu. Les lignes de droite et du bas définissent la zone supplémentaire et amovible (zones répétées automatiquement).

Faites simplement cela: Zoomez sur le bord supérieur de votre image sur l'application draw9patch. Cliquez et faites glisser votre souris pour tracer une ligne. Et appuyez sur Maj + clic et faites glisser votre souris pour effacer la ligne.

Exemple de conception à 9 patchs

Si vous développez une application multiplateforme (comme Cordova / PhoneGap), vous pouvez trouver l'adresse suivante presque toutes les tailles d'écran de démarrage du système d'exploitation mabile. Cliquez pour les tailles d'écran de démarrage Windows Phone , WebOS , BlackBerry , Bada-WAC et Bada .

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

Et si vous avez besoin de tailles d'icônes d'applications IOS, Android, etc., vous pouvez visiter ici .

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

105

Pour les appareils mobiles Android

LDPI- icon-36x36, splash-426x320 (maintenant avec des valeurs correctes)


MDPI- icône-48x48, éclaboussure-470x320


Icône HDPI- 72x72, éclaboussure- 640x480


XHDPI- icône-96x96, splash- 960x720


XXHDPI- icône- 144x144

Tout en pixels.

Pour les tablettes Android

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

@Geobits: les deux sont en pixels. C'est pour différentes résolutions. Je n'y vois aucune confusion. étrange!!
Nijil Nair

1
Les tailles que vous donnez ldpi/mdpi/hdpi/xhdpicorrespondent à small/normal/large/xlargeen dp en fonction de cela . En outre, s'il s'agit de tailles de pixels, elles doivent être de l'échelle 0.75/1/1.5/2. Avez-vous une source pour ces tailles que je ne vois pas?
Geobits

@NijilNair: comment se fait-il que la résolution des images sur tablette soit plus petite que sur les téléphones portables?! Cela ne devrait-il pas être l'inverse? Par exemple, je suis surpris par le "Mobile phone ldpi: 426x320" puis "Tablet ldpi: 320 x 200" ... ne me semble pas logique du tout. Merci de répondre!
Phalanx

@Phalanx: vérifiez ce lien. developer.android.com/guide/practices/… .
Nijil Nair

1
Êtes-vous sûr que l'icône LDPI n'est pas 36x36?
Vladius

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

2
Partout où je lis xhdpi est juste le double de mdpi, donc d'après cela xhdpi devrait être de 640 x 960, mais vous l'avez écrit 720x1280. Pouvez-vous s'il vous plaît expliquer comment c'est 720x1280? Quelle formule avez-vous utilisée?
Rahul Sharma

10
  • Les écrans Xlarge mesurent au moins 960dp x 720dp
  • Les grands écrans des éléments de liste mesurent au moins 640dp x 480dp
  • Les écrans normaux des éléments de liste mesurent au moins 470dp x 320dp
  • Les petits écrans des éléments de liste mesurent au moins 426dp x 320dp

Utilisez-le pour créer vos images et les placer dans un dossier de ressources spécifique.



2

Les écrans xlarge sont au moins 960dp x 720dp layout-xlarge 10 "tablette (720x1280 mdpi, 800x1280 mdpi, etc.)

les grands écrans sont au moins 640dp x 480dp tweener tablette comme la Streak (480x800 mdpi), 7 "tablette (600x1024 mdpi)

les écrans normaux sont au moins 470dp x 320dp disposition écran de téléphone typique (480x800 hdpi)

les petits écrans sont au moins 426dp x 320dp écran de téléphone typique (240x320 ldpi, 320x480 mdpi, etc.)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.