Gradient Dessinable dans Android – Créer des arrière-plans dégradés
Nous avons vu les couleurs dégradées sur de nombreux sites Web comme arrière-plans, utilisées dans les logos d’App, comme dans le logo Instagram présenté ci-dessous, l’arrière-plan d’App, les boutons, les barres de progression, etc. Un dégradé rend l’interface utilisateur de toute application, qu’il s’agisse d’une application mobile ou d’un site Web, plus belle et plus vivante. De nombreux développeurs utilisent le gradient dans leurs applications et sites Web pour les rendre plus attrayants. Ainsi, dans ce tutoriel, nous allons apprendre à définir un fond en dégradé pour notre activité Android App.
Qu’est-ce qu’un dégradé?
Selon Wikipedia:
En infographie, un dégradé de couleurs spécifie une gamme de couleurs dépendant de la position, généralement utilisée pour remplir une région. Par exemple, de nombreux gestionnaires de fenêtres permettent de spécifier le fond de l’écran sous forme de dégradé. Les couleurs produites par un gradient varient continuellement avec la position, produisant des transitions de couleurs douces.
Un gradient de couleur est également connu comme une rampe de couleur ou une progression de couleur. En attribuant des couleurs à un ensemble de valeurs, un gradient est une carte de couleurs continue, un type de schéma de couleurs.
Ajoutons donc un gradient simple à notre application Android.
Etape 1 : Créer un nouveau projet
-
Ouvrir votre Android Studio Cliquer sur « Démarrer un nouveau projet Android Studio » (Apprenez à configurer Android Studio et à créer votre premier projet Android)
-
Choisir « Empty Activity » dans la fenêtre du modèle de projet et cliquer sur Next
-
Entrer le nom de l’App, Nom du paquet, emplacement de sauvegarde, langage(Java/Kotlin, nous utilisons Java pour ce tutoriel), et SDK minimum(nous utilisons API 19 : Android 4.4 (KitKat))
-
Cliquez ensuite sur le bouton Finish après avoir rempli les détails ci-dessus
-
Maintenant, attendez que le projet termine la construction.
Etape 2 : Création d’une couleur dégradée
Pour créer une couleur dégradée, nous devons créer un fichier .xml dans le dossier drawable. Allez donc dans app -> res -> drawable et faites un clic droit sur drawable -> New -> Drawable Resource File et créez le fichier gradient_drawable.xml.
Le code du fichier gradient_drawable.xml est présenté ci-dessous :
Comme vous pouvez le voir dans le code ci-dessus, nous utilisons la balise gradient ainsi que la fourniture des attributs android:startColor, android:centerColor et android:endColor pour définir la couleur qui sera utilisée dans le gradient. Apprenons donc à connaître les attributs disponibles dans le drawable gradient.
Attributs XML du drawable de dégradé
Voici les attributs du drawable <gradient> :
| Attributs | Description |
|---|---|
| android:startColor |
Couleur de départ du dégradé. La valeur de la couleur peut être dans l’une des formes « #rgb », « #argb », « #rrggbb », « #aarrggbb » |
| android :endColor |
Couleur de fin du gradient La valeur de la couleur peut être dans l’un de « #rgb », « #argb », « #rrggbb », « #aarrggbb » formes |
| android:centerColor |
Couleur centrale du gradient. Elle peut être facultative mais vous pouvez l’utiliser si vous voulez La valeur de la couleur peut être dans l’une des formes « #rgb », « #argb », « #rrggbb », « #aarrggbb » |
| android :centerX |
X position du point central du dégradé dans la forme en tant que fraction de la largeur 0.5 est la valeur par défaut |
| android:centerY |
Y-position du point central du gradient dans la forme comme fraction de la hauteur 0.5 est la valeur par défaut |
| android:angle |
L’angle du gradient et il n’est utilisé qu’avec le gradient linéaire Il doit être multiple de 45 dans la plage |
| android :type |
Il est utilisé pour définir le type de gradient et la valeur par défaut est linéaire . et il est de 3 types
|
| android:gradientRadius |
Il est utilisé pour définir le rayon du gradient. Il n’est utilisé qu’avec le gradient radial. |
Etape 3 : Modifier l’activité_main.xml
Maintenant, ouvrez le fichier activity_main.xml et supprimez le code par défaut et changez le layout en RelativeLayout et définissez son fond en fond de gradient comme indiqué ci-dessous:
android:background = "@drawable/gradient_background"avec ceci notre activité_main.xml est fait et le code complet ressemblera à:
Et la sortie de ce qui précède est montré ci-dessous:
Nous pouvons également ajouter le dégradé à différentes vues et mises en page dans notre application Android. Couvrons quelques autres composants de l’Android App dans lesquels nous pouvons utiliser des arrière-plans en dégradé.
Fond dégradé avec le bouton:
Ici nous allons utiliser le fond dégradé pour le bouton:
La sortie du code ci-dessus est:
Fond dégradé avec le TextView :
Nous allons ici utiliser le fond dégradé pour TextView:
La sortie du code ci-dessus est:
Fond dégradé avec ImageView :
Nous allons ici utiliser le fond dégradé pour ImageView:
La sortie du code ci-dessus est:
Fond dégradé avec SeekBar :
Nous allons ici utiliser le fond dégradé pour SeekBar:
La sortie du code ci-dessus est:
Conclusion:
.