【Android】SeekbarでスイッチなUIを作る

笹川（エンジニア）

2022.01.19

IT技術

Android Seekbar UI

SeekbarでスイッチなUIを作ってみた

（株）ライトコードでモバイルアプリケーション開発をしている笹川（ささがわ）です！

今日はSeekbarをカスタマイズしてスイッチっぽいUIを作ってみたいと思います

※イメージ図

丸いUIパーツを作成

目盛りとなる部分の丸いUIパーツを作成します

今回はshapeをで作成していきます

1<?xml version="1.0" encoding="utf-8"?>
2<shape xmlns:android="http://schemas.android.com/apk/res/android"
3    android:shape="oval">
4    <size
5        android:width="8dp"
6        android:height="8dp" />
7    <solid android:color="@color/gray_BBB" />
8</shape>

これで灰色で直径が8dpの円ができました

ラインのパーツを作成

次にSeekbarにおけるラインをカスタムするためにUIパーツを作成します

こちらは特に指定しない場合だとハンドルを右に動かすたびに太くなっていくようになってしまうので、今回のようにスイッチ風にするためにカスタムします

@android:id/background と @android:id/progress をIDでそれぞれ指定をすることでハンドルを動かす前と後のラインの状態をカスタムできます

1<?xml version="1.0" encoding="utf-8"?>
2<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3    <item
4        android:id="@android:id/background"
5        android:height="2dp"
6        android:gravity="center">
7        <shape android:shape="rectangle">
8            <solid android:color="@color/gray_BBB" />
9        </shape>
10    </item>
11    <item
12        android:id="@android:id/progress"
13        android:height="2dp"
14        android:gravity="center">
15        <clip>
16            <shape android:shape="rectangle">
17                <solid android:color="@color/gray_BBB" />
18            </shape>
19        </clip>
20    </item>
21</layer-list>

これで背景が灰色で高さ2dpのラインが2本できました

ハンドル部分を作成

ハンドル部分ですがデフォルトでも問題はないのですが、ちょっとシャドウをいれて操作できる感を向上したいと思います

もちろん画像を当てても問題ないのですが、今回はlayer-listで作成します

作り方としては白→灰色と中心からグラデーションする円を作成し、その上に白い円を乗せるように作ります

1<?xml version="1.0" encoding="utf-8"?>
2<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3
4    <item>
5
6        <shape android:shape="oval" >
7            <gradient
8                android:angle="270"
9                android:endColor="#3D000000"
10                android:gradientRadius="24dp"
11                android:startColor="@color/white"
12                android:type="radial" />
13
14            <size
15                android:width="24dp"
16                android:height="24dp" />
17        </shape>
18    </item>
19    <item
20        android:bottom="2dp"
21        android:left="2dp"
22        android:right="2dp"
23        android:top="2dp">
24
25        <shape android:shape="oval">
26            <solid android:color="@color/white" />
27
28        </shape>
29
30    </item>
31
32</layer-list>

AndroidStuido上だとグラデーション部分がはっきりと灰色で微妙に思えるのですが、24dpのサイズで当て込んでみるとシャドウ付きの白円に見えるはずです

Seekbarに設定

それぞれ作ったパーツをSeekbarに設定します

ライン部分はandroid:progressDrawable、ハンドル部分はandroid:thumb、目盛り部分はandroid:tickMarkに設定します

1        <SeekBar
2            android:id="@+id/seek_bar"
3            android:layout_width="match_parent"
4            android:layout_height="wrap_content"
5            android:max="2"
6            android:progressDrawable="@drawable/bar_progress"
7            android:thumb="@drawable/bar_thumb"
8            android:tickMark="@drawable/bar_tick" />