Tailles d'image de l'écran de démarrage Android pour s'adapter à tous les appareils


214

J'ai un PNG plein écran que je veux afficher sur splash. Une seule erreur là - bas, et je ne sais pas quelle taille à mettre dans chaque dossier drawable ( ldpi, mdpi, hdpiet xhdpi). Mon application est censée fonctionner correctement sur tous les téléphones et tablettes. Quelles tailles (en pixels) dois-je créer pour que le splash s'affiche bien sur tous les écrans?



4
Je veux créer un écran de démarrage ...
arielschon12

1
@verybadalloc Cela pourrait être plus en profondeur mais je peux vous assurer que cela n'a pas aidé OP avec son problème car il a été publié environ un an trop tard: p
keyser

6
oui, je suis presque sûr que ça ne l'a pas aidé. J'ai trouvé ce sujet en essayant de trouver les réponses moi-même et j'ai décidé de poster une autre réponse pour aider ppl à traverser la même chose après moi.
Lucas Cerro du

j'ai répondu à un type de question similaire peut être utile stackoverflow.com/questions/30494811/…
Ramesh K

Réponses:


394

Avertissement

Cette réponse date de 2013 et est sérieusement dépassée. Depuis Android 3.2, il y a maintenant 6 groupes de densité d'écran. Cette réponse sera mise à jour dès que je pourrai, mais sans ETA. Reportez-vous à la documentation officielle pour toutes les densités à l'heure actuelle (bien que les informations sur les tailles de pixels spécifiques soient toujours difficiles à trouver).

Voici la version tl / dr

  • Créez 4 images, une pour chaque densité d'écran:

    • xlarge (xhdpi): 640x960
    • grand (hdpi): 480x800
    • moyen (mdpi): 320x480
    • petit (ldpi): 240x320
  • Lire l' introduction de l'image à 9 patchs dans le Guide du développeur Android

  • Concevez des images dont les zones peuvent être étirées en toute sécurité sans compromettre le résultat final

Avec cela, Android sélectionnera le fichier approprié pour la densité d'image de l'appareil, puis il étirera l'image selon la norme 9 patchs.

fin de tl; dr. Article complet à venir

Je réponds en ce qui concerne l'aspect lié à la conception de la question. Je ne suis pas développeur, je ne pourrai donc pas fournir de code pour implémenter la plupart des solutions proposées. Hélas, mon intention est d'aider les designers qui sont aussi perdus que moi lorsque j'ai aidé à développer ma première application Android.

Convient à toutes les tailles

Avec Android, les entreprises peuvent développer leurs téléphones mobiles et leurs tables de presque toutes les tailles, avec presque toutes les résolutions souhaitées. Pour cette raison, il n'y a pas de "bonne taille d'image" pour un écran de démarrage, car il n'y a pas de résolutions d'écran fixes. Cela pose un problème pour les personnes qui souhaitent implémenter un écran de démarrage.

Vos utilisateurs veulent-ils vraiment voir un écran de démarrage?

(Sur une note latérale, les écrans de démarrage sont quelque peu découragés par les utilisateurs. Il est avancé que l'utilisateur sait déjà sur quelle application il a appuyé, et la personnalisation de votre image avec un écran de démarrage n'est pas nécessaire, car cela interrompt uniquement l'expérience utilisateur avec une "annonce". Elle doit être utilisée, cependant, dans les applications qui nécessitent un certain chargement considérable lors de l'initialisation (5s +), y compris les jeux et autres, afin que l'utilisateur ne se bloque pas en se demandant si l'application a planté ou non)

Densité d'écran; 4 cours

Ainsi, étant donné le nombre de résolutions d'écran différentes sur les téléphones sur le marché, Google a mis en place des alternatives et des solutions astucieuses qui peuvent vous aider. La première chose que vous devez savoir est qu'Android sépare TOUS les écrans en 4 densités d'écran distinctes:

  1. Basse densité (ldpi ~ 120dpi)
  2. Densité moyenne (mdpi ~ 160dpi)
  3. Haute densité (hdpi ~ 240 dpi)
  4. Extra-haute densité (xhdpi ~ 320dpi) (Ces valeurs dpi sont des approximations, car les appareils personnalisés auront des valeurs dpi variables)

Ce que vous (si vous êtes un concepteur) devez savoir, c'est qu'Android choisit essentiellement parmi 4 images à afficher, en fonction de l'appareil. Vous devez donc essentiellement concevoir 4 images différentes (bien que d'autres puissent être développées pour différents formats tels que le grand écran, le mode portrait / paysage, etc.).

Dans cet esprit, sachez ceci: à moins que vous ne conceviez un écran pour chaque résolution unique utilisée dans Android, votre image s'étirera pour s'adapter à la taille de l'écran. Et à moins que votre image ne soit essentiellement un dégradé ou un flou, vous obtiendrez une distorsion indésirable avec l'étirement. Vous avez donc essentiellement deux options: créer une image pour chaque combinaison taille / densité d'écran, ou créer quatre images à 9 patchs.

La solution la plus difficile consiste à concevoir un écran de démarrage différent pour chaque résolution. Vous pouvez commencer par suivre les résolutions du tableau à la fin de cette page (il y en a plus. Exemple: 960 x 720 n'y est pas répertorié). Et en supposant que vous ayez quelques petits détails dans l'image, comme un petit texte, vous devez concevoir plus d'un écran pour chaque résolution. Par exemple, une image 480x800 affichée sur un écran moyen peut sembler correcte, mais sur un écran plus petit (avec une densité / dpi plus élevée) le logo peut devenir trop petit, ou du texte peut devenir illisible.

Image à 9 patchs

L'autre solution consiste à créer une image à 9 patchs . Il s'agit essentiellement d'une bordure transparente de 1 pixel autour de votre image, et en dessinant des pixels noirs dans la zone supérieure et gauche de cette bordure, vous pouvez définir les parties de votre image qui seront autorisées à s'étirer. Je n'entrerai pas dans les détails du fonctionnement des images à 9 patchs, mais, en bref, les pixels qui s'alignent sur les marquages ​​en haut et à gauche sont les pixels qui seront répétés pour étirer l'image.

Quelques règles de base

  1. Vous pouvez créer ces images dans Photoshop (ou tout autre logiciel de retouche d'image qui peut créer avec précision des pngs transparents).
  2. La bordure de 1 pixel doit être PLEINE TRANSPARENTE.
  3. La bordure transparente de 1 pixel doit être tout autour de votre image, pas seulement en haut et à gauche.
  4. vous ne pouvez dessiner que des pixels noirs (# 000000) dans cette zone.
  5. Les bordures supérieure et gauche (qui définissent l'étirement de l'image) ne peuvent avoir qu'un seul point (1px x 1px), deux points (les deux 1px x 1px) ou UNE ligne continue (largeur x 1px ou 1px x hauteur).
  6. Si vous choisissez d'utiliser 2 points, l'image sera agrandie proportionnellement (de sorte que chaque point s'agrandira à tour de rôle jusqu'à ce que la largeur / hauteur finale soit atteinte)
  7. La bordure 1px doit être en plus des dimensions de fichier de base prévues. Donc, une image 100 x 100 à 9 patchs doit en fait avoir 102 x 102 (100 x 100 + 1 px en haut, en bas, à gauche et à droite)
  8. Les images à 9 patchs doivent se terminer par * .9.png

Vous pouvez donc placer 1 point de chaque côté de votre logo (dans la bordure supérieure), et 1 point au-dessus et en dessous (sur la bordure gauche), et ces lignes et colonnes marquées seront les seuls pixels à étirer.

Exemple

Voici une image à 9 patchs, 102x102px (taille finale 100x100, pour les applications):

Image 9 patchs, 102x102px

Voici un zoom à 200% de la même image:

la même image, agrandie 2x pour plus de clarté

Notez les marques 1px en haut et à gauche indiquant quelles lignes / colonnes vont se développer.

Voici à quoi ressemblerait cette image en 100x100 dans l'application:

rendu en 100x100

Et voici ce qu'il souhaiterait s'il était étendu à 460x140:

rendu en 460x140

Une dernière chose à considérer. Ces images peuvent sembler correctes sur l'écran de votre moniteur et sur la plupart des mobiles, mais si l'appareil a une densité d'image très élevée (dpi), l'image sera trop petite. Probablement encore lisible, mais sur une tablette avec une résolution de 1920x1200, l'image apparaîtrait comme un très petit carré au milieu. Alors, quelle est la solution? Concevez 4 images de lanceur à 9 patchs différentes, chacune pour un ensemble de densité différent. Pour garantir qu'aucun rétrécissement ne se produira, vous devez concevoir la résolution commune la plus basse pour chaque catégorie de densité. Le rétrécissement n'est pas souhaitable ici car le patch 9 ne tient compte que de l'étirement, donc dans un processus de rétrécissement, le petit texte et d'autres éléments peuvent perdre de la lisibilité.

Voici une liste des résolutions les plus petites et les plus courantes pour chaque catégorie de densité:

  • xlarge (xhdpi): 640x960
  • grand (hdpi): 480x800
  • moyen (mdpi): 320x480
  • petit (ldpi): 240x320

Concevez donc quatre écrans de démarrage dans les résolutions ci-dessus, agrandissez les images, placez une bordure transparente de 1 px autour du canevas et marquez les lignes / colonnes qui seront extensibles. Gardez à l'esprit que ces images seront utilisées pour N'IMPORTE QUEL appareil dans la catégorie de densité, de sorte que votre image ldpi (240 x 320) peut être étirée à 1024x600 sur une tablette extra large avec une faible densité d'image (~ 120 dpi). Le patch 9 est donc la meilleure solution pour l'étirement, tant que vous ne voulez pas de photo ou de graphiques compliqués pour un écran de démarrage (gardez à l'esprit ces limitations lorsque vous créez le design).

Encore une fois, la seule façon pour que cet étirement ne se produise pas est de concevoir un écran pour chaque résolution (ou un pour chaque combinaison résolution-densité, si vous voulez éviter que les images ne deviennent trop petites / grandes sur les appareils à haute / basse densité), ou à dire l'image ne doit pas s'étirer et une couleur d'arrière-plan apparaît partout où l'étirement se produirait (rappelez-vous également qu'une couleur spécifique rendue par le moteur Android sera probablement différente de la même couleur spécifique rendue par photoshop, en raison des profils de couleur).

J'espère que cela a du sens. Bonne chance!


1
Vous m'avez sauvé la vie avec ça, merci beaucoup pour cette réponse.
theGrayFox

7
Quelque chose que j'ai découvert dans la pratique. Si vous utilisez une image à 9 patchs, elle devra être plus petite que le plus petit écran que vous prendrez en charge. Il semble que l'image s'agrandisse, mais ne rétrécit pas, provoquant un écrêtage ... Et il semble qu'il soit nécessaire de la régler pour fitXY ..
Sean Aitken

Merci pour le commentaire, CleverCoder. Pouvez-vous nous dire à quel point le plus petit est idéal pour éviter tout problème? Je suppose que 2 pixels de moins en largeur et en hauteur devraient suffire?
Lucas Cerro

1
Vous avez dit "xlarge (xhdpi): 640x960", mais la documentation indique que xlarge est au moins 960dp x 720dp, donc un écran xlarge avec une densité xhdpi devrait être 1920px x 1440px. La densité et la taille sont des concepts différents.
fikr4n

1
@LucasCerro: Vous devriez envisager de mettre une modification sur cette réponse sinon excellente sur la première ligne qui dit que la réponse est obsolète et qu'à partir d'Android 3.2, il y a maintenant 6 groupes basés sur la largeur d'écran disponible.
Jens

120

MODE PORTRAIT

Le MDPI est de 320x480 dp = 320x480px (1x)

LDPI est 0,75 x MDPI = 240x360px

HDPI est de 1,5 x MDPI = 480x720px

XHDPI est 2 x MDPI = 640x960px

XXHDPI est 3 x MDPI = 960x1440px

XXXHDPI est 4 x MDPI = 1280x1920px

MODE PAYSAGE

Le MDPI est 480x320 dp = 480x320px (1x)

LDPI est 0,75 x MDPI = 360x240px

HDPI est de 1,5 x MDPI = 720x480px

XHDPI est 2 x MDPI = 960x640px

XXHDPI est 3 x MDPI = 1440x960px

XXXHDPI est 4 x MDPI = 1920x1280px

ÉDITER:

Je suggère d'utiliser Lottie pour l'écran de démarrage si vous lisez ceci en 2019+


1
Génial! cherchait cela
Lion789

Solution la plus utile
Farzad YZ

6
Ces valeurs ne semblent pas être correctes. XXHDPI est censé être 1920x1080.
user2966445

Oui! Merci c'est ce que je cherchais! Mille mercis!
theHellyar

que diriez-vous de la taille de la tablette pls?
Beeing Jk

29

PORTRAIT

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

PAYSAGE

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px


2
La taille et la résolution physiques de l'écran sont des concepts indépendants. La taille de l'image en pixels est le produit des deux.
Henry

1
dites-moi la taille de XXHDPI, XXXHDPI?
hitesh141

Les valeurs de cette réponse ne semblent pas être proportionnelles aux informations fournies ici: stackoverflow.com/a/19661363/1617737 . Je pense que la réponse acceptée, bien que plus ancienne, est plus susceptible d'être correcte.
ban-geoengineering


12

Utiliser PNG n'est pas une si bonne idée. En fait, c'est coûteux en termes de performances. Vous pouvez utiliser des fichiers XML dessinables, par exemple, l'arrière-plan de Facebook .

Cela vous aidera à lisser et à accélérer vos performances, et pour le logo, utilisez des images de patch .9.


10
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


4

Dans mon cas, j'ai utilisé list drawable dans style.xml. Avec la liste des calques dessinable, vous avez juste besoin d'un png pour toute la taille de l'écran.

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<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>

et flash_screen.xml dans le dossier dessinable.

<?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>
</layer-list>

"background_noizi" est un fichier png dans le dossier drawable. J'espère que ça aide.


si votre image de fond est trop grande, elle s'étirera
ShadeToD


2

Solution modifiée qui rendra votre SplashScreen superbe sur toutes les API, y compris les API21 à API23

Si vous ne ciblez que les API24 +, vous pouvez simplement réduire votre vecteur dessinable directement dans son fichier xml comme suit:

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
    android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
    android:strokeColor="#292929"
    android:strokeWidth="24" />
</vector>

dans le code ci-dessus, je redimensionne un dessinable que j'ai dessiné sur une toile 640x640 pour être 240x240. alors je viens de le mettre dans mon écran de démarrage dessinable comme ça et cela fonctionne très bien:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">

<!-- The background color, preferably the same as your normal theme -->
<item>
    <shape>
        <size android:height="120dp" android:width="120dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item
    android:drawable="@drawable/logo_vect"
    android:gravity="center">

</item>
</layer-list>

mon code ne fait que dessiner le triangle dans l'image en bas mais ici vous voyez ce que vous pouvez réaliser avec cela. La résolution est finalement excellente, contrairement aux bords pixellisés que j'obtenais lors de l'utilisation de bitmap. utilisez donc un vecteur dessinable par tous les moyens (il existe un site appelé vectr que j'ai utilisé pour créer le mien sans avoir à télécharger des logiciels spécialisés).

EDITER afin de le faire fonctionner également sur API21-22-23

Bien que la solution ci-dessus fonctionne pour les appareils exécutant API24 +, j'ai été vraiment déçu après avoir installé mon application sur un appareil exécutant API22. J'ai remarqué que l'écran de démarrage essayait à nouveau de remplir la vue entière et ressemblait à de la merde. Après m'être arraché les sourcils pendant une demi-journée, j'ai finalement forcé brutalement une solution par pure volonté.

vous devez créer un deuxième fichier nommé exactement comme le splashscreen xml (disons splash_screen.xml) et le placer dans 2 dossiers appelés drawable-v22 et drawable-v21 que vous créerez dans le dossier res / (afin de les voir vous devez changer la vue de votre projet d'Android à Project). Cela sert à dire à votre téléphone de rediriger vers les fichiers placés dans ces dossiers chaque fois que le périphérique concerné exécute une API correspondant au suffixe -vXX dans le dossier drawable, voir ce lien . placez le code suivant dans la liste des calques du fichier splash_screen.xml que vous créez dans ces dossiers:

<item>
<shape>
    <size android:height="120dp" android:width="120dp"/>
    <solid android:color="@android:color/white"/>
</shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
    <bitmap android:gravity="center"
        android:src="logo_vect"/>

</item>

voici à quoi ressemblent les dossiers

Pour une raison quelconque, pour ces API, vous devez envelopper votre dessinable dans un bitmap afin de le faire fonctionner et le résultat final est le même. Le problème est que vous devez utiliser l'approche avec les dossiers dessinables supplémentaires car la deuxième version du fichier splash_screen.xml entraînera que votre écran de démarrage ne s'affichera pas du tout sur les appareils exécutant des API supérieures à 23. Vous devrez peut-être également placer la première version de splash_screen.xml dans drawable-v24 car android utilise par défaut le dossier drawable-vXX le plus proche qu'il peut trouver pour les ressources. J'espère que cela t'aides

mon écran de démarrage


0

Sur la base de cette réponse de Lucas Cerro, j'ai calculé les dimensions en utilisant les ratios dans les documents Android , en utilisant la ligne de base dans la réponse. J'espère que cela aidera quelqu'un d'autre à venir à ce poste!

  • xxxlarge (xxxhdpi): 1280x1920 (4.0x)
  • xxlarge (xxhdpi): 960x1440 (3.0x)
  • xlarge (xhdpi): 640x960 (2.0x)
  • grand (hdpi): 480x800 (1,5x)
  • moyen (mdpi): 320x480 (ligne de base 1.0x)
  • petit (ldpi): 240x320 (0,75x) 
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.