Gradient Drawable in Android – Create Gradient Backgrounds

A Gradient színeket sok weboldalon láttuk már háttérként, App logókban, mint az alább látható Instagram logóban, App háttérben, gombokban, haladási sávokban, stb. használva. Egy gradiens szebbé és élénkebbé teszi bármely alkalmazás felhasználói felületét, legyen az mobilalkalmazás vagy weboldal. Sok fejlesztő alkalmazza a gradienst az alkalmazásokban és a weboldalakon, hogy vonzóbbá tegye azokat. Ezért ebben a bemutatóban megtanuljuk, hogyan állíthatunk be gradiens hátteret az Android alkalmazásunk tevékenységéhez.

Mi az a Gradient?

A Wikipedia szerint:

A számítógépes grafikában a színgradiens a pozíciótól függő színek egy tartományát határozza meg, amelyet általában egy régió kitöltésére használnak. Például sok ablakkezelő lehetővé teszi, hogy a képernyő hátterét gradiensként adjuk meg. A színátmenet által előállított színek a pozíciótól függően folyamatosan változnak, sima színátmeneteket eredményezve.

A színátmenetet színrámpának vagy színmenetnek is nevezik. A színek értékkészlethez való hozzárendelésében a színátmenet egy folyamatos színtérkép, egyfajta színséma.

Adjunk tehát egy egyszerű színátmenetet az Android alkalmazásunkhoz.

1. lépés: Új projekt létrehozása

1. Nyissuk meg az Android Studio-t. Kattintsunk az “Új Android Studio projekt indítása” gombra (Az Android Studio beállításának és az első Android projekt létrehozásának megtanulása)

2. Válasszuk az “Üres tevékenységet” a projekt sablon ablakából, és kattintsunk a Tovább

3. Adjuk meg az alkalmazás nevét, Csomag nevét, a mentési helyet, a nyelvet (Java/Kotlin, ebben a bemutatóban Javát használunk) és a minimális SDK-t (mi az API 19-et használjuk): Android 4.4 (KitKat))

4. A fenti adatok kitöltése után kattintson a Befejezés gombra

5. Most várjon, amíg a projekt befejezi a buildet.

2. lépés: Gradiens szín létrehozása

A gradiens szín létrehozásához létre kell hoznunk egy .xml fájlt a drawable mappában. Tehát menjünk az app -> res -> drawable és kattintsunk jobb gombbal a drawable -> New -> Drawable Resource File-re és hozzuk létre a gradient_drawable.xml fájlt.

A gradient_drawable kódja.xml fájl kódja az alábbiakban látható:

Amint a fenti kódban látható, a gradient taget használjuk a android:startColor, android:centerColor és android:endColor attribútumok megadásával együtt a gradiensben használt szín meghatározásához. Ismerjük meg tehát a gradiens rajzelemben elérhető attribútumokat.

A gradiens rajzelem XML-attribútumai

A következőkben a <gradient> rajzelem attribútumait ismertetjük:

Attributes	Description
android:startColor	A gradiens kezdőszíne. A szín értéke lehet a “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb” formák
android:endColor	A gradiens végszíne A szín értéke lehet a “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb” formák
android:centerColor	A gradiens középső színe. Nem kötelező, de ha akarod, használhatod A szín értéke lehet a “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb” formák
android:centerX	X a gradiens középpontjának pozíciója az alakzaton belül a szélesség törtrészeként 0.5 az alapértelmezett érték
android:centerY	A gradiens középpontjának Y pozíciója az alakzaton belül a magasság törtrészeként 0.Az 5 az alapértelmezett érték
android:angle	A gradiens szöge, és csak a lineáris gradiensnél használható A 45 többszöröse kell legyen a
android tartományban:type	A gradiens típusának beállítására szolgál, az alapértelmezett érték lineáris . és 3 típusa van lineáris radial sweep
android:gradientRadius	A gradiens sugarának beállítására szolgál. Ezt csak a radiális gradiensnél használjuk.

3. lépés: Az activity_main.xml módosítása

Most nyissuk meg az activity_main.xml fájlt és távolítsuk el az alapértelmezett kódot, majd módosítsuk a layoutot RelativeLayout-ra és állítsuk a hátteret gradiens háttérre az alábbiak szerint:

android:background = "@drawable/gradient_background"

Ezzel a mi activity_main.xml elkészült, és a teljes kód így fog kinézni:

A fentiek kimenete pedig az alábbiakban látható:

A gradienst az Android alkalmazásunk különböző nézeteihez és elrendezéseihez is hozzáadhatjuk. Térjünk ki néhány további Android App komponensre, amelyekben használhatunk gradiens hátteret.

Gradient background with Button:

Itt fogjuk használni a gradiens hátteret a gombhoz:

A fenti kód kimenete:

Gradient background with TextView:

Itt fogjuk használni a gradiens hátteret a TextView számára:

A fenti kód kimenete:

Gradiens háttér ImageView-val:

Itt fogjuk használni a gradiens hátteret az ImageView számára:

A fenti kód kimenete:

Gradiens háttér a SeekBarral:

Itt a SeekBarhoz használjuk a gradiens hátteret:

A fenti kód kimenete:

Következtetés: