Gradient Drawable in Android – Vytváření gradientních pozadí

BY admin
|

Gradientní barvy jsme viděli na mnoha webových stránkách jako pozadí, používané v logu aplikací, například v níže uvedeném logu Instagramu, na pozadí aplikací, tlačítkách, posuvných lištách atd. Gradient zkrášluje a oživuje uživatelské rozhraní jakékoli aplikace, ať už jde o mobilní aplikaci nebo webové stránky. Mnoho vývojářů používá gradient ve svých aplikacích a webových stránkách, aby vypadaly atraktivněji. V tomto návodu se tedy naučíme, jak nastavit gradientní pozadí pro naši aktivitu v aplikaci pro Android.

Co je to gradient?

Podle Wikipedie:

V počítačové grafice barevný gradient určuje rozsah barev závislých na poloze, obvykle se používá k vyplnění oblasti. Například mnoho správců oken umožňuje zadat pozadí obrazovky jako gradient. Barvy vytvořené gradientem se plynule mění v závislosti na poloze a vytvářejí plynulé barevné přechody.

Barevný gradient je také známý jako barevná rampa nebo barevná progrese. Při přiřazování barev sadě hodnot je gradient spojitou barevnou mapou, typem barevného schématu.

Přidáme tedy do naší aplikace pro Android jednoduchý gradient.

Krok 1: Vytvořte nový projekt

  1. Otevřete Android Studio Klikněte na „Spustit nový projekt Android Studio“ (Přečtěte si, jak nastavit Android Studio a vytvořit svůj první projekt Android)

  2. V okně šablony projektu vyberte „Prázdná aktivita“ a klikněte na Další

  3. Zadejte název aplikace, Název balíčku, umístění pro uložení, jazyk(Java/Kotlin, pro tento tutoriál používáme Javu) a minimální SDK(používáme API 19: Android 4.4 (KitKat))

  4. Po vyplnění výše uvedených údajů klikněte na tlačítko Finish

  5. Nyní počkejte na dokončení sestavení projektu.

Krok 2: Vytvoření gradientní barvy

Pro vytvoření gradientní barvy musíme vytvořit soubor .xml ve složce drawable. Přejděte tedy do aplikace -> res -> drawable a klikněte pravým tlačítkem myši na drawable -> New -> Drawable Resource File a vytvořte soubor gradient_drawable.xml.

Kód souboru gradient_drawable.xml je uveden níže:

Jak vidíte ve výše uvedeném kódu, používáme značku gradient spolu s uvedením atributů android:startColor, android:centerColor a android:endColor pro definování barvy, která bude použita v gradientu. Pojďme se tedy seznámit s atributy dostupnými v drawable gradientu.

XML atributy kreslitelné položky Gradient

Následují atributy kreslitelné položky <gradient>:

Atributy Popis
android:startColor

Začáteční barva gradientu.

Hodnota barvy může být v některém z tvarů „#rgb“, „#argb“, „#rrggbb“, „#aarrggbb“
android:endColor

Koncová barva gradientu

Hodnota barvy může mít některou z hodnot „#rgb“, „#argb“, „#rrggbb“, „#aarrggbb“ forms
android:centerColor

Středová barva gradientu. Může být nepovinná, ale pokud chcete, můžete ji použít

Hodnota barvy může být v některém z tvarů „#rgb“, „#argb“, „#rrggbb“, „#aarrggbb“
android:centerX

X pozice středového bodu gradientu v rámci tvaru jako zlomek šířky

0.5 je výchozí hodnota
android:centerY

Poloha středového bodu gradientu v rámci tvaru jako podíl výšky

0.5 je výchozí hodnota
android:angle

Úhel gradientu a používá se pouze u lineárního gradientu

Musí být násobkem 45 v rozsahu

android:type

Slouží k nastavení typu gradientu a výchozí hodnota je lineární . a je tří typů

  • lineární

  • radiální

  • sweep
android:gradientRadius

Slouží k nastavení poloměru gradientu. Používá se pouze u radiálního gradientu.

Krok 3: Upravte soubor activity_main.xml

Nyní otevřete soubor activity_main.xml a odstraňte výchozí kód a změňte rozvržení na RelativeLayout a nastavte jeho pozadí na gradientní pozadí, jak je uvedeno níže:

android:background = "@drawable/gradient_background"

s tímto naše activity_main.xml je hotovo a kompletní kód bude vypadat takto:

A výstup výše uvedeného je zobrazen níže:

Můžeme také přidat gradient do různých Zobrazení a rozložení v naší aplikaci Android. Pojďme se věnovat několika dalším komponentám aplikace Android, ve kterých můžeme použít gradientní pozadí.

Gradientní pozadí s tlačítkem:

Zde použijeme gradientní pozadí pro tlačítko:

Výstup výše uvedeného kódu je:

Gradientní pozadí s TextView:

Zde použijeme gradientní pozadí pro TextView:

Výstup výše uvedeného kódu je:

Gradientní pozadí s ImageView:

Zde použijeme gradientní pozadí pro ImageView:

Výstup výše uvedeného kódu je:

Gradientní pozadí se SeekBar:

Tady použijeme gradientní pozadí pro SeekBar:

Výstup výše uvedeného kódu je:

Závěr: