Gradient Drawable in Android – Create Gradient Backgrounds

Wir haben die Gradient-Farben auf vielen Websites als Hintergründe gesehen, in App-Logos verwendet, wie in dem unten gezeigten Instagram-Logo, App-Hintergrund, Schaltflächen, Fortschrittsbalken, etc. Ein Farbverlauf macht die Benutzeroberfläche einer jeden App, sei es eine mobile App oder eine Website, schöner und lebendiger. Viele Entwickler verwenden Farbverläufe in ihren Apps und Websites, um sie attraktiver zu gestalten. In diesem Tutorial werden wir lernen, wie man einen Farbverlauf als Hintergrund für unsere Android App-Aktivität einrichtet.

Was ist ein Farbverlauf?

Laut Wikipedia:

In der Computergrafik bezeichnet ein Farbverlauf eine Reihe von positionsabhängigen Farben, die normalerweise verwendet werden, um einen Bereich zu füllen. Viele Fenstermanager erlauben es zum Beispiel, den Bildschirmhintergrund als Farbverlauf zu definieren. Die von einem Farbverlauf erzeugten Farben variieren kontinuierlich mit der Position und erzeugen so sanfte Farbübergänge.

Ein Farbverlauf wird auch als Farbrampe oder Farbverlauf bezeichnet. Bei der Zuordnung von Farben zu einer Reihe von Werten ist ein Farbverlauf eine kontinuierliche Farbkarte, eine Art Farbschema.

Fügen wir also einen einfachen Farbverlauf zu unserer Android App hinzu.

Schritt 1: Erstellen Sie ein neues Projekt

1. Öffnen Sie Ihr Android Studio Klicken Sie auf „Starten Sie ein neues Android Studio Projekt“ (Erfahren Sie, wie Sie Android Studio einrichten und Ihr erstes Android Projekt erstellen)

2. Wählen Sie „Leere Aktivität“ aus dem Projektvorlagenfenster und klicken Sie auf Weiter

3. Geben Sie den App-Namen ein, Paketname, Speicherort, Sprache (Java/Kotlin, wir verwenden Java für dieses Tutorial), und minimales SDK (wir verwenden API 19: Android 4.4 (KitKat))

4. Nachdem Sie die obigen Angaben gemacht haben, klicken Sie auf die Schaltfläche Fertigstellen

5. Nun warten Sie, bis das Projekt den Build beendet hat.

Schritt 2: Farbverlauf erstellen

Um einen Farbverlauf zu erstellen, müssen wir eine .xml-Datei im Drawable-Ordner erstellen. Gehen Sie also zu app -> res -> drawable und klicken Sie mit der rechten Maustaste auf drawable -> New -> Drawable Resource File und erstellen Sie die gradient_drawable.xml Datei.

Der Code der gradient_drawable.xml-Datei ist unten dargestellt:

Wie Sie im obigen Code sehen können, verwenden wir das Gradient-Tag zusammen mit den Attributen android:startColor, android:centerColor und android:endColor, um die Farbe zu definieren, die im Farbverlauf verwendet wird. Lernen wir also die Attribute kennen, die in der Farbverlaufszeichnung verfügbar sind.

XML-Attribute von Gradient Drawable

Nachfolgend sind die Attribute der <gradient> Drawable aufgeführt:

Attribute	Beschreibung
android:startColor	Startfarbe des Farbverlaufs. Der Wert der Farbe kann in einer der Formen „#rgb“, „#argb“, „#rrggbb“, „#aarrggbb“ sein
android:endColor	Endfarbe des Farbverlaufs Der Wert der Farbe kann in einer der Formen „#rgb“, „#argb“, „#rrggbb“, „#aarrggbb“ sein
android:centerColor	Die Mittelfarbe des Farbverlaufs. Sie ist optional, kann aber bei Bedarf verwendet werden Der Wert der Farbe kann in einer der Formen „#rgb“, „#argb“, „#rrggbb“, „#aarrggbb“ sein
android:centerX	X Position des Mittelpunkts des Farbverlaufs innerhalb der Form als Bruchteil der Breite 0.5 ist der Standardwert
android:centerY	Y-Position des Mittelpunkts des Farbverlaufs innerhalb der Form als Bruchteil der Höhe 0.5 ist der Standardwert
android:angle	Der Winkel des Gradienten und wird nur mit dem linearen Gradienten verwendet Es muss ein Vielfaches von 45 im Bereich
android:type	Sie wird verwendet, um den Typ des Gradienten einzustellen und der Standardwert ist linear . und es gibt 3 Typen linear radial sweep
android:gradientRadius	Sie wird verwendet, um den Radius des Gradienten einzustellen. Er wird nur bei radialen Farbverläufen verwendet.

Schritt 3: Ändern Sie activity_main.xml

Öffnen Sie nun die Datei activity_main.xml und entfernen Sie den Standardcode und ändern Sie das Layout in RelativeLayout und setzen Sie den Hintergrund auf Farbverlaufshintergrund wie unten gezeigt:

android:background = "@drawable/gradient_background"

Damit ist unsere activity_main.xml ist fertig und der komplette Code sieht wie folgt aus:

Und die Ausgabe der oben genannten ist unten gezeigt:

Wir können den Farbverlauf auch zu verschiedenen Ansichten und Layouts in unserer Android App hinzufügen. Lassen Sie uns ein paar andere Android App Komponenten behandeln, in denen wir Farbverlaufshintergründe verwenden können.

Gradient background with Button:

Hier werden wir den Gradient background für Button verwenden:

Output des obigen Codes ist:

Gradient background with TextView:

Hier werden wir den Gradient Background für TextView verwenden:

Die Ausgabe des obigen Codes ist:

Gradient Background mit ImageView:

Hier werden wir den Gradient Background für ImageView verwenden:

Die Ausgabe des obigen Codes ist:

Gradient Background with SeekBar:

Hier werden wir den Farbverlaufshintergrund für SeekBar verwenden:

Die Ausgabe des obigen Codes ist:

Abschluss: