俺は色を変えたいだけなんや
とある数値から、とある数値まで指定するのにとても便利な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の色自体と、ツマミの画像をカスタマイズしたいため、 progressDrawable と thumb という属性に独自の 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 の色自体を変える作業になります。
つづいて、 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 が完成します！
ステキなSeekBarライフを〜。