Gradient Drawable w Android – Tworzenie tła gradientu

Widzieliśmy kolory gradientu na wielu stronach internetowych jako tła, używane w logo aplikacji, jak w logo Instagram pokazano poniżej, tło aplikacji, przyciski, paski postępu, itp. Gradient sprawia, że UI każdej aplikacji, czy to Mobile App lub strony internetowej, bardziej piękne i żywe. Wielu programistów używa gradientu w swoich aplikacjach i stronach internetowych, aby wyglądały one bardziej atrakcyjnie. Więc w tym poradniku, dowiemy się jak ustawić tło gradientu dla naszej aktywności Android App.

Co to jest gradient?

Według Wikipedii:

W grafice komputerowej, gradient koloru określa zakres kolorów zależnych od pozycji, zwykle używanych do wypełnienia regionu. Na przykład, wiele menedżerów okien pozwala na określenie tła ekranu jako gradientu. Kolory wytwarzane przez gradient zmieniają się w sposób ciągły z pozycją, tworząc płynne przejścia kolorów.

Gradient kolorów jest również znany jako rampa kolorów lub progresja kolorów. W przypisywaniu kolorów do zestawu wartości, gradient jest ciągłym colormap, rodzaj schematu kolorów.

Więc dodajmy prosty gradient do naszego Android App.

Krok 1: Utwórz nowy projekt

1. Otwórz Android Studio Kliknij „Rozpocznij nowy projekt Android Studio” (Dowiedz się, jak skonfigurować Android Studio i utworzyć swój pierwszy projekt Android)

2. Wybierz „Empty Activity” z okna szablonu projektu i kliknij Next

3. Wprowadź App Name, Nazwę pakietu, lokalizację zapisu, język (Java/Kotlin, w tym tutorialu używamy Javy), oraz minimalne SDK (używamy API 19: Android 4.4 (KitKat))

4. Następnie kliknij na przycisk Finish po wypełnieniu powyższych szczegółów

5. Teraz poczekaj, aż projekt zakończy budowanie.

Krok 2: Tworzenie koloru gradientu

Aby utworzyć kolor gradientu, musimy utworzyć plik .xml w folderze drawable. Przejdź więc do app -> res -> drawable i kliknij prawym przyciskiem myszy na drawable -> New -> Drawable Resource File i utwórz plik gradient_drawable.xml.

Kod pliku gradient_drawable.xml jest pokazany poniżej:

Jak widać w powyższym kodzie, używamy tagu gradient wraz z atrybutami android:startColor, android:centerColor i android:endColor do zdefiniowania koloru, który będzie użyty w gradiencie. Zapoznajmy się więc z atrybutami dostępnymi w gradiencie drawable.

Atrybuty XML Gradient Drawable

Poniżej znajdują się atrybuty <gradient> drawable:

Attributes	Description
android:startColor	Kolor początkowy gradientu. Wartość koloru może być w dowolnej z form „#rgb”, „#argb”, „#rrggbb”, „#aarrgggbb”
android:endColor	Końcowy kolor gradientu Wartość koloru może być w dowolnym z „#rgb”, „#argb”, „#rrggbb”, „#aarrggbb” forms
android:centerColor	Środkowy kolor gradientu. Może być opcjonalny, ale możesz go użyć, jeśli chcesz Wartość koloru może być w jednej z form „#rgb”, „#argb”, „#rrggbb”, „#aarrggbb”
android:centerX	X pozycja punktu środkowego gradientu wewnątrz kształtu jako ułamek szerokości 0.5 is the default value
android:centerY	Y-position of the center point of the gradient within the shape as a fraction of the height 0.5 jest wartością domyślną
android:angle	Kąt nachylenia gradientu i jest używany tylko z gradientem liniowym Musi być wielokrotnością 45 w zakresie
android:type	Używa się go do ustawienia typu gradientu i domyślną wartością jest linear . i ma 3 typy linear radial sweep
android:gradientRadius	Jest używany do ustawiania promienia gradientu. Jest on używany tylko z gradientem radialnym.

Krok 3: Modyfikacja activity_main.xml

Teraz otwórz plik activity_main.xml i usuń domyślny kod oraz zmień układ na RelativeLayout i ustaw tło na gradientowe jak pokazano poniżej:

android:background = "@drawable/gradient_background"

z tym nasza activity_main.xml jest zrobiony i kompletny kod będzie wyglądał jak:

A wyjście powyższego jest pokazane poniżej:

Możemy również dodać gradient do różnych widoków i układów w naszej aplikacji na Androida. Obejrzyjmy kilka innych komponentów Android App, w których możemy użyć tła gradientowego.

Tło gradientowe z przyciskiem:

Tutaj użyjemy tła gradientowego dla przycisku:

Wyjściem powyższego kodu jest:

Tło gradientowe z TextView:

Tutaj użyjemy tła gradientowego dla TextView:

Wynikiem powyższego kodu jest:

Tło gradientowe z ImageView:

Tutaj użyjemy gradientowego tła dla ImageView:

Wynikiem powyższego kodu jest:

Gradientowe tło z SeekBar:

Tutaj użyjemy gradientowego tła dla SeekBar:

Wynikiem powyższego kodu jest:

Zakończenie:

.