Android - Launcher Icon Size

350

Pour HDPI, XHDPIetc. quelle devrait être la taille idéale de l'icône du lanceur? Dois-je créer des 9-Patchimages pour que l'icône soit mise à l'échelle automatiquement, ou serait-il préférable de créer des icônes distinctes?

AndroidDev
la source
9
Vous ne créez pas d' images à 9 patchs pour les icônes du lanceur. 9-patch sont pour les images (ressources) dans l'application. @edwoollard a fourni la bonne réponse. Pour plus d'informations, passez par ce lien ici: developer.android.com/guide/practices/ui_guidelines/…
Siddharth Lele
Mais juste pour demander par curiosité, pouvons-nous utiliser 9 patchs pour l'icône du lanceur?
Mohammad Jafar Mashhadi
Vous pouvez obtenir une taille différente pour les icônes: play.google.com/store/apps/…
Vipul Patel
comment puis-je définir 2 icônes différentes: une pour l'application Android, une pour l'application Chromebook. C'est possible?
Kiem Duong

Réponses:

705

Je créerais des images distinctes pour chacune:

LDPI should be 36 x 36.

MDPI should be 48 x 48.

TVDPI should be 64 x 64.

HDPI should be 72 x 72.

XHDPI should be 96 x 96.

XXHDPI should be 144 x 144.

XXXHDPI should be 192 x 192.

Ensuite, mettez simplement chacun d'eux dans les tiges séparées du dossier dessinable.

Vous devez également fournir une grande version de votre icône lors du téléchargement de votre application sur le Google Play Store, ce qui devrait être le cas WEB 512 x 512. C'est si grand que Google peut la redimensionner à n'importe quelle taille afin de faire la publicité de votre application sur le Google Play Store et de ne pas ajouter de pixelisation à votre logo.

En fait, toutes les autres icônes devrait être proportionnelle à l'icône « de base », MDPI at 48 x 48.

LDPI is MDPI x 0.75.

TVDPI is MDPI x 1.33.

HDPI is MDPI x 1.5.

XHDPI is MDPI x 2.

XXHDPI is MDPI x 3.

XXXHDPI is MDPI x 4.

Tout cela est expliqué sur la page Iconographie du site Web des développeurs Android: http://developer.android.com/design/style/iconography.html

edwoollard
la source
3
Où mettez-vous la version WED?
Mafro34
10
@ Mafro34 Je suppose que vous voulez dire la version WEB? Lorsque vous terminez enfin votre application et la téléchargez sur le Google Play Store, il vous demandera de télécharger une icône d'application 512 x 512. Cela signifie qu'ils peuvent ensuite utiliser l'icône n'importe où sur le site Web et l'application afin de promouvoir votre application.
edwoollard
@ Mafro34 Ils demandent 512 x 512 pour pouvoir ensuite redimensionner l'icône à la taille dont ils ont besoin sur les différentes positions de l'application et du site Web, sans provoquer de pixellisation.
edwoollard
@edwoollard oups, désolé, je n'ai pas vu votre dernière ligne (" this is all explained ..."). Ce que vous avez est essentiellement un instantané de leurs besoins (en évolution).
ashes999
J'ai créé un script qui exporte les icônes du lanceur Android sur velara3.com et d'après mes recherches, XXHDPI est 180x180 et non 144. Voir developer.android.com/guide/practices/screens_support.html. Recherchez sur la page "180x180 (3.0x) pour extra-extra-haute densité". Cependant, j'en ai vu 144 à quelques endroits.
1,21 gigawatts le
121

Ne créez pas d'images à 9 patchs pour les icônes du lanceur. Vous devez créer une image distincte pour chacun.

LDPI - 36 x 36
MDPI - 48 x 48
HDPI - 72 x 72
XHDPI - 96 x 96
XXHDPI - 144 x 144
XXXHDPI - 192 x 192.
WEB - 512 x 512 (Require when upload application on Google Play)

Remarque: l'image WEB (512 x 512) est utilisée lorsque vous téléchargez votre application Android sur Market.

|| Taille de l'icône de l'application Android ||

Tous les dispositifs

hdpi=281*164
mdpi=188*110
xhdpi=375*219
xxhdpi=563*329
xxxhdpi=750*438

48 × 48 (mdpi)
72 × 72 (hdpi)
96 × 96 (xhdpi)
144 × 144 (xxhdpi)
192 × 192 (xxxhdpi)
512 × 512 (Google Play store)
Chirag
la source
2
@ RED.Skull non, il signifie l'icône que vous téléchargez sur le tableau de bord des développeurs Google pour être vue sur le marché par les utilisateurs
Mirko
6
@Ogen - C'est une bonne habitude de poser une question, oui les unités sont en pixels.
Chirag
Est-il possible de simplement fournir la version 192 x 192 dans le dossier mipmap-xxxhdpi et de demander au système de la réduire de manière appropriée?
eliasbagley
@eliasbagley: Bien sûr, cela fonctionne. Mais ce n'est pas optimal (sinon tout le système de dossiers spécifiques à la densité n'existerait pas).
Jonik
98

Les icônes Android nécessitent cinq tailles distinctes pour différentes densités de pixels d'écran. Les icônes pour une résolution inférieure sont créées automatiquement à partir de la ligne de base.

mdpi (Baseline): 160 dpi 1×
hdpi: 240 dpi 1.5×
xhdpi: 320 dpi 2×
xxhdpi: 480 dpi 3×
xxxhdpi: 640 dpi 4× (launcher icon only)

Icônes de lanceur (.Png)

48 × 48 (mdpi)
72 × 72 (hdpi)
96 × 96 (xhdpi)
144 × 144 (xxhdpi)
192 × 192 (xxxhdpi)
512 × 512 (Google Play store)

Barre d'actions, icônes de boîte de dialogue et onglet

24 × 24 area in 32 × 32 (mdpi)
36 × 36 area in 48 × 48 (hdpi)
48 × 48 area in 64 × 64 (xhdpi)
72 × 72 area in 96 × 96 (xxhdpi)
96 × 96 area in 128 × 128 (xxxhdpi)*

Icônes de notification

22 × 22 area in 24 × 24 (mdpi)
33 × 33 area in 36 × 36 (hdpi)
44 × 44 area in 48 × 48 (xhdpi)
66 × 66 area in 72 × 72 (xxhdpi)
88 × 88 area in 96 × 96 (xxxhdpi)*

Petites icônes contextuelles

16 × 16 (mdpi)
24 × 24 (hdpi)
32 × 32 (xhdpi)
48 × 48 (xxhdpi)
64 × 64 (xxxhdpi)*

La taille xxxhdpi n'est requise que par l'icône du lanceur, comme le dit le site officiel de Supporting Multiple Screens .

STS
la source
1
Merci d'avoir ajouté des tailles pour différents contextes. Avez-vous une source pour cela?
Krøllebølle
où est la référence de la taille des icônes sur le site Android?
Mahdi
39

Icônes adaptatives

À partir d'Android 8.0, il existe des icônes adaptatives, qui sont composées de deux couches distinctes. Les deux couches mesurent 108 x 108 dp.

entrez la description de l'image ici

(image adaptée de la documentation Android )

Tailles

Si vous prenez en charge les versions inférieures à Android 8.0, vous devez toujours inclure les tailles héritées ( 48dp). J'ai marqué les tailles de pixels en rouge pour chaque résolution ci-dessous.

entrez la description de l'image ici

Ne le faites pas à la main

Je suppose que vous pouvez faire tout cela à la main si vous le souhaitez, mais je dois dire que mes jours de travail sont terminés. Android Studio 3.0 Asset Studio est assez bon et les générera tous pour vous. Il vous suffit de fournir une image de premier plan et d'arrière-plan suffisamment grande. (J'ai utilisé une image 1024 x 1024 px).

Pour ouvrir Asset Studio, accédez à Fichier> Nouveau> Image Asset .

entrez la description de l'image ici

Suragch
la source
Les icônes héritées devront-elles également être associées à un arrière-plan?
développeur Android
@android developer, vous pouvez sélectionner "Legacy only" comme type d'icône si vous souhaitez générer des icônes sans spécifier la couche d'arrière-plan. Si vous choisissez "Adaptatif et hérité", les icônes héritées seront générées en fusionnant les couches de premier plan et d'arrière-plan.
Suragch
La couche d'arrière-plan proprement dite (en tant que couche distincte) ne sera utilisée que sur les appareils Android 8.0+.
Suragch
Que se passe-t-il si je souhaite que le style des icônes adaptatives soit utilisé uniquement à partir d'Android O et les styles hérités (sans l'arrière-plan supplémentaire, même s'ils sont fusionnés) avant? Est-il également possible d'éviter l'arrière-plan sur Android O? Je n'aime pas le style des icônes adaptatives ...
développeur Android
Développeur @android, Générez simplement les icônes en deux passes. Faites d'abord "Adaptive et Legacy" et fournissez les deux couches. (Vous pouvez même spécifier de ne pas générer les icônes héritées à ce stade, mais cela n'a pas d'importance.) Ensuite, faites "hérité uniquement" et choisissez l'image que vous voulez (par exemple, l'image de premier plan). Si les icônes héritées ont déjà été générées lors de la première passe, elles seront remplacées par votre nouvelle image (sans arrière-plan) lors de la deuxième passe. N'oubliez pas que vous pouvez toujours supprimer l'un de ces fichiers et les remplacer par des images que vous créez à la main.
Suragch
24

Pas besoin d'outils tiers lorsque Android Studio peut générer des icônes pour nous.

  • File-> New->Image Asset

  • Choisissez ensuite Launcher Iconscomme type d'actif:

  • Choisissez une image haute résolution pour le fichier image:

Android Generate Launcher Icons

  • Next-> Finishpour générer des icônes

générer des icônes ic laucher

Enfin, mettez à jour le android:iconchamp de nom AndroidManifest.xmlsi nécessaire.

Gayan Weerakutti
la source
4
Android Studio semble générer un rembourrage supplémentaire autour de mes icônes, même si je lui ai dit de couper les espaces vides et de m'assurer que le curseur de rembourrage est complètement à gauche. Un bug avec Android Studio peut-être ou manque-t-il une étape?
Zhang
Cette méthode (malheureusement) craint à cause du rembourrage supplémentaire qu'Android Studio met en place ...
Micro
Cliquez avec le bouton droit sur le dossier res et sélectionnez Nouveau> Image Asset. allez sur .. developer.android.com/studio/write/image-asset-studio.html
Waruna Manjula
9

Fournissez au moins une image 512px X 512px et utilisez cet outil: https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

Il générera toutes les icônes pour vous dans la bonne taille, y compris l'image Web pour le Play Store.

LuckyMalaka
la source
Cool mais il ne génère pas de taille ldpi: données d'image PNG, 36 x 36, RGBA 8 bits / couleur, non entrelacé. Cette taille est utilisée sur les appareils exécutant Jelly Beans :) ..
Hudson Santos
Créez un nouveau projet avec Android Studio et vous verrez qu'il n'y a plus de dossier ldpi. Je suppose que vous n'en avez plus besoin.
LuckyMalaka
7

Le LDPI doit être de 36 x 36.

MDPI 48 x 48.

TVDPI 64 x 64.

HDPI 72 x 72.

XHDPI 96 x 96.

XXHDPI 144 x 144.

XXXHDPI 192 x 192.

rajlaxmi_jagdale
la source
1
Qu'avez-vous répondu que d'autres n'ont pas déjà fait? S'il vous plaît, ne vous attardez pas sur les réponses des autres en matière de réputation ... gagnez-le vous-même.
edwoollard
Cela ressemble à un copier + coller exact de cette réponse: stackoverflow.com/a/12768159/1974224
Cristik
7

Selon les directives de conception des matériaux ( ici , sous "Grille d'unité DP"), l'icône de votre produit doit être de taille 48 dp, avec un rembourrage de 1dp, sauf pour le cas de XXXHDPI, où le rembourrage doit être de 4dp.

Ainsi, en pixels, les tailles sont:

  • 48 × 48 (mdpi), avec rembourrage 1 dp
  • 72 × 72 (hdpi), avec rembourrage 1 dp
  • 96 × 96 (xhdpi), avec rembourrage 1 dp
  • 144 × 144 (xxhdpi), avec rembourrage 1 dp
  • 192 × 192 (xxxhdpi), avec rembourrage 4 dp

Je recommande d'éviter d'utiliser VectorDrawable car certains lanceurs ne le prennent pas en charge, mais je pense que WEBP devrait être correct tant que vous avez votre transparence de prise en charge minSdk pour eux (API 18 et supérieure - Android 4.3).

Si vous publiez sur le Play Store, l'exigence de ce qu'il faut télécharger y est (basée sur ici ):

  • PNG 32 bits (avec alpha)
  • Dimensions: 512px par 512px
  • Taille maximale du fichier: 1024 Ko
développeur android
la source
6

Eh bien, comme @ MartinVonMartinsgrün l'a mentionné Maintenant, il existe de meilleurs outils que le générateur d'affirmation dans le studio Android

Pour l'icône d'application (barre d'outils, barre d'action, DrawableLeft, etc.), utilisez: http://romannurik.github.io/AndroidAssetStudio/icons-actionbar.html

Pour le lanceur (icône d'application), utilisez: https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

Mais voici quelques astuces et moyens d'obtenir la meilleure résolution pour les icônes et les icônes de lanceur.

Étape 1 :

Rendez-vous d'abord sur https://materialdesignicons.com et choisissez votre icône. Ou si vous avez votre icône en bonne résolution, sautez cette étape. Cliquez sur l'icône souhaitée et cliquez sur "Export avancé", il ouvrira une fenêtre comme celle-ci ci-dessousEssayez de générer une icône aussi grande que possible

Cliquez ensuite sur "Icône" pour générer l'icône (.png). Eh bien, l'astuce est d'essayer de générer la plus grande icône possible pour les appareils haute résolution et les outils géreront tout pour les petits appareils, mais si vous utilisez une petite icône, tout en générant l'icône pour les appareils haut de gamme, vous perdrez la résolution de l'icône.

Étape 2 :

Ensuite, allez sur la page Outils et téléchargez l'icôneentrez la description de l'image ici

Cliquez sur "Personnalisé" si vous souhaitez colorer votre icône. Quelle que soit la couleur de l'icône que vous téléchargez, en utilisant Personnalisé, vous pouvez générer la couleur de votre choix. Choisissez ensuite un nom et cliquez sur "Télécharger .ZIP". Cela téléchargera le fichier .zip avec l'icône pour la plupart de la résolution commune. Vous pouvez copier et coller le dossier res dans le dossier de votre projet d'application et vous verrez l'icône dans la section dessinable.

sh0umik
la source
4

J'ai publié un script pour générer toutes les icônes de plate-forme pour les applications PhoneGap à partir d'un seul fichier d'icône SVG. Si vous avez des bitmaps existants, j'inclus également quelques notes qui peuvent vous aider à générer les vecteurs SVG à partir d'un bitmap existant. Cela ne fonctionnera pas pour tous les bitmaps mais peut l'être pour le vôtre.

Tony O'Hagan
la source
Je développe dans Sencha Touch donc il inclut également du code pour générer des icônes pour Sencha. Il est facile de supprimer cela et de l'adapter à vos besoins. J'apprécierais une contribution pour aider à générer des écrans de démarrage
Tony O'Hagan
Haha ... Je viens de le faire dans un script zsh. Bon sang.
dylnmc
Le cadre iconique comprend également un générateur d'images pour les écrans Splash et les icônes d'application
Tony O'Hagan
2

J'ai eu le même problème, mais j'ai réalisé que la disposition de mon icône graphique dans le carré autorisé (512 x 512 dans mon cas) n'était pas maximisée. J'ai donc fait pivoter l'image et j'ai pu la mettre à l'échelle pour mieux remplir les coins. Puis - je raison cliqué sur mon resdossier dans mon projet dans Android Studio, sélectionnez puis Newensuite Image Asset, il m'a fallu par un assistant où je suis arrivé à sélectionner mon fichier image à utiliser. Ensuite, si vous cochez la case "Couper l'espace vide environnant", il s'assure que tous les bords, qui sont capables, touchent les côtés de votre carré. Ces étapes sont devenues beaucoup plus grandes que l'original.

Azurespot
la source
1

Lancer l'image et la taille de l'image Slash pour la soumission de l'application Google Play Store

  1. Icône haute résolution. PFB le tableau pour les tailles requises PNG 32 bits (avec alpha), Dimensions: 512px par 512px, Taille maximale du fichier: 1024KB

Icône de lancement requise et taille d'image Splash

  1. Au moins 2 captures d'écran sont requises au total (8 captures d'écran maximum par type, les types incluent "Téléphone", "Tablette 7 pouces" et "Tablette 10 pouces"). JPEG ou PNG 24 bits (pas d'alpha), Dimension minimale: 320px , Dimension maximale: 3840 px, Tailles d'échantillon: 320 x 480, 480 x 800, 480 x 854, 1280 x 720, 1280 x 800 24 bits PNG ou JPEG
Anitha
la source
0

Vous pouvez créer des icônes directement dans le studio Android lui-même. Les étapes à suivre sont les suivantes:

1.Cliquez avec le bouton droit sur Res-> New-> Image asset

2.Changez le type d'actif à l'image.

3.Chargez l'image à partir du disque local

4.Vous avez des options pour couper, modifier le rembourrage et ajouter un arrière-plan également. Modifiez les valeurs si vous en avez besoin.

5. cliquez sur Suivant-> Terminer.

L'image sera automatiquement ajoutée à mipmap-mdpi, mipmap-hdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi si vous sélectionnez l'icône du lanceur ou drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi, drawable- xxxhdpi si vous sélectionnez d'autres optins d'icône.

Sharath kumar
la source