1. HOME
  2. ブログ
  3. IT技術
  4. 【Android】SeekbarでスイッチなUIを作る
【Android】SeekbarでスイッチなUIを作る

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

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

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

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

※イメージ図

丸いUIパーツを作成

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

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

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

ラインのパーツを作成

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

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

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

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

ハンドル部分を作成

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

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

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

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

Seekbarに設定

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

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

これでイメージ通りのスイッチ風なSeekbarができたはずです!

サンプル

こちらのリポジトリにサンプルを置いておきますので参考にどうぞ

Seekbar サンプル画像

書いた人はこんな人

笹川(エンジニア)
新潟生まれ新潟育ち本業はモバイルアプリエンジニア。
日々、猫(犬)エンジニアとして活躍中!

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア