Android od podstaw: tworzenie stylów i motywów

() translation by (you can also view the original English article)

Jako deweloperzy systemu Android, mamy tendencję do skupiania się przede wszystkim na funkcjonalności naszych aplikacji. Jednakże sama funkcjonalność rzadko wystarcza. W Google Play, który posiada dzisiaj ponad milion aplikacji, wygląd jest tak samo ważny jak funkcjonalność, jeśli nie ważniejszy. Jeśli trudno ci w to uwierzyć, proponuję przejrzeć aplikacje w sekcji Top listy w Google Play.

Istnieją dwa główne podejścia do modyfikowania wyglądu aplikacji na Androida. Pierwsze podejście polega na bezpośrednim modyfikowaniu właściwości widoków w plikach XML układu. Ten sposób jest sensowny tylko, jeśli pracujesz nad prostymi aplikacjami, które posiadają niewiele widoków i aktywności. Drugie podejście obejmuje stworzenie i wykorzystanie niestandardowych stylów i motywów. Jeśli masz doświadczenie w tworzeniu stron internetowych, pierwsze podejście jest zbliżone do stosowania stylów CSS, a drugie do arkuszy stylów.

W tym poradniku, dowiesz się jak stworzyć niestandardowe style i motywy dla aplikacji na Androida. Nauczysz się również jak korzystać z narzędzi i skrótów Android Studio w celu łatwiejszego tworzenia stylów.

1. Tworzenie stylów

Style nakłada się oczywiście na komponenty UI. W związku z tym, zacznijmy od stworzenia nowej pustej aktywności i dodania dwóch widoków do jej pliku XML układu.

<View android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="5dp"
    android:background="#009688"
    android:id="@+id/box1" />

<View android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#00BCD4"
    android:layout_margin="5dp"
    android:id="@+id/box2" />

Jak widzisz w powyższym kodzie, właściwości takie jak layout_width i layout_margin są wyraźnie uwzględnione w definicji każdego widoku.

Aby stworzyć nowy styl dla pierwszego widoku, kliknij prawym klawiszem myszy i wybierz Refactor > Extract > Style.

Pojawi się komunikat, gdzie możesz nazwać styl oraz wybrać atrybuty, które powinny być w nim zawarte. Nazwij go MyBox i zaznacz wszystkie atrybuty z wyjątkiem background.

Kiedy naciśniesz OK, zobaczysz, że kod pierwszego widoku uległ zmianie.

1	<View android:background="#009688"
2	android:id="@+id/box1"
3	style="@style/MyBox" />

Teraz widok posiada atrybut style, który wskazuje na styl MyBox. Możesz przyjrzeć się definicji stylu otwierając res/values/styles.xml.

<style name="MyBox">
    <item name="android:layout_width">100dp</item>
    <item name="android:layout_height">100dp</item>
    <item name="android:layout_margin">5dp</item>
</style>

Po stworzeniu stylu, można go nałożyć na dowolny widok. Dla przykładu, oto jak zastosować MyBox w drugim widoku:

1	<View android:background="#00BCD4"
2	android:id="@+id/box2"
3	style="@style/MyBox" />

Po nałożeniu stylów, tak będą wyglądać oba widoki w aktywności:

2. Rozszerzanie stylów

Android pozwala na stworzenie stylów, które wykorzystują inne jako podstawę. Innymi słowy, umożliwia rozszerzanie istniejących stylów.

Wyróżniamy dwie składnie, które możesz użyć do rozszerzenia stylu. Pierwsza składnia, często nazywana domniemaną, korzysta z notacji kropek. Dla przykładu, oto jak stworzyć dwa pochodne style o nazwie TEAL i CYAN za pomocą MyBox jako stylu nadrzędnego:

<style name="MyBox.TEAL">
    <item name="android:background">#009688</item>
</style>

<style name="MyBox.CYAN">
    <item name="android:background">#00BCD4</item>
</style>

Jak zapewne się domyślasz, MyBox.TEAL i MyBox.CYAN zawierają wszystkie właściwości MyBox. Oprócz nich posiadają również właściwość android:background.

Drugą składnię do tworzenia pochodnych stylów zazwyczaj określa się jako jednoznaczną. Obejmuje ona wykorzystanie atrybutu parent, którego wartość jest ustawiona jako nazwa stylu nadrzędnego. Poniższy fragment kodu definiuje styl o nazwie TealBox.

1	<style name="TealBox" parent="MyBox">
2	<item name="android:background">#009688</item>
3	</style>

Stosowanie pochodnych stylów nie różni się niczym od stosowania tych zwykłych.

<View android:id="@+id/box1"
    style="@style/TealBox" />

<View android:id="@+id/box2"
    style="@style/MyBox.CYAN" />

Większość deweloperów korzysta z domniemanych składni podczas rozszerzania własnych stylów i jednoznacznych składni podczas rozszerzania stylów platformy Android.

3. Tworzenie motywów

Dotychczas nakładaliśmy style na widoki znajdujące się wewnątrz aktywności. Android pozwala również na zastosowanie stylów dla całych aktywności i aplikacji. Po nałożeniu stylu na aktywność lub aplikacje, staje się on motywem.

Domyślnie, wszystkie aplikacje stworzone za pomocą ostatniej wersji Android Studio korzystają z motywu o nazwie AppTheme. AppTheme jest potomkiem dobrze znanego motywu AppCompat, ogromnego i bardzo wszechstronnego motywu, który może mieć wpływ na wygląd prawie każdego powszechnie używanego widoku.

Możesz znaleźć definicję AppTheme w styles.xml:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

AppTheme wywodzi się z Material Design. W związku z tym, aby stworzyć własny motyw zgodny ze specyfikacją Material Design, dobrym pomysłem jest wykorzystanie AppTheme jako podstawy. Ewentualnie można bezpośrednio użyć Theme.AppCompat jako obiektu nadrzędnego.

Chociaż zawsze możesz stworzyć motyw pisząc kod XML—pamiętaj, to są tylko style—w tym poradniku pokażę ci jak wykorzystać Theme Editor programu Android Studio, który wykona całą robotę za ciebie.

Aby otworzyć Theme Editor, otwórz menu Tools i wybierz Android > Theme Editor.

Po prawej stronie okna Theme Editor znajdują się kontrolki służące nie tylko modyfikowania motywów, ale też do tworzenia nowych. Po lewej stronie można zobaczyć podgląd zmian wprowadzonych w motywach.

Aby stworzyć nowy motyw, kliknij rozwijane menu Theme i wybierz opcję Create New Theme.

W nowym oknie, nazwij nowy motyw MyTheme i naciśnij OK.

Na tym etapie, style.xml otrzyma nowy wiersz, który wygląda tak:

1	<style name="MyTheme" parent="AppTheme" />

Zmodyfikujmy teraz MyTheme za pomocą Theme Editor. Aby nie komplikować, w tym poradniku zmodyfikujemy tylko wartości atrybutów colorPrimary, colorPrimaryDark, i colorAccent.

Aby zmienić wartość colorPrimary, kliknij przycisk colorPrimary. Theme Editor wyświetli komunikat umożliwiający wybranie koloru. Wybierz dowolny kolor, ale najpierw nadaj mu nową nazwę. Jeśli tego nie zrobisz, Theme Editor nadpisze kolor używany przez AppTheme.

Wykonaj te same czynności, aby zmienić wartości colorPrimaryDark i colorAccent. Theme Editor automatycznie użyje wybranego koloru dla colorPrimary, aby zasugerować odpowiednie kolory dla colorPrimaryDark and colorAccent.

Definicja MyTheme będzie wyglądała w ten sposób:

<style name="MyTheme" parent="AppTheme" >
    <item name="colorPrimary">@color/colorPrimaryMyTheme</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDarkMyTheme</item>
    <item name="colorAccent">@color/colorAccentMyTheme</item>
</style>

4. Stosowanie motywów

Przed zastosowaniem utworzonego przez nas motywu, dodajmy do aktywności kilka powszechnie używanych widoków. W ten sposób, łatwiej będzie nam zauważyć zmiany w motywie.

Poniższy kod tworzy zwykły, bez obramowania i kolorowy Button, Checkbox, RadioButton, Switch, Seekbar, TextView i EditText.

<Button android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="normal"
    android:id="@+id/normal_button" />

<Button android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="borderless"
    android:id="@+id/borderless_button"
    style="@style/Widget.AppCompat.Button.Borderless" />

<Button android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="colored"
    android:id="@+id/colored_button"
    style="@style/Widget.AppCompat.Button.Colored" />

<CheckBox android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="New CheckBox"
    android:id="@+id/checkBox" />

<RadioButton android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="New RadioButton"
    android:id="@+id/radioButton" />

<Switch android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="New Switch"
    android:id="@+id/switchButton" />

<SeekBar android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/seekBar" />

<TextView android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="New Text"
    android:id="@+id/textView" />

<EditText android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/editText"
    android:hint="Input" />

Po dodaniu nowych widoków, układ powinien wyglądać tak:

Jeśli przeczytałeś specyfikację Material Design, z pewnością wiesz, że aktywność obecnie korzysta z odcieni indygo dla colorPrimary i colorPrimaryDark. Dla colorAccent, korzysta z odcienia różu. Są to domyślne kolory określone przez Android Studio. Możesz znaleźć ich odpowiedniki kodu hex w res/values/colors.xml projektu.

Aby zastosować MyTheme, szablon stworzony w poprzednim kroku, otwórz plik manifestu projektu i dodaj atrybut android:theme do definicji aktywności. Ustaw jego wartość na @style/MyTheme.

<activity android:name=".MainActivity"
    android:theme="@style/MyTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

Podobnie możesz nałożyć motyw na całą aplikację ustawiając wartość atrybutu definicji aplikacji android:theme na @style/MyTheme.

Jeśli przyjrzysz się teraz swojej aktywności, powinna wyglądać zupełnie inaczej.

Podsumowanie

W tym poradniku, nauczyłeś się jak stworzyć i zastosować niestandardowe style i motywy Androida. Zachęcam do wykorzystania tej wiedzy do nadawania nowego wyglądu twoim aplikacjom. Jednakże, nie daj się ponieść emocjom—większość użytkowników systemu Android jest tak przyzwyczajona do Material Design, że odejście od jego wytycznych, może być dużym błędem.

Aby dowiedzieć się więcej o stylach i motywach, polecam przejrzenie przewodnika po stylach i motywach.