Gradient Drawable in Android – Maak Gradient Achtergronden
We hebben de Gradient kleuren op veel websites gezien als achtergronden, gebruikt in App logo’s, zoals in het Instagram logo hieronder, App achtergrond, knoppen, voortgangsbalkjes, etc. Een kleurverloop maakt de UI van een app, of het nu een mobiele app of een website is, mooier en levendiger. Veel ontwikkelaars gebruiken gradient in hun apps en websites om het er aantrekkelijker uit te laten zien. Dus in deze tutorial, zullen we leren hoe we een gradient achtergrond voor onze Android App activiteit in te stellen.
Wat is Gradient?
Volgens Wikipedia:
In computer graphics, een kleurverloop specificeert een reeks van positie-afhankelijke kleuren, meestal gebruikt om een gebied te vullen. Veel vensterbeheerders staan bijvoorbeeld toe dat de achtergrond van het scherm wordt gespecificeerd als een kleurverloop. De kleuren die door een kleurverloop worden geproduceerd, variëren voortdurend met de positie, waardoor vloeiende kleurovergangen worden geproduceerd.
Een kleurverloop is ook bekend als een kleurhelling of een kleurprogressie. Bij het toewijzen van kleuren aan een reeks waarden, een gradiënt is een continue colormap, een soort kleurenschema.
Dus laten we een eenvoudige gradiënt toevoegen aan onze Android App.
Stap 1: Maak een nieuw project
-
Open uw Android Studio Klik op “Een nieuw Android Studio-project starten” (Leer hoe u Android Studio instelt en uw eerste Android-project maakt)
-
Kies “Lege activiteit” in het projectsjabloonvenster en klik op Volgende
-
Voer de naam van de app in, Pakketnaam, opslaglocatie, taal (Java/Kotlin, wij gebruiken Java voor deze tutorial), en minimale SDK (wij gebruiken API 19: Android 4.4 (KitKat))
-
Klik vervolgens op de knop Voltooien nadat u de bovenstaande gegevens hebt ingevuld
-
Wacht nu tot het project klaar is met bouwen.
Stap 2: Kleurverloop maken
Om een kleurverloop te maken, moeten we een .xml-bestand maken in de map Drawable. Dus ga naar app -> res -> drawable en klik met de rechtermuisknop op drawable -> New -> Drawable Resource File en maak gradient_drawable.xml bestand.
De code van gradient_drawable.xml bestand wordt hieronder getoond:
Zoals je in de code hierboven kunt zien, gebruiken we de gradient tag samen met het verstrekken van android:startColor, android:centerColor en android:endColor attributen om de kleur te definiëren die zal worden gebruikt in het kleurverloop. Laten we eens kijken naar de attributen die beschikbaar zijn in de gradient drawable.
XML-attributen van Gradient Drawable
Dit zijn de attributen van de <gradient> drawable:
| Attributes | Description |
|---|---|
| android:startColor |
Startkleur van de gradient. De waarde van de kleur kan in een van de vormen “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb” zijn |
| android:endColor |
Eindkleur van het kleurverloop De waarde van de kleur kan zijn in een van “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb” vormen |
| android:centerColor |
De Centrumkleur van het kleurverloop. Het is optioneel, maar u kunt het gebruiken als u dat wilt De waarde van de kleur kan in een van de vormen “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb” zijn |
| android:centerX |
X positie van het middelpunt van de gradiënt binnen de vorm als fractie van de breedte 0.5 is de standaardwaarde |
| android:centerY |
Y-positie van het middelpunt van de gradiënt binnen de vorm als fractie van de hoogte 0.5 is de standaardwaarde |
| android:angle |
De hoek van het kleurverloop en wordt alleen gebruikt met het lineaire kleurverloop Het moet een veelvoud van 45 zijn in het bereik |
| android:type |
Het wordt gebruikt om het type gradient in te stellen en de standaardwaarde is lineair . en het is van 3 types
|
| android:gradientRadius |
Het wordt gebruikt om de radius van het gradient in te stellen. Deze wordt alleen gebruikt bij een radiale gradiënt. |
Stap 3: Wijzig activity_main.xml
Nu opent u het bestand activity_main.xml en verwijdert u de standaardcode, wijzigt u de lay-out in RelativeLayout en stelt u de achtergrond in op een gradiëntachtergrond, zoals hieronder is weergegeven:
android:background = "@drawable/gradient_background"Met deze wijziging is onze activity_main.xml is klaar en de volledige code ziet er als volgt uit:
En de output van het bovenstaande is hieronder te zien:
We kunnen het kleurverloop ook toevoegen aan verschillende Views en lay-outs in onze Android App. Laten we eens kijken naar een paar andere Android App componenten waarin we kleurverloop achtergronden kunnen gebruiken.
Gradiënt achtergrond met knop:
Hier gebruiken we de gradiënt achtergrond voor knop:
Uitvoer van de bovenstaande code is:
Gradiënt achtergrond met TextView:
Hier gebruiken we de gradient-achtergrond voor TextView:
De uitvoer van bovenstaande code is:
Gradient-achtergrond met ImageView:
Hier gebruiken we de gradient-achtergrond voor ImageView:
De uitvoer van bovenstaande code is:
Gradient-achtergrond met SeekBar:
Hier gebruiken we de gradient-achtergrond voor SeekBar:
De uitvoer van bovenstaande code is:
