Formatowanie wyglądu paska
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.AppCompat
w ciemnej kolorystyce.Theme.AppCompat.Light
w jasnej kolorystyce.Theme.AppCompat.Light.DarkActionBar
w 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
textColor
i przypisz go własnoścititleTextStyle
w zdefiniowanym przez ciebie atrybucieactionBarStyle
. - Tytuł zakładek paska akcji: przedefiniuj atrybut
actionBarTabTextStyle
w motywie aktywności. - Przyciski akcji: przedefiniuj atrybut
actionMenuTextColor
w 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>
Autor: Google
Źródło: https://developer.android.com/training/basics/actionbar/styling.html
Tłumaczenie: Joanna Liana
Treść tej strony jest dostępna na zasadach licencji CC BY 2.5