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
, hdpi
et 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?
214
Réponses:
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:
Lire l' introduction de l'image à 9 patchs dans le Guide du développeur Android
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:
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
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é:
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!
la source
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+
la source
PORTRAIT
LDPI: 200x320px
MDPI: 320x480px
HDPI: 480x800px
XHDPI: 720px1280px
PAYSAGE
LDPI: 320x200px
MDPI: 480x320px
HDPI: 800x480px
XHDPI: 1280x720px
la source
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.
la source
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.
la source
la source
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
la source
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.
et flash_screen.xml dans le dossier dessinable.
"background_noizi" est un fichier png dans le dossier drawable. J'espère que ça aide.
la source
** Si vous recherchez des détails d'écran pour tous les types d'appareils majeurs **
allez sur material.io
la source
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:
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:
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:
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
la source
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!
la source