• トップ
  • ブログ一覧
  • 【Android】SeekbarでスイッチなUIを作る
  • 【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" />

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

    サンプル

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

    Seekbar サンプル画像

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    笹川(エンジニア)
    笹川(エンジニア)
    Show more...

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background