Android Action Bar をカスタマイズする

Android Developers Blog: Customizing the Action Bar

Action Bar のデザインパターンを紹介してから、多くのアプリケーションが Action Bar を使うようになりました。
そして、このデザインパターンは Android 3.0 でデフォルトの機能になりました。
Honeycomb をターゲットとしたアプリで Action Bar を使う方法は using Action Bar を参照してください。

Theme.Holo.* を継承した独自スタイルを定義して、ここで Action Bar をカスタマイズしていきます。

view plainprint?

1. <style name="Theme.MyTheme" parent="android:style/Theme.Holo.Light">  
2. …  
3. </style>  

<style name="Theme.MyTheme" parent="android:style/Theme.Holo.Light">
…
</style>

■ Icon

Android Asset Studio を使って Action Bar 用のアイコンを作ることができます。
また、ブランド化するためにスタートポイントに次のようなロゴを使ったりします。



ロゴ (android:logo) を Action Bar に使うには
setDisplayUseLogoEnabled (boolean useLogo)
を使います。


■ Navigation

Action Bar のナビゲーションセクションには3つの異なる mode があります。
・NAVIGATION_MODE_STANDARD
・NAVIGATION_MODE_LIST
・NAVIGATION_MODE_TABS

ナビゲーションのモードを設定するには
setNavigationMode(int)
を使います。

• Standard
  
  Action Bar のスタンダートナビゲーションモードは単純に Activity のタイトルを表示します。
  
  
• List
  
  左側が標準のリストドロップダウン、右側が実現したいエフェクト
  
  
  
  デフォルトのナビゲーションモードは青色のカラースキームでスタイルされています。
  これは、トップバーと拡張リストの選択ハイライトの両方で、タッチされたことを表すために青色になります。
  
  android:actionDropDownStyle
  
  をオーバーライドすることでこのエレメントのテーマをすきなカラースキームにカスタマイズすることができます。
  
  
  view plainprint?

  1. <!-- style the list navigation -->  
  2. <style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">  
  3.     <item name="android:background">drawable/ad_spinner_background_holo_light</item>  
  4.     <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>  
  5.     <item name="android:dropDownSelector">@drawable/ad_selectable_background</item>  
  6. </style>  

  
  <!-- style the list navigation -->
  <style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">
      <item name="android:background">drawable/ad_spinner_background_holo_light</item>
      <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>
      <item name="android:dropDownSelector">@drawable/ad_selectable_background</item>
  </style>
  

  
  
  spinner の背景、拡張する list の背景, ハイライトカラー用に指定している drawable には state list drawables と 9 patch images を使っています。
  
  
• Tabs
  
  上：カスタマイズ前、下：カスタマイズ後
  
  
  タブナビゲーションコントロールには標準の青色が使われています。
  android:actionBarTabStyle にカスタムスタイルを指定することで、好きな drawable を設定できます。
  
  
  view plainprint?

  1. <!-- style for the tabs -->  
  2. <style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBarView_TabView">  
  3.     <item name="android:background">@drawable/actionbar_tab_bg</item>  
  4.     <item name="android:paddingLeft">32dp</item>  
  5.     <item name="android:paddingRight">32dp</item>  
  6. </style>  

  
  <!-- style for the tabs -->
  <style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBarView_TabView">
      <item name="android:background">@drawable/actionbar_tab_bg</item>
      <item name="android:paddingLeft">32dp</item>
      <item name="android:paddingRight">32dp</item>
  </style>
  

  
  

■ Actions

・Selectable item background

上：カスタマイズ前、下：カスタマイズ後


個々の Action item は選択できるコンポーネントの背景として、デフォルトの青色を継承しています。
android:selectableItemBackground を好きな色を使った shape drawable で上書きすることで、この色や振る舞いをカスタマイズできます。

view plainprint?

1. <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>  

<item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>

・ Overflow menu

overflow メニューが開かれたことを示すために、リストのトップに青いバーを表示するようになっています。
android:popupMenuStyle にカスタマイズした drawable を指定することで overflow menu のトップを変えることができます。

view plainprint?

1. <!-- style the overflow menu -->  
2. <style name="MyPopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow">  
3.     <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>  
4. </style>  

<!-- style the overflow menu -->
<style name="MyPopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow">
    <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>
</style>

overflow menu 内のアイテムを選択したときもデフォルトの選択カラーが使われます。android:dropDownListViewStyle にカスタマイズした選択色を設定することで、この色を変えることができます。

view plainprint?

1. <!-- style the items within the overflow menu -->  
2. <style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">  
3.     <item name="android:listSelector">@drawable/ad_selectable_background</item>  
4. </style>  

<!-- style the items within the overflow menu -->
<style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
    <item name="android:listSelector">@drawable/ad_selectable_background</item>
</style>

この変更でほとんどの部分を切り替えることができますが、より詳細な部分に注意する必要があります。overflow 内の チェックボックスとラジオボタンが付いた menu item を選択したときのハイライトには、いまだにデフォルトの青色がつかわれています。次のように設定して、自分のテーマに合うようにします。

view plainprint?

1. <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>  
2. <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>  

<item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>

左；カスタマイズ前、右：カスタマイズ後



■ Background

アクションバーの背景を変更するには、単に android:actionBarStyle の item で android:background を上書きします。

view plainprint?

1. <style name="MyActionBar" parent="android:style/Widget.Holo.Light.ActionBar">  
2.     <item name="android:background">@drawable/action_bar_background</item>  
3. </style>  

<style name="MyActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@drawable/action_bar_background</item>
</style>

■ Bringing it all together

これまでに定義したコンポーネントを合わせて自分のカスタムスタイルをつくります。

view plainprint?

1. <style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">  
2.     <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>  
3.     <item name="android:popupMenuStyle">@style/MyPopupMenu</item>  
4.     <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>  
5.     <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>  
6.     <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>  
7.     <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>  
8.     <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>  
9. </style>  

<style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
    <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
    <item name="android:popupMenuStyle">@style/MyPopupMenu</item>
    <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
    <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
    <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
    <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
    <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
</style>

個々の Activity、もしくはアプリケーション全体にこのスタイルを適用します。

view plainprint?

1. <activity android:name=".MainActivity"   
2.           android:label="@string/app_name"  
3.           android:theme="@style/Theme.AndroidDevelopers"  
4.           android:logo="@drawable/ad_logo">  

<activity android:name=".MainActivity" 
          android:label="@string/app_name"
          android:theme="@style/Theme.AndroidDevelopers"
          android:logo="@drawable/ad_logo">

上記で上書き指定したシステムスタイルのいくつかは Action Bar 以外にも影響します。例えば、android:selectableItemBackground を上書きすると、選択状態をサポートする多くのウィジェットに影響します。これはアプリケーション全体にスタイルを適用したい場合に便利ですが、カスタマイズが全体の一貫性に適っているかテストして確かめてください。


■ Familiar but styled

Action Bar をカスタマイズすることはアプリケーションのブランディングを標準のコントロールコンポーネントに拡張するすばらしい方法です。この方法を使うことは大きな責任が伴います。ユーザーインタフェースをカスタマイズ場合、アプリケーションが読みやすく使いやすい状態を保てるように細心の注意を払う必要があります。
特に、関連する全ての状態に対してテキストと画像のコントラストが不十分になっているハイライトカラーがないか注意してください。