アクションバーをカスタマイズする

アクションバーをカスタマイズしよう

AndroidのアプリにはデフォルトでAction Bar（アクションバー）がついています。このアクションバーをカスタマイズすることでアプリのイメージや印象が大きく変わってきます。

今回の記事では、タイトルバーの背景色や文字色などを変更してみましょう。

アクションバーとは

以下は通常のAndroidのアクションバーです。このアクションバーの背景色と文字色は使用するテーマによって異なっています。

このアクションバーはどこで設定されているかというと、AndroidManifest.xmlで設定されています。

AndroidManifest.xmlの

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >

の部分のandroid:themeというところでアプリのテーマを設定します。その際に、アクションバーの背景色や文字色なども変わります。

styles.xmlファイルでアクションバーをカスタマイズする

この@style/AppThemeは別ファイルの res/values/styles.xml（またはres/values/themes.xml）にて設定します。

例えば、プロジェクトを作成したばかりのアプリでは、res/values/styles.xmlは以下のようになっています。

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>

</resources>
 

このstyle要素のparent属性を変更することで、アクションバーの背景色や文字スタイルを変更することができます。

例えばparent属性を以下のように変更します。

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light"">
<!-- Customize your theme here. -->
</style>

</resources>

すると、アクションバーが以下のようにほんのり暗いイメージに変更されます。

続いて、アクションバーをもっと細かくカスタマイズしていきましょう。

アクションバーを細かくカスタマイズする

<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- parent="Theme.AppCompat.Light.DarkActionBar" -->
<!-- Customize your theme here. -->
<item name="android:actionBarStyle">@style/actionBar</item>
</style>

AppThemeのstyle属性の子要素として、android:actionBarStyleという属性をもつitem要素を追加します。ここではactionBarというstyle要素を指定します。

<style name="actionBar" parent="Widget.AppCompat.ActionBar">
<!-- タイトルバーの背景色 -->
<item name="android:background">#00BFFF</item>
</style>

このように指定することで、以下の様なアクションバーが設定されます。
さらに、文字スタイルを変更する場合は次のようにします。

<style name="actionBar" parent="Widget.AppCompat.ActionBar">
<!-- タイトルバーの背景色 -->
<item name="android:background">#00BFFF</item>
<!-- タイトルバーの文字スタイル -->
<item name="android:titleTextStyle">@style/titleTextStyle</item>
</style>

<style name="titleTextStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<!-- タイトルバーの文字色 -->
<item name="android:textColor">#FFFFFF</item>
<!-- タイトルバーの文字スタイル -->
<item name="android:textStyle">italic</item>
</style>

上記のソースで以下のようなアクションバーとなります。
上記ソースの解説をしますと、Widget.AppCompat.ActionBarの子要素のitem要素にてtitleTextStyleを指定し、そのtitleTextStyleでtextColorとtextStyleを変更しています。textColorは白い文字、textStyleは斜字を指定しています。

このように、アクションバーをカスタマイズすることでアプリの印象が大きく変化しました。

以上で紹介いたしましたアクションバーのカスタマイズ方法はAndroid 3.0以降のものです。Android 3.0未満の場合はこちらを参考にしてください。