SeekBar をカスタマイズする

More than 3 years have passed since last update.


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

とある数値から、とある数値まで指定するのにとても便利な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ライフを〜。