Bien que votre application ne puisse contenir que du texte et de la couleur, vous pouvez ajouter d'autres éléments visuels, tels qu'un logo ou une illustration. Android applique des bonnes pratiques particulières pour ajouter des éléments graphiques à votre application, ainsi que diverses bibliothèques permettant de créer des effets graphiques ou du mouvement.
Un élément Android est appelé drawable, c'est-à-dire un type de ressource dessiné à l'écran. Cela inclut, sans s'y limiter, les bitmaps, les formes et les vecteurs.
Lorsque vous créez des images et des graphiques, gardez à l'esprit les points suivants:
- Évitez d'inclure du texte immuable dans les composants.
- Dans la mesure du possible, utilisez d'abord des formats vectoriels.
- Fournissez des éléments pour les buckets de résolution.
- Prévoyez suffisamment de marge entre les images de fond et le texte.
- Bien qu'Android puisse obtenir différents effets d'image tels que les dégradés, la colorisation et le floutage, certains sont plus coûteux en termes de performances.
- Les drawables vectoriels animés offrent un format évolutif pour les petites animations de l'interface utilisateur.
Exporter des éléments pour Android
- Mettez en forme les noms d'éléments en minuscules.
- Définissez des éléments simples à exporter au format SVG.
- Définissez des images complexes, telles que des photos, à exporter au format WebP, PNG ou JPG.
- Définissez l'échelle de résolution appropriée, comme indiqué dans le tableau suivant.
| Taille de l'écran | Échelle |
|---|---|
mdpi |
x1 |
hdpi |
1,5 |
xhdpi |
x2 |
xxhdpi |
x3 |
xxxhdpi |
x4 |
Vous pouvez éventuellement convertir des SVG en drawables vectoriels (VD) à l'aide d'Android Studio. Organisez les éléments dans des répertoires correspondant à la résolution à transférer, comme illustré dans l'image suivante. Par exemple, incluez la taille de l'écran dans les noms des dossiers.
Types d'éléments
Android est compatible avec les types d'éléments suivants.
Vectoriel
Un graphique vectoriel est un format sans perte, ce qui signifie qu'il ne perd pas d'informations visuelles lorsqu'il est mis à l'échelle. Les vecteurs sont composés de points mathématiques remplis pour créer une image.
Formats vectoriels
Android accepte les formats d'images vectorielles suivants: SVG et drawables vectoriels.
Les drawables vectoriels ressemblent aux fichiers SVG, mais sont basés sur XML. Ils prennent également en charge
divers attributs, comme les gradients. Pour en savoir plus sur les éléments compatibles, consultez VectorDrawable. Vous pouvez convertir des SVG en drawables vectoriels via Vector Asset Studio.
Cas d'utilisation
En raison de leur petite taille, il est préférable de créer des icônes à l'aide d'un format vectoriel. Un drawable vectoriel animé peut être utilisé pour ajouter du mouvement à une icône.
- Les illustrations sont des graphiques qui aident à orienter les utilisateurs, à expliquer des concepts ou à exprimer des idées. Ils expriment généralement le style de la marque.
- Les illustrations principales sont une accentuation importante dans le reste du contenu. Elles permettent de définir l'aspect général et d'expliquer les informations principales.
- Les illustrations ponctuelles sont plus petites, généralement intégrées, et prennent en charge le contenu environnant.
Trame
Un graphique avec pertes, ou un graphique qui perd des détails lorsqu'il est manipulé par compression ou mise à l'échelle, est composé de pixels pour constituer l'image. Les graphiques matriciels sont couramment utilisés pour les images détaillées, telles que les photos ou les dégradés complexes. Étant donné qu'elles perdent des détails lorsqu'elles sont mises à l'échelle, exportez plusieurs résolutions de ces images.
Formats de trame
Android accepte les formats d'image matricielle suivants: PNG, GIF, JPG et WebP.
Cas d'utilisation
Les cas d'utilisation incluent des images présentant une gamme de textures générant une large palette de couleurs et un dégradé, ou des images présentant un ensemble de points de Bézier trop complexe. Les cas d'utilisation peuvent également inclure des éléments photo très détaillés tels que des photos du produit, des informations sur l'établissement, etc.
Taille
Lorsque vous créez des assets, tenez compte des points suivants.
Buckets de résolution
Votre application doit fournir des images bitmap basées sur des plages de densité d'écran ou des buckets. Le système d'exploitation affiche automatiquement le graphique approprié sur l'appareil en question à l'aide de ces buckets. Assurez-vous que des graphismes haute fidélité s'affichent sur chaque appareil en fournissant des assets pour chaque bucket.
Marges intérieures
Les icônes et les petits éléments similaires doivent inclure une marge intérieure intrinsèque (intégrée) pour donner à l'élément un espace cible tactile suffisant et garantir un dimensionnement cohérent.
Noms des fichiers
Les éléments Android sont en minuscules et n'incluent pas de suffixe de résolution.
Conservez une convention de dénomination et une structure cohérentes pour organiser vos fichiers et projets. Par exemple, nommer les icônes avec le préfixe "ic_..." peut aider à organiser toutes les icônes de votre projet et à identifier rapidement les icônes pendant le développement.
Autres composants Application
Icônes d'application
Les icônes de lanceur se trouvent sur l'écran d'accueil. Recherchez des icônes monochromes dans l'UI du système, y compris les notifications monochromes, la barre d'état et les widgets.
Mettez en forme les icônes d'application en tant que drawables vectoriels pour les icônes adaptatives et PNG pour les anciennes icônes. Pour en savoir plus sur la création et la prévisualisation de l'icône de votre application, consultez la page Concevoir et prévisualiser vos icônes d'application.
Écrans de démarrage
À partir d'Android 12, votre application peut afficher un écran de démarrage animé présentant l'icône de l'application à l'ouverture.
Emplacement
Notez la mise à l'échelle et la position des images à l'écran. Les options Fit, Recadrer, FillHeight, FillWidth, FillBounds, Inside et None sont disponibles pour définir la mise à l'échelle d'une image.
Vous pouvez également rogner des images afin de leur appliquer une forme pour créer des effets supplémentaires.
Recadrage responsif
Pour afficher des images de manière responsive, définissez la façon dont une image sera recadrée à différentes plages de points d'arrêt. À différentes plages de points d'arrêt, le recadrage peut:
- Conserver un ratio fixe.
- Adaptez-vous à différents formats.
- Conservez une hauteur d'image fixe.
Maintenir un ratio
Le dimensionnement de l'image peut contenir un ratio fixe sur les plages de points d'arrêt.
S'adapter à différents formats
Les proportions des images peuvent changer en s'adaptant à différentes plages de points d'arrêt. Par exemple, dans la figure 9, le format de l'image passe de 1:1 à 16:9 entre les points d'arrêt.
Hauteurs d'image fixes
Le dimensionnement de l'image peut maintenir une hauteur fixe et une largeur fluide dans les plages de points d'arrêt et dans les limites de celles-ci. L'image conserve une hauteur fixe tandis que la largeur entre les points d'arrêt est fluide.
Effets
Android inclut divers effets d'image intégrés. Voici quelques effets courants:
Dégradés
Dans Compose, utilisez un pinceau pour dessiner un élément à l'écran. Vous pouvez utiliser différents pinceaux pour dessiner des formes de différentes couleurs ou dégradés. Utilisez les pinceaux de dégradé intégrés pour obtenir différents effets de dégradé. Ces pinceaux vous permettent de spécifier la liste des couleurs à partir desquelles vous souhaitez créer un dégradé.
Les pinceaux à dégradé sont capables d'effectuer des dégradés plus avancés en ajoutant des arrêts de couleur et des mosaïques, à condition que vous fournissiez la liste des couleurs et des pourcentages où l'arrêt se produit. Utilisez des conteneurs ou des formes pour recadrer les dégradés, les remplissages de couleurs unies ou les images.
Floutage
Appliquez des effets de floutage aux images à l'aide de la méthode Modifier.blur() et en fournissant les ratios de floutage. Utilisez les floutages avec prudence, car ils peuvent affecter les performances et ne sont disponibles que sur les appareils équipés d'Android 12 ou version ultérieure. Pour en savoir plus, consultez Flouter un composable d'image.
Modes de fusion
Android est capable de modifier des images via des opérations booléennes et des modes de combinaison similaires que vous pouvez trouver dans les logiciels de conception, comme l'union ou la multiplication. Pour en savoir plus, consultez la section BlendMode.
Teinte
Utilisez les modes de fusion et les remplissages pour colorer les éléments. Cela vous permet d'avoir un seul élément et de lui appliquer différentes couleurs, ce qui peut réduire la quantité d'éléments produits.
Mouvement
Vous pouvez animer vos images par programmation pour en créer au lieu d'importer des fichiers animés. Cela permet une plus grande flexibilité et des ressources en ressources réduites.
Les drawables vectoriels animés vous permettent de créer de petites animations d'interface utilisateur. Sinon, découvrez comment créer des animations avec des images clés dans Compose. Pour en savoir plus sur les effets sur les images, consultez Personnaliser une image.