目的

AndroidアプリにてSeekBarのカスタマイズを実装するためのメモ


環境

  • Android Studio 3.5.2
  • kotlin 1.3.60

デフォルトのSeekBarを設置

見た目とかOSで用意されているものをただ置くだけ

デフォルトseekbar
<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フォルダに作り、それを読み込ませました。

custom_seekbar.xml
<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で読み込む
<SeekBar
    ...
    android:progressDrawable="@drawable/custom_seekbar"
    .../>

進捗バーのカスタマイズ

これも名称不明ですが、進捗（progress）バーの見た目のカスタマイズ。
上記のcustom_seekbar.xmlに追記。

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>

目盛りの追加その１

xmlのSeekBarタブに以下を追加＆修正するとOSデフォルトの目盛りを追加できる。

SeekBarタブに追記
<SeekBar
    ...
    android:max="5"
    style="@style/Widget.AppCompat.SeekBar.Discrete"
    ... />

ただ、よく見ると目盛りが小さいし、ちょっと気に入らない。
目盛りのはみ出しとかは、上記のandroid:id=”@android:id/background"を微修正すると治るかと。

目盛りの追加その2

目盛りについてOSのものではなく、カスタマイズしてみます。
custome_seekbar_tick.xmlというファイルをdrawableフォルダに作り、それをSeekBarから読み込みます。

custom_seekbar_tick.xml
<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で読み込む
<SeekBar
    ...
    android:tickMark="@drawable/custom_seekbar_tick"
    .../>

※android:id=”@android:id/progress"のsize値とかも微修正してます。

ツマミをカスタマイズ

これも名称（以下略。
ツマミ的なもののカスタマイズ。
custom_seekbar_thumb.xmlというファイルをdrawableフォルダに作り、それをSeekBarから読み込みます。

custom_seekbar_thumb.xml
<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で読み込む
<SeekBar
    ...
    android:thumb="@drawable/custom_seekbar_thumb"
    .../>

※android:id=”@android:id/progress"のsize値とかも微修正してます。

実はcustom_seekbar_thumb.xmlにて、android:shape="oval"とすると、見た目がちょっとおかしくなり。。
妥協してます。
画像を使うと、うまくいくかもしれません。

SeekBarをさわれなくする

プログラムファイル上で以下を設定する。

MainActivity.kt
var seekbar = findViewById<SeekBar>(R.id.seekbar)
seekbar.isEnabled = false

メモは以上です。