Formatowanie wyglądu paska

20 grudnia 2013

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ści titleTextStyle w zdefiniowanym przez ciebie atrybucie actionBarStyle.
• 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>