SeekBar をカスタマイズする

  • 26
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

俺は色を変えたいだけなんや

とある数値から、とある数値まで指定するのにとても便利なSeekBar。

でも、デフォルトのデザインでは使いたくないのはよくあることですね。

そこで、SeekBarの色を変えようと思ったけども、必要以上にハマったのでメモしときます。

xmlこそ全て

コードで色を変えてやろう。

androidの開発を初めて、そう思うことは少なくなってきました。

今回もそう。コードで色は変えません。xml にて詳細にスタイルを定義します。

青いデフォルトのSeekBarを緑色に変えます。

こういうヤツ

まずは、SeekBarの定義から。

activity_main.xml
<SeekBar
    android:id="@+id/energy_seek_bar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:progressDrawable="@drawable/green_scrubber_progress"
    android:thumb="@drawable/green_scrubber_control"
    android:max="100"
    android:progress="100" />

SeekBarの色自体と、ツマミの画像をカスタマイズしたいため、 progressDrawablethumb という属性に独自の drawable を指定します。

次に、SeekBar の色自体の drawable/green_scrubber_progress を見ていきます。

green_scrubber_progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background" android:drawable="@drawable/seekbar_scrubber_gray" />
    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="@drawable/seekbar_scrubber_secondary_green"
            android:scaleWidth="100%" />
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/seekbar_scrubber_green"
            android:scaleWidth="100%" />
    </item>
</layer-list>

また、用意する画像は上から、バーの選択されてない領域の背景 seekbar_scrubber_gray 前回の値などを指し示す seekbar_scrubber_secondary_green、そして、現在の値を示す seekbar_scrubber_green の画像になります。

画像は、それぞれ 9patch で表現してみます。 どの部分を拡張するかを例に、一つだけ画像を載せます。

seekbar_scrubber_green.9.png

ここまでで、SeekBar の色自体を変える作業になります。

つづいて、 green_scrubber_control を見ていきます。

drawable/green_scrubber_control.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/seekbar_disable" android:state_enabled="false"/>
    <item android:drawable="@drawable/seekbar_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/seekbar_focused" android:state_selected="true"/>
    <item android:drawable="@drawable/seekbar_normal"/>
</selector>

ここでは、ツマミのそれぞれの状態(通常、無効、押した状態、フォーカス状態)についてそれぞれ画像をセットしてあげます。

ここまでくれば、こんな感じの SeekBar が完成します!

スクリーンショット 2015-04-21 22.16.05.png

ステキなSeekBarライフを〜。