Gradient Drawable i Android – Opret Gradient Baggrunde

Vi har set Gradient farverne på mange hjemmesider som baggrunde, brugt i App logoer, som i Instagram logoet vist nedenfor, App baggrund, knapper, fremskridt barer, osv. En gradient gør UI af enhver app, uanset om det er en mobilapp eller et websted, smukkere og mere levende. Mange udviklere bruger gradient i deres apps og websites for at få det til at se mere attraktivt ud. Så i denne tutorial lærer vi, hvordan vi indstiller en gradientbaggrund til vores Android App-aktivitet.

Hvad er Gradient?

I henhold til Wikipedia:

I computergrafik angiver en farvegradient en række positionsafhængige farver, der normalt bruges til at fylde et område. Mange window managers tillader f.eks., at skærmbaggrunden kan angives som en gradient. De farver, der produceres af en gradient, varierer kontinuerligt med positionen, hvilket giver glidende farveovergange.

En farvegradient er også kendt som en farvegradient eller et farveforløb. Ved tildeling af farver til et sæt af værdier er en gradient et kontinuerligt farvekort, en type farveskema.

Så lad os tilføje en simpel gradient til vores Android-app.

Stræk 1: Opret et nyt projekt

1. Åbn din Android Studio Klik på “Start et nyt Android Studio-projekt” (Lær hvordan du konfigurerer Android Studio og opretter dit første Android-projekt)

2. Vælg “Empty Activity” fra vinduet med projektskabelonen, og klik på Next

3. Indtast App Name, Package name, save location, language(Java/Kotlin, vi bruger Java til denne vejledning) og minimum SDK(vi bruger API 19: Android 4.4 (KitKat))

4. Næst skal du klikke på knappen Finish (Afslut) efter at have udfyldt ovenstående oplysninger

5. Nu skal du vente på, at projektet er færdigbygget.

Stræk 2: Oprettelse af gradientfarve

For at oprette en gradientfarve skal vi oprette en .xml-fil i mappen drawable. Så gå til app -> res -> drawable og højreklik på drawable -> New -> Drawable Resource File og opret gradient_drawable.xml-filen.

Koden for gradient_drawable.xml-filen er vist nedenfor:

Som du kan se i koden ovenfor, bruger vi gradient-tagget sammen med android:startColor-, android:centerColor– og android:endColor-attributterne til at definere den farve, der skal bruges i gradienten. Så lad os lære om de attributter, der er tilgængelige i gradient drawable.

XML-attributter for Gradient Drawable

Følgende er attributterne for <gradient> drawable:

Attributter	Description
	android:startColor	Startfarve for gradienten. Værdien af farven kan være i en af formerne “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb”
android:endColor	Endfarve på gradienten Værdien af farven kan være en af “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb” forms
android:centerColor	Centralfarven på gradienten. Den kan være valgfri, men du kan bruge den, hvis du ønsker det Værdien af farven kan være i en af “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb” forms
android:centerX	X-position for gradientens midtpunkt i formen som en brøkdel af bredden 0.5 er standardværdien
android:centerY	Y-position for gradientens midtpunkt inden for formen som en brøkdel af højden 0.5 er standardværdien
android:angle	Vinklen på gradienten, og den bruges kun med den lineære gradient Den skal være et multiplum af 45 i intervallet
android:type	Det bruges til at indstille gradientens type, og standardværdien er lineær . og den er af 3 typer lineær radial sweep
android:gradientRadius	Det bruges til at indstille gradientens radius. Den bruges kun med den radiale gradient.

Stræk 3: Ændre activity_main.xml

Åbn nu filen activity_main.xml, og fjern standardkoden og ændr layoutet til RelativeLayout, og indstil dets baggrund til gradientbaggrund som vist nedenfor:

android:background = "@drawable/gradient_background"

med dette vores activity_main.xml er færdig, og den komplette kode vil se ud som:

Og outputtet af ovenstående vises nedenfor:

Vi kan også tilføje gradienten til forskellige visninger og layouts i vores Android-app. Lad os dække et par andre Android App-komponenter, hvor vi kan bruge gradientbaggrunde.

Gradientbaggrund med knap:

Her vil vi bruge gradientbaggrunden til knappen:

Output af ovenstående kode er:

Gradientbaggrund med TextView:

Her vil vi bruge gradientbaggrund til TextView:

Opdatet af ovenstående kode er:

Gradientbaggrund med ImageView:

Gradientbaggrund med ImageView:

Her vil vi bruge gradientbaggrunden til ImageView:

Opdatet af ovenstående kode er:

Gradientbaggrund med SeekBar:

Gradientbaggrund med SeekBar:

Her vil vi bruge gradientbaggrunden til SeekBar:

Opdatet af ovenstående kode er:

Konklusion: