アクションバーのスタイル設定

http://developer.android.com/training/basics/actionbar/styling.html


アクションバーはあなたのユーザーにアクションを実行しアプリをナビゲートする為の馴染みがある予測可能な方法を提供しますが、

そのことははアクションバーが他のアプリ内でそうであるのと同じように厳密に見える必要があるということ意味しません。
もしあなたがアクションバーをあなたのプロダクトブランドにより良くフィットするようにスタイルを合わせたいのなら、あなたはAndroidの

スタイルとテーマリソースを使用して容易にそのように出来ます。

Androidは"dark(暗い)"又は"light(明るい)"のアクションバースタイルを含む、2、3の組み込みアクティビティテーマを含みます。
更にあなたはアクションバー用の外見の更なるカスタマイズをする為にこれらのテーマを拡張出来ます。


Note:もしあなたがアクションバーの為にサポートライブラリを使用している場合、あなたはTheme.AppCompatスタイルの

ファミリーを使用(又はオーバーライド)しなければなりません(API level 11以降で利用可能Theme.Holoファミリーではなく)。

その際に、あなたが宣言する各スタイルプロパティは二度宣言されなければなりません:
一度はプラットフォームのスタイルプロパティ(android:プロパティ)で使用し、一度はサポートライブラリ(appcompat.R.attr

プロパティ-これらのプロパティの為のコンテキストは事実上、あなたのアプリです)に含まれるスタイルプロパティで使用します。

詳細については以下の例を見て下さい。


(※)スタイルのファミリー=ある同一のスタイルと継承関係をもつスタイル群?

Androidテーマの使用



Androidはアクションバー用のカラーを規定するベースラインアクティビティテーマを含みます:

 

あなたはマニフェストファイル内で<application>要素または個別の<activity>要素に対してandroid:theme属性を使って、

これらを宣言することによって、これらのテーマをアプリ全体または個別のアクティビティへ適用することが出来ます。

例えば:

<application android:theme="@android:style/Theme.Holo.Light" ... />


更にあなたはTheme.Holo.Light.DarkActionBarテーマを宣言することによって、アクティビティの残りの部分が

明るいカラースキームを使用しながらも暗いアクションバーを使う事が出来ます。

サポートライブラリを使用している場合、あなたは代わりにTheme.AppCompatテーマを使用しなければなりません:

 

あなたはあなたのアクションバーの色と適切に対照するアクションバーアイコンを使用していることを確認してください。
あなたを支援する為にAction Bar Icon Packは Holo light及びHolo darkアクションバー両方で使用する為の

標準アクションアイコンを含みます。

背景のカスタマイズ



アクションバーの背景を変更するには、actionBarStyleプロパティをオーバーライドする、アクティビティ用のカスタムテーマを

作成します。このプロパティはアクションバーの背景用のdrawableリソースを指定する為のbackgroundプロパティを

オーバーライド出来る別のスタイルを指します。

もしあなたのアプリがナビゲーションタブまたはスプリットアクションバーを使用している場合、あなたは更に
backgroundStacked及びbackgroundSplitプロパティを使用してこれらのバーの背景をそれぞれ指定することが出来ます。

 


注意: あなたのカスタムテーマとスタイルがそれらのスタイルを継承する適切な親テーマを宣言することが重要です。
親スタイルがない場合、あなた自身がそれらを明示的に宣言しないならば、

あなたのアクションバーは多くのスタイルプロパティがない状態になるでしょう。

 

Android 3.0以降用


Android 3.0以降のみをサポートしている時、あなたはアクションバーの背景を以下のように定義出来ます:
res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- アプリケーションまたはアクティビティへ適用されるテーマ -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>

    <!-- アクションバーのスタイル -->
    <style name="MyActionBar"
           parent="@style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/actionbar_background</item>
    </style>
</resources>


それからあなたのテーマをアプリ全体または個別のアクティビティへ適用します:

<application android:theme="@style/CustomActionBarTheme" ... />


Android 2.1以降用


サポートライブラリを使用している時、上記のテーマは代わりにこのようにならなければなりません:
(※)おそらくこのままだとeclipseではエラーが発生します。詳しくはこちらのエントリを参照のこと。

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/actionbar_background</item>

        <!-- Support library compatibility -->
        <item name="background">@drawable/actionbar_background</item>
    </style>
</resources>


それからあなたのテーマをアプリ全体または個別のアクティビティへ適用します:

<application android:theme="@style/CustomActionBarTheme" ... />


テキストカラーのカスタマイズ


 

アクションバー内のテキストカラーを変更するには、各テキスト要素用の個別のプロパティをオーバーライドする必要があります:

  • Action bar title: textColorプロパティを指定するカスタムスタイルを作成し、あなたのカスタムactionBarStyle内の
    titleTextStyleプロパティにそのスタイルを指定します。

    Note:
    titleTextStyleに適用されたカスタムスタイルは親スタイルにTextAppearance.Holo.Widget.ActionBar.Title
    使用すべきです。

  • Action bar tabs: あなたのアクティビティテーマ内でactionBarTabTextStyleをオーバーライドします。
  • Action buttons: あなたのアクティビティテーマ内でactionMenuTextColorをオーバーライドします。


Android 3.0以降用


Android 3.0以降のみをサポートしている時、あなたのスタイルXMLファイルは以下のようになるはずです:
res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <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>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.Holo.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    </style>

    <!-- ActionBar title text -->
    <style name="MyActionBarTitleText"
           parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>

    <!-- ActionBar tabs text styles -->
    <style name="MyActionBarTabText"
           parent="@style/Widget.Holo.ActionBar.TabText">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>
</resources>

 

Android 2.1以降用

 

サポートライブラリを使用している時、あなたのスタイルXMLファイルは以下のようになるはずです:
res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <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>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
        <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
        <item name="actionMenuTextColor">@color/actionbar_text</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>

        <!-- Support library compatibility -->
        <item name="titleTextStyle">@style/MyActionBarTitleText</item>
    </style>
    <!-- ActionBar title text -->
    <style name="MyActionBarTitleText"
           parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_text</item>
        <!-- The textColor property is backward compatible with the Support Library -->
    </style>

    <!-- ActionBar tabs text -->
    <style name="MyActionBarTabText"
           parent="@style/Widget.AppCompat.ActionBar.TabText">
        <item name="android:textColor">@color/actionbar_text</item>
        <!-- The textColor property is backward compatible with the Support Library -->
    </style>
</resources>

 

タブインディケイターのカスタマイズ



ナビゲーションタブで使用されるインディケイターを変更するには、actionBarTabStyleプロパティをオーバーライドする
アクティビティテーマを作成します。このプロパティは、state-list drawableを指定すべきbackgroundプロパティを
オーバーライドする別のスタイルリソースを指します。


Note:state-list drawableは現在選択されているタブは他のタブと異なる背景色でその状態を指し示しているので
重要です。 複数のボタンの状態を処理するdrawableリソースを作成する方法についてのより詳しい情報は、
State Listドキュメントを読んで下さい。

 

例えば、アクションバータブの幾つかの異なる状態用の特別な背景イメージを宣言するstate-list drawableは以下の通りです:
res/drawable/actionbar_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- STATES WHEN BUTTON IS NOT PRESSED -->

    <!-- Non focused states -->
    <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" />

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <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" />


<!-- STATES WHEN BUTTON IS PRESSED -->

    <!-- Non focused states -->
    <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" />

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <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>

 

Android 3.0以降用

 
Android 3.0以降のみをサポートしている時、あなたのスタイルXMLファイルは以下のようになるはずです:
res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.Holo">
        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>

    <!-- ActionBar tabs styles -->
    <style name="MyActionBarTabs"
           parent="@style/Widget.Holo.ActionBar.TabView">
        <!-- tab indicator -->
        <item name="android:background">@drawable/actionbar_tab_indicator</item>
    </style>
</resources>

 

Android 2.1以降用

 
サポートライブラリを使用している時、あなたのスタイルXMLファイルは以下のようになるはずです:
res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.AppCompat">
        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>

        <!-- Support library compatibility -->
        <item name="actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>

    <!-- ActionBar tabs styles -->
    <style name="MyActionBarTabs"
           parent="@style/Widget.AppCompat.ActionBar.TabView">
        <!-- tab indicator -->
        <item name="android:background">@drawable/actionbar_tab_indicator</item>

        <!-- Support library compatibility -->
        <item name="background">@drawable/actionbar_tab_indicator</item>
    </style>
</resources>

 

その他のリソース

  • Action Barガイドに一覧が記載されているアクションバー用のより多くのスタイルプロパティを見て下さい。
  • Styles and Themesガイド内でどのようにテーマが機能するかについて学んで下さい。
  • アクションバー用のもっと完全なスタイル設定の為にはAndroid Action Bar Style Generatorを試して下さい。
last modified: Thu Nov 14 19:25:30 JST 2013