Gradient Drawable in Android – Create Gradient Backgrounds

Am văzut culorile Gradient pe multe site-uri web ca fundaluri, folosite în logo-urile aplicațiilor, cum ar fi în logo-ul Instagram prezentat mai jos, fundalul aplicației, butoane, bare de progres, etc. Un gradient face ca interfața de utilizare a oricărei aplicații, fie că este vorba de o aplicație mobilă sau de un site web, să fie mai frumoasă și mai vibrantă. Mulți dezvoltatori folosesc gradientul în aplicațiile și site-urile lor pentru a le face să arate mai atractive. Deci, în acest tutorial, vom învăța cum să setăm un fundal gradient pentru activitatea aplicației noastre Android.

Ce este Gradient?

Conform Wikipedia:

În grafica pe calculator, un gradient de culoare specifică o gamă de culori dependente de poziție, de obicei folosite pentru a umple o regiune. De exemplu, mulți manageri de ferestre permit ca fundalul ecranului să fie specificat ca un gradient. Culorile produse de un gradient variază continuu în funcție de poziție, producând tranziții netede de culoare.

Un gradient de culoare este cunoscut și sub numele de rampă de culoare sau progresie de culoare. În atribuirea culorilor la un set de valori, un gradient este o hartă de culori continuă, un tip de schemă de culori.

Așa că haideți să adăugăm un gradient simplu la aplicația noastră Android.

Pasul 1: Creați un nou proiect

1. Deschideți Android Studio Faceți clic pe „Start a new Android Studio project” (Învățați cum să configurați Android Studio și să creați primul proiect Android)

2. Alegeți „Empty Activity” din fereastra șablonului de proiect și faceți clic pe Next

3. Introduceți numele aplicației, Numele pachetului, locația de salvare, limba (Java/Kotlin, noi folosim Java pentru acest tutorial) și SDK-ul minim (noi folosim API 19: Android 4.4 (KitKat))

4. În continuare, faceți clic pe butonul Finish (Terminare) după ce ați completat detaliile de mai sus

5. Acum, așteptați ca proiectul să finalizeze compilarea.

Pasul 2: Crearea culorii de gradient

Pentru a crea o culoare de gradient, trebuie să creăm un fișier .xml în dosarul drawable. Deci, mergeți la app -> res -> drawable și faceți clic dreapta pe drawable -> New -> Drawable Resource File și creați fișierul gradient_drawable.xml.

Codul gradient_drawable.xml este prezentat mai jos:

Așa cum puteți vedea în codul de mai sus, folosim eticheta gradient împreună cu furnizarea de atribute android:startColor, android:centerColor și android:endColor pentru a defini culoarea care va fi utilizată în gradient. Așadar, haideți să învățăm despre atributele disponibile în gradient drawable.

XML attributes of Gradient Drawable

În cele ce urmează sunt atributele drawable-ului <gradient>:

Attributes	Description
android:startColor		Culoarea de început a gradientului. Valoarea culorii poate fi în oricare dintre formele „#rgb”, „#argb”, „#rrggbb”, „#aarrggbb”
android:endColor		Culoarea finală a gradientului Valoarea culorii poate fi oricare dintre „#rgb”, „#argb”, „#rrggbb”, „#aarrggbb” forms
android:centerColor		Culoarea centrală a gradientului. Poate fi opțională, dar o puteți folosi dacă doriți Valoarea culorii poate fi în oricare dintre formele „#rgb”, „#argb”, „#rrggbb”, „#aarrggbb”
android:centerX		X poziția punctului central al gradientului în cadrul formei ca fracțiune din lățime 0.5 este valoarea implicită
android:centerY	Y-poziția punctului central al gradientului în interiorul formei ca o fracțiune din înălțime 0.5 este valoarea implicită
android:angle	Unghiul gradientului și este utilizat numai cu gradientul liniar Trebuie să fie multiplu de 45 în intervalul
android:type		Se utilizează pentru a seta tipul de gradient, iar valoarea implicită este linear . și este de 3 tipuri linear radial sweep
android:gradientRadius	Se utilizează pentru a seta raza gradientului. Se utilizează numai cu gradientul radial.

Pasul 3: Modificați activity_main.xml

Acum deschideți fișierul activity_main.xml și eliminați codul implicit și schimbați layout-ul în RelativeLayout și setați-i fundalul în gradient background așa cum se arată mai jos:

android:background = "@drawable/gradient_background"

cu acest activity_main al nostru.xml este gata și codul complet va arăta astfel:

Și rezultatul de mai sus este prezentat mai jos:

Potem, de asemenea, să adăugăm gradientul la diferite Vizualizări și layout-uri în aplicația noastră Android. Să acoperim alte câteva componente ale aplicației Android în care putem folosi fundaluri cu gradient.

Gradient background with Button:

Aici vom folosi fundalul gradient pentru buton:

Succesul codului de mai sus este:

Gradient background with TextView:

Aici vom folosi fundalul gradient pentru TextView:

Ieșirea codului de mai sus este:

Gradient background with ImageView:

Aici vom folosi fundalul în gradient pentru ImageView:

Legătura de ieșire a codului de mai sus este:

Fundal în gradient cu SeekBar:

Aici vom folosi fundalul în gradient pentru SeekBar:

Lovitura codului de mai sus este:

Concluzie: