W tej lekcji
- Korzystanie z motywu Android
- Formatowanie tła
- Ustawianie koloru tekstu
- Wygląd oznaczenia aktywnej zakładki
Warto przeczytać
Pasek akcji pozwala użytkownikom w łatwy i przewidywalny sposób wykonywać akcje i poruszać się po aplikacji. Nie oznacza to jednak, że w każdym programie musi on wyglądać tak samo. Aby lepiej dopasować wygląd paska do wizerunku danego produktu, wystarczy skorzystać ze stylów i motywów Android.
W systemie Android dostępnych jest kilka wbudowanych motywów, w tym paski w „jasnej” lub „ciemnej” kolorystyce. Możesz na nich bazować przy opracowywaniu własnego wyglądu paska.
Korzystanie z motywu Android
W systemie Android dostępne są dwa podstawowe motywy, które określają kolor paska akcji:
Theme.Holo— motyw w ciemnej kolorystyce.Theme.Holo.Light— motyw w kolorystyce jasnej.
Motywy te można zastosować w całej aplikacji lub tylko w wybranych aktywnościach — w pliku manifestu należy zadeklarować atrybut android:theme odpowiednio dla elementu <application> bądź poszczególnych elementów <activity>.
Przykład:
<application android:theme="@android:style/Theme.Holo.Light" ... />
Możesz także skorzystać z motywu Theme.Holo.Light.DarkActionBar, dzięki któremu pasek będzie ciemny, zaś pozostałe aktywności będą utrzymane w jasnej kolorystyce.
W przypadku gdy obsługujesz pasek akcji za pomocą biblioteki pomocniczej, musisz natomiast zastosować któryś z motywów Theme.AppCompat:
Theme.AppCompatw ciemnej kolorystyce.Theme.AppCompat.Lightw jasnej kolorystyce.Theme.AppCompat.Light.DarkActionBarw jasnej kolorystyce z ciemnym paskiem akcji.
Dopilnuj, aby wykorzystywane przez ciebie na pasku ikony odpowiednio kontrastowały z kolorem paska akcji. Dla ułatwienia w paczce Action Bar Icon Pack zawarto standardowe ikony przycisków akcji, których możesz użyć zarówno w motywach Holo o ciemnej jak i o jasnej kolorystyce.
Formatowanie wyglądu tła
Aby zmienić tło paska akcji, utwórz własny motyw, w którym przedefiniujesz własność actionBarStyle, tak aby odwoływała się do innego stylu, w którym możesz ustawić własność background na inny zasób drawable określający właściwości tła.
Korzystając z własności backgroundStacked i backgroundSplit możesz określić wygląd tła odpowiednio dla zakładek nawigacyjnych bądź dolnego paska akcji (ang. split action bar), o ile wykorzystujesz je w swojej aplikacji.
Aplikacje obsługujące system Android 3.0 i nowsze
Jeśli twoja aplikacja obsługuje system Android wyłącznie w wersjach począwszy od 3.0, możesz zdefiniować tło paska akcji w poniższy sposób:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- motyw zastosowany w aplikacji lub w aktywności -->
<style name="CustomActionBarTheme"
parent="@style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/MyActionBar</item>
</style>
<!-- styl paska akcji -->
<style name="MyActionBar"
parent="@style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">@drawable/actionbar_background</item>
</style>
</resources>Następnie zastosuj swój motyw do całej aplikacji lub wybranych aktywności:
<application android:theme="@style/CustomActionBarTheme" ... />Android w wersji 2.1 lub nowszej
W przypadku gdy obsługujesz pasek akcji za pomocą biblioteki pomocniczej, kod powyższego motywu musi wyglądać następująco:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- motyw zastosowany w aplikacji lub aktywności -->
<style name="CustomActionBarTheme"
parent="@style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<!-- zgodność z biblioteką pomocniczą-->
<item name="actionBarStyle">@style/MyActionBar</item>
</style>
<!-- styl paska akcji -->
<style name="MyActionBar"
parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">@drawable/actionbar_background</item>
<!-- zgodność z biblioteką pomocniczą -->
<item name="background">@drawable/actionbar_background</item>
</style>
</resources>Następnie zastosuj swój motyw do całej aplikacji lub wybranych aktywności:
<application android:theme="@style/CustomActionBarTheme" ... />Ustawianie koloru tekstu
Modyfikacja koloru tekstu poszczególnych elementów paska akcji wymaga przedefiniowania osobnych własności dla każdego z nich:
- Tytuł paska akcji: utwórz własny styl, w którym zostanie nadana wartość własności
textColori przypisz go własnoścititleTextStylew zdefiniowanym przez ciebie atrybucieactionBarStyle. - Tytuł zakładek paska akcji: przedefiniuj atrybut
actionBarTabTextStylew motywie aktywności. - Przyciski akcji: przedefiniuj atrybut
actionMenuTextColorw motywie aktywności.
Aplikacje obsługujące system Android 3.0 i nowsze
Jeśli twoja aplikacja obsługuje Androida wyłącznie w wersjach począwszy od 3.0, twój plik XML stylu będzie wyglądać mniej więcej tak:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- motyw zastosowany w aplikacji lub aktywności -->
<style name="CustomActionBarTheme"
parent="@style/Theme.Holo">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="android:actionMenuTextColor">@color/actionbar_text</item>
</style>
<!-- styl paska akcji -->
<style name="MyActionBar"
parent="@style/Widget.Holo.ActionBar">
<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
</style>
<!-- wygląd tytułu paska akcji -->
<style name="MyActionBarTitleText"
parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_text</item>
</style>
<!-- styl tekstu zakładek paska akcji -->
<style name="MyActionBarTabText"
parent="@style/Widget.Holo.ActionBar.TabText">
<item name="android:textColor">@color/actionbar_text</item>
</style>
</resources>Android w wersji 2.1 lub nowszej
W przypadku gdy obsługujesz pasek akcji za pomocą biblioteki pomocniczej, twój plik XML stylu będzie wyglądać mniej więcej tak:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- motyw zastosowany w aplikacji lub aktywności -->
<style name="CustomActionBarTheme"
parent="@style/Theme.AppCompat">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="android:actionMenuTextColor">@color/actionbar_text</item>
<!-- zgodność z biblioteką pomocniczą -->
<item name="actionBarStyle">@style/MyActionBar</item>
<item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="actionMenuTextColor">@color/actionbar_text</item>
</style>
<!-- styl paska akcji -->
<style name="MyActionBar"
parent="@style/Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
<!-- zgodność z biblioteką pomocniczą -->
<item name="titleTextStyle">@style/MyActionBarTitleText</item>
</style>
<!-- wygląd tytułu paska akcji-->
<style name="MyActionBarTitleText"
parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_text</item>
<!-- własność textColor jest wstecznie zgodna z biblioteką pomocniczą -->
</style>
<!-- styl tekstu zakładek paska akcji -->
<style name="MyActionBarTabText"
parent="@style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">@color/actionbar_text</item>
<!-- własność textColor jest wstecznie zgodna z biblioteką pomocniczą -->
</style>
</resources>Wygląd oznaczenia aktywnej zakładki
Aby zmienić wygląd oznaczenia aktywnej zakładki nawigacyjnej, utwórz motyw, w którym przedefiniujesz własność actionBarTabStyle. Odwołuje się ona do innego stylu, w którym należy przedefiniować własność background tak, by określała obiekt drawable listy stanów.
Oto przykładowa treść obiektu listy stanów, który dla określa tła dla różnych stanów zakładek paska akcji:
res/drawable/actionbar_tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- STANY NIENACIŚNIĘTEGO PRZYCISKU -->
<!-- stany nieaktywne -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_unselected" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_selected" />
<!-- stany aktywne (np. po najechaniu na zakładkę kursorem lub za pomocą d-pada ) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_unselected_focused" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_selected_focused" />
<!-- STANY NACIŚNIĘTEGO PRZYCISKU -->
<!-- stany nieaktywne -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="true"
android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="true"
android:drawable="@drawable/tab_selected_pressed" />
<!-- stany aktywne (np. po zaznaczeniu przycisku za pomocą d-pada lub najechaniu na niego kursorem) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="true"
android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="true"
android:drawable="@drawable/tab_selected_pressed" />
</selector>Aplikacje obsługujące system Android tylko w wersji 3.0 i nowszych
Jeśli twoja aplikacja obsługuje wyłącznie Androida w wersjach począwszy od 3.0, twój plik XML stylu będzie wyglądać mniej więcej tak:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- motyw zastosowany w aplikacji lub aktywności -->
<style name="CustomActionBarTheme"
parent="@style/Theme.Holo">
<item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
</style>
<!-- styl zakładek paska akcji -->
<style name="MyActionBarTabs"
parent="@style/Widget.Holo.ActionBar.TabView">
<!-- oznaczenie aktywnej zakładki -->
<item name="android:background">@drawable/actionbar_tab_indicator</item>
</style>
</resources>Android w wersji 2.1 lub nowszej
Jeśli korzystasz z biblioteki pomocniczej, twój plik XML stylu będzie wyglądał mniej więcej tak:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- motyw zastosowany w aplikacji lub aktywności -->
<style name="CustomActionBarTheme"
parent="@style/Theme.AppCompat">
<item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
<!-- zgodność z biblioteką pomocniczą -->
<item name="actionBarTabStyle">@style/MyActionBarTabs</item>
</style>
<!-- styl zakładek paska akcji -->
<style name="MyActionBarTabs"
parent="@style/Widget.AppCompat.ActionBar.TabView">
<!-- oznaczenie aktywnej zakładki -->
<item name="android:background">@drawable/actionbar_tab_indicator</item>
<!-- zgodność z biblioteką pomocniczą -->
<item name="background">@drawable/actionbar_tab_indicator</item>
</style>
</resources>