【Android】SeekbarでスイッチなUIを作る
2022.01.20
SeekbarでスイッチなUIを作ってみた
（株）ライトコードでモバイルアプリケーション開発をしている笹川（ささがわ）です！
今日はSeekbarをカスタマイズしてスイッチっぽいUIを作ってみたいと思います
※イメージ図
丸いUIパーツを作成
目盛りとなる部分の丸いUIパーツを作成します
今回はshapeをで作成していきます
1 2 3 4 5 6 7 8 | <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:width="8dp" android:height="8dp" /> <solid android:color="@color/gray_BBB" /> </shape> |
これで灰色で直径が8dpの円ができました
ラインのパーツを作成
次にSeekbarにおけるラインをカスタムするためにUIパーツを作成します
こちらは特に指定しない場合だとハンドルを右に動かすたびに太くなっていくようになってしまうので、今回のようにスイッチ風にするためにカスタムします
@android:id/background と @android:id/progress をIDでそれぞれ指定をすることでハンドルを動かす前と後のラインの状態をカスタムできます
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background" android:height="2dp" android:gravity="center"> <shape android:shape="rectangle"> <solid android:color="@color/gray_BBB" /> </shape> </item> <item android:id="@android:id/progress" android:height="2dp" android:gravity="center"> <clip> <shape android:shape="rectangle"> <solid android:color="@color/gray_BBB" /> </shape> </clip> </item> </layer-list> |
これで背景が灰色で高さ2dpのラインが2本できました
ハンドル部分を作成
ハンドル部分ですがデフォルトでも問題はないのですが、ちょっとシャドウをいれて操作できる感を向上したいと思います
もちろん画像を当てても問題ないのですが、今回はlayer-listで作成します
作り方としては白→灰色と中心からグラデーションする円を作成し、その上に白い円を乗せるように作ります
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="oval" > <gradient android:angle="270" android:endColor="#3D000000" android:gradientRadius="24dp" android:startColor="@color/white" android:type="radial" /> <size android:width="24dp" android:height="24dp" /> </shape> </item> <item android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp"> <shape android:shape="oval"> <solid android:color="@color/white" /> </shape> </item> </layer-list> |
AndroidStuido上だとグラデーション部分がはっきりと灰色で微妙に思えるのですが、24dpのサイズで当て込んでみるとシャドウ付きの白円に見えるはずです
Seekbarに設定
それぞれ作ったパーツをSeekbarに設定します
ライン部分はandroid:progressDrawable、ハンドル部分はandroid:thumb、目盛り部分はandroid:tickMarkに設定します
1 2 3 4 5 6 7 8 | <SeekBar android:id="@+id/seek_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="2" android:progressDrawable="@drawable/bar_progress" android:thumb="@drawable/bar_thumb" android:tickMark="@drawable/bar_tick" /> |
これでイメージ通りのスイッチ風なSeekbarができたはずです！
サンプル
こちらのリポジトリにサンプルを置いておきますので参考にどうぞ
書いた人はこんな人
- 新潟生まれ新潟育ち本業はモバイルアプリエンジニア。
日々、猫(犬)エンジニアとして活躍中！
IT技術9月 20, 2023開発効率を少しだけ上げるGithubActionsの便利な使い方- IT技術4月 7, 2023【ISUCON部】ライトコードISUCON部 始動！
- IT技術4月 18, 2022【Android】Webでよくみる入力Boxを手作り
- IT技術1月 19, 2022【Android】SeekbarでスイッチなUIを作る
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
