【Android】ActionBarのTabBarのTextの色を変更する


## 1. はじめに

QittaroでActionBarの下にタブバーを実装しました。

SupportLibraryの`ViewPager`を使ってスワイプで`Fragment`を切り替えて、現在表示されているページのタイトルやスワイプの場所が目視出来るようにしました。

同じような画面の並びなので`ViewPager`を採用しました。

標準で`ViewPager` + `TabBar`を実装するとタイトルの下にIndicatorが表示されるので、現在位置がわかりやすくなっています。

しかし、色の配分とかアプリの世界観的に現在位置のタイトルの色も変えたいなと思い、実装してみたので、そのメモになります。

実装の前に、個人で作ったり、ActionBarのstyleのことをよくわかってない人へオススメのGeneratorがあるので紹介したいと思います。

## 2. ActionBar Generatorの紹介
[![ScreenShot01](http://cdn-ak.f.st-hatena.com/images/fotolife/p/programmatore/20140806/20140806232521.png)](http://jgilfelt.github.io/android-actionbarstylegenerator/)

[Android Action Bar Style Generator](http://jgilfelt.github.io/android-actionbarstylegenerator/)

色を決めるだけで、それなりのActionBarを生成してくれるサイトです。

Qittaroはこれを使ってThemeを実装しました。

色々な色を決めて、**DOWNLOAD.ZIP**ボタンを押してzipファイルをダウンロード・解答して各ディレクトリに分かれているファイルを全てコピーします。

そして`AndroidManifext.xml`にて`<application></application>`か`<activity></activity>`に`android:theme`を設定すれば簡単に実装されます。

ぜひこの機会に一度試してみてください。

ではTabBarのTextの色の変更のところを実装していきたいと思います。

<span id="3"></span>
## 3. TabBarの色の変更

今回、全て`.xml`ファイルで実装出来ます。

ということでソースコードを読んでください。

まずは選択状態の色と非選択状態の色を作成します。

```xml:color.xml
<!-- res/values/color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 緑っぽい色 -->
    <color name="action_bar_tab_selected_color">#0ACE00</color>
    <!-- 白 -->
    <color name="action_bar_tab_un_selected_color">#000000</color>
</resources>
```

次にcolorResourceを作成します。

```xml:action_bar_tab_text.xml
<!-- res/color/action_bar_tab_text.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 現在選択されている -->
    <item android:color="@color/action_bar_tab_selected_color" android:state_selected="true" />
    <item android:color="@color/action_bar_tab_selected_color" android:state_focused="true" />
    <item android:color="@color/action_bar_tab_selected_color" android:state_active="true" />
    <item android:color="@color/action_bar_tab_selected_color" android:state_pressed="true" />
    <!-- 選択されていない -->
    <item android:color="@color/action_bar_tab_un_selected_color" android:state_selected="false" />
    <item android:color="@color/action_bar_tab_un_selected_color" android:state_active="false" />
    <item android:color="@color/action_bar_tab_un_selected_color" android:state_focused="false" />
    <item android:color="@color/action_bar_tab_un_selected_color" android:state_pressed="false" />
</selector>
```

`true`になっているところが選択状態の値で、`false`になっているところが非選択状態となっています。

これを`ActionBar.TabText`の**style**に当てはめます。

```xml:styles.xml
<!-- res/values/styles.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 省略 -->
    <style name="ActionBar.TabText.Sample" parent="@style/Widget.AppCompat.Light.ActionBar.TabText">
        <item name="android:textColor">@color/action_bar_tab_text</item>
    </style>
    <style name="ActionBar.Solid.Sample" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
        <item name="actionBarTabTextStyle">@style/ActionBar.TabText.Qittaro</item>
    </style>
    <!-- 省略 -->
</resources>
```

この`style`の中の`ActionBar.Solid.Sample`を`AndroidManifext.xml`の**Theme**に適用します。

そうするとこんな感じになります。

![ScreenShot02](http://cdn-ak.f.st-hatena.com/images/fotolife/p/programmatore/20140805/20140805235849.png)

これで実装完了です。

## 4. 終わりに

結構簡単でしたが、styel周りがまだイマイチ理解出来ていない自分には苦労した実装となりました。

ただ苦労して色々遠回りしたおかげで、なんとなくわかったと思っています。

これから独自で組んでみようかと思っています。

細かい実装をいくらかしているので、良かったら**Qittaro**を見てみてください。

[![GooglePlayStore](http://cdn-ak.f.st-hatena.com/images/fotolife/p/programmatore/20140804/20140804072124.png)](https://play.google.com/store/apps/details?id=xyz.ryochin.qittaro)

以上になります。