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?

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

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

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:

Et voici ce qu'il souhaiterait s'il était étendu à 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!

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+

PORTRAIT

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

PAYSAGE

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

J'ai recherché la meilleure et la plus simple réponse pour créer une image à 9 patchs. Maintenant, créer l'image du patch 9 est la tâche la plus simple.

Depuis https://romannurik.github.io/AndroidAssetStudio/index.html, vous pouvez créer une image à 9 patchs pour toutes les résolutions - XHDPI, HDPI, MDPI, LDPI en un seul clic.

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.

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

Il y a quelque temps, j'ai créé un fichier Excel avec les dimensions prises en charge
J'espère que cela sera utile pour quelqu'un

Pour être honnête, j'ai perdu l'idée, mais cela fait référence à une autre fonction d'écran en tant que taille (pas seulement densité)
https://developer.android.com/guide/practices/screens_support.html
Veuillez m'informer s'il y a des erreurs

Lien1: dimensions.xlsx

Link2: dimensions.xlsx

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 vous recherchez des détails d'écran pour tous les types d'appareils majeurs **

allez sur material.io

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>

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

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)