目的
AndroidアプリにてSeekBarのカスタマイズを実装するためのメモ
環境
- Android Studio 3.5.2
- kotlin 1.3.60
デフォルトのSeekBarを設置
見た目とかOSで用意されているものをただ置くだけ
<SeekBar
android:id="@+id/seekbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:progress="25"
android:max="100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
基本バーのカスタマイズ
名称が分からないのですが、基本(default)バーの見た目のカスタマイズです。
custom_seekbar.xml
という専用xmlファイルをdrawable
フォルダに作り、それを読み込ませました。
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:height="5dp"
android:top="7dp">
<shape
android:shape="rectangle">
<solid android:color="#797979" />
<corners android:radius="2.5dp" />
</shape>
</item>
</layer-list>
<SeekBar
...
android:progressDrawable="@drawable/custom_seekbar"
.../>

進捗バーのカスタマイズ
これも名称不明ですが、進捗(progress)バーの見た目のカスタマイズ。
上記のcustom_seekbar.xml
に追記。
....
<item
android:id="@android:id/progress"
android:height="10dp"
android:top="5dp">
<clip>
<shape
android:shape="rectangle">
<solid android:color="#0C34FF" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>

目盛りの追加その1
xmlのSeekBar
タブに以下を追加&修正するとOSデフォルトの目盛りを追加できる。
<SeekBar
...
android:max="5"
style="@style/Widget.AppCompat.SeekBar.Discrete"
... />

ただ、よく見ると目盛りが小さいし、ちょっと気に入らない。
目盛りのはみ出しとかは、上記のandroid:id="@android:id/background"を微修正すると治るかと。
目盛りの追加その2
目盛りについてOSのものではなく、カスタマイズしてみます。
custome_seekbar_tick.xml
というファイルをdrawable
フォルダに作り、それをSeekBarから読み込みます。
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:width="12dp"
android:height="12dp"/>
<solid android:color="#797979"/>
</shape>
<SeekBar
...
android:tickMark="@drawable/custom_seekbar_tick"
.../>

※android:id="@android:id/progress"のsize値とかも微修正してます。
ツマミをカスタマイズ
これも名称(以下略。
ツマミ的なもののカスタマイズ。
custom_seekbar_thumb.xml
というファイルをdrawable
フォルダに作り、それをSeekBarから読み込みます。
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:width="24dp"
android:height="24dp"/>
<solid android:color="#0C34FF"/>
</shape>
<SeekBar
...
android:thumb="@drawable/custom_seekbar_thumb"
.../>

※android:id="@android:id/progress"のsize値とかも微修正してます。
実はcustom_seekbar_thumb.xml
にて、android:shape="oval"
とすると、見た目がちょっとおかしくなり。。
妥協してます。
画像を使うと、うまくいくかもしれません。
SeekBarをさわれなくする
プログラムファイル上で以下を設定する。
var seekbar = findViewById<SeekBar>(R.id.seekbar)
seekbar.isEnabled = false
メモは以上です。