Gradient Drawable i Android – Skapa gradientbakgrunder

Vi har sett gradientfärgerna på många webbplatser som bakgrunder, som används i applogotyper, som i Instagram-logotypen som visas nedan, som appbakgrund, knappar, framstegsbalkar, etc. En gradient gör användargränssnittet i en app, oavsett om det är en mobilapp eller en webbplats, vackrare och livligare. Många utvecklare använder gradienter i sina appar och webbplatser för att få dem att se mer attraktiva ut. Så i den här handledningen kommer vi att lära oss hur man ställer in en gradientbakgrund för vår Android-appaktivitet.

Vad är gradient?

Enligt Wikipedia:

I datorgrafik specificerar en färggradient ett intervall av positionsberoende färger, som vanligtvis används för att fylla ett område. Många fönsterhanterare tillåter till exempel att skärmbakgrunden specificeras som en gradient. De färger som produceras av en gradient varierar kontinuerligt med positionen, vilket ger mjuka färgövergångar.

En färggradient är också känd som en färgramp eller en färgprogression. Vid tilldelning av färger till en uppsättning värden är en gradient en kontinuerlig färgkarta, en typ av färgschema.

Så låt oss lägga till en enkel gradient i vår Android-app.

Steg 1: Skapa ett nytt projekt

1. Öppna din Android Studio Klicka på ”Start a new Android Studio project” (Lär dig hur du konfigurerar Android Studio och skapar ditt första Android-projekt)

2. Välj ”Empty Activity” (Tom aktivitet) från fönstret för projektmallen och klicka på Next

3. Inställ App Name (App-namn), Package name, save location, language(Java/Kotlin, vi använder Java för den här handledningen) och minimum SDK(vi använder API 19: Android 4.4 (KitKat))

4. Nästan klicka på knappen Slutför efter att du fyllt i ovanstående uppgifter

5. Vänta nu på att projektet ska slutföra byggandet.

Steg 2: Skapa en lutningsfärg

För att skapa en lutningsfärg måste vi skapa en .xml-fil i mappen drawable. Så gå till app -> res -> drawable och högerklicka på drawable -> New -> Drawable Resource File och skapa gradient_drawable.xml-filen.

Koden för gradient_drawable.xml-filen visas nedan:

Som du kan se i koden ovan använder vi gradienttaggen tillsammans med android:startColor, android:centerColor och android:endColor-attributen för att definiera färgen som ska användas i gradienten. Så låt oss lära oss mer om de attribut som finns tillgängliga i gradient drawable.

XML-attribut för Gradient Drawable

Följande är attributen för <gradient> drawable:

Attribut	Description
android:startColor	Startfärg för gradienten. Värdet för färg kan vara i någon av formerna ”#rgb”, ”#argb”, ”#rrggbb”, ”#aarrggbb”
android:endColor	Slutfärg för gradienten Värdet för färg kan vara något av ”#rgb”, ”#argb”, ”#rrggbb”, ”#aarrggbb” former
android:centerColor	Centerfärg för gradienten. Den kan vara valfri men du kan använda den om du vill Värdet för color kan vara i något av ”#rgb”, ”#argb”, ”#rrggbb”, ”#aarrggbb” forms
android:centerX	X-position för gradientens mittpunkt i formen som en bråkdel av bredden 0.5 är standardvärdet
android:centerY	Y-position för gradientens mittpunkt inom formen som en bråkdel av höjden 0.5 är standardvärdet
android:angle	Vinkeln på gradienten och den används endast med den linjära gradienten Den måste vara en multipel av 45 i intervallet
android:type	Det används för att ställa in gradientens typ och standardvärdet är linjär . och det finns 3 typer linjär radial svep
android:gradientRadius	Det används för att ställa in gradientens radie. Den används endast med den radiella gradienten.

Steg 3: Ändra activity_main.xml

Öppna nu filen activity_main.xml och ta bort standardkoden och ändra layouten till RelativeLayout och ställ in bakgrunden till gradientbakgrund som visas nedan:

android:background = "@drawable/gradient_background"

med detta vår activity_main.xml är klar och den kompletta koden kommer att se ut som:

Och resultatet av ovanstående visas nedan:

Vi kan också lägga till gradienten till olika vyer och layouter i vår Android-app. Låt oss täcka några andra Android App-komponenter där vi kan använda gradientbakgrunder.

Gradientbakgrund med knapp:

Här kommer vi att använda gradientbakgrund för knappen:

Output av ovanstående kod är:

Gradientbakgrund med TextView:

Här kommer vi att använda gradientbakgrund för TextView:

Objektet av ovanstående kod är:

Gradientbakgrund för ImageView:

Gradientbakgrund för ImageView:

Här kommer vi att använda gradientbakgrunden för ImageView:

Overstående kod ger följande resultat:

Gradientbakgrund med SeekBar:

Gradientbakgrund med SeekBar:

Här kommer vi att använda gradientbakgrunden för SeekBar:

Utfallet av ovanstående kod är:

Slutsats: