こんにちわ、pencoです。
今回は、Tabを画面下から出す方法についてです。
実際には ActionBar のTabを使うのではなく、似たようなUIを作成します。

「Actionbar tab 下」などで調べるとTabHost を使用した方法がでてくると思いますが、TabHost は3.x 以降では非推奨になっています。そのため、RadioButton を使用してTabっぽいものを作ってみたいと思います。

完成イメージはこんな感じです。

画像リソースの準備

まずはリソースの準備から。
必要なのは、タブの表示するアイコン画像です。
タブ選択時と非選択時の2種類を、タブの分だけ作成します。

後で9Patch にするので、高さだけ気にすれば横幅は多少余白がある程度で大丈夫です。
今回はActionBar の高さに揃えたいと思います。

ActionBar に使用するアイコンサイズは

• hdpi … 48px
• xhdpi … 64px
• xxhdpi … 96px

なので、使用する端末に合わせてサイズを変更して下さい。
アイコン画像の高さを、上記サイズにします。

こんな感じです。ちなみに背景は透明です。
　

次にこの画像を9Patch にします。
9Patch にする方法については、こちらのサイト様が分かりやすいと思います。

[android-sdk]NinePatchを使って簡単に吹き出しを作る

9Patch にした画像がこちらになります。
　

左右がバランスよく伸びてくれなかったり、色々試行錯誤した結果、コンテンツ領域の1px 外側の左右に1px ずつ拡大可能領域を設定すると、キレイに伸びてくれました。
あくまで、参考程度に。

selectorで切り替える

次に、作成した画像をselector を使って切り替えられるようにしたいと思います。

selector_tab_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 選択時 -->
    <item android:state_checked="true"
          android:drawable="@drawable/growing_active">
    </item>

    <!-- 非選択時 -->
    <item android:drawable="@drawable/growing_normal">
    </item>

</selector>

RadioButton を使うので、選択時は state_checked=”true” にしておいて下さい。

レイアウト設定

最後に、layout.xml の設定です。

<LinearLayout
    android:id="@+id/footerlayout2"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:layout_alignParentBottom="true"
    android:background="@color/actionbar_bg" >

    <RadioGroup
        android:id="@+id/radioGroup2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/radio_conclusion"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/selector_tab_conclusion"
            android:button="@null"
            android:checked="true" />

        <RadioButton
            android:id="@+id/radio_bar"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/selector_tab_bar"
            android:button="@null" />

        <RadioButton
            android:id="@+id/radio_chart"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/selector_tab_chart"
            android:button="@null" />
    </RadioGroup>
</LinearLayout>

RadioButton を3つ均等になるようにlayout_weight を設定し、background に先程作成したselector のxml を指定しています。また、RadioButton のチェックする画像部分を消すためにandroid:button=”@null” を設定しています。

あとはこれを好きな位置に配置すればOKなので、layout_alignParentBottom=”true” で画面下側に設定しました。

これにて完成。