3
0

More than 1 year has passed since last update.

角丸のプログレスバー 実装方法

Last updated at Posted at 2022-03-25

初めに

今回、記事にするのは進捗率を表す際に使用するプログレスバーの角丸実装方法です。
通常の実装ではただの長方形になりますが、少し手を加えることで角丸のプログレスバーが実装できます

実装方法

一般的にはプログレスバーを利用する場合、通信中であることを示すためのサークルのものがほとんどだと思います。
しかし、プログレスバーに下記の設定を追加することで最初に書いた様な長方形の進捗率を表すためのViewに変わります。

style="@style/Widget.AppCompat.ProgressBar.Horizontal"

スクリーンショット 2022-03-25 18.07.01.png

実際に使うとなると、角丸で実装することの方が多いかと思います。
そこで利用するのが今回のメインであるprogressDrawableです。
上記に対して独自に作ったDrawableファイルを設定してあげることにより、角丸のProgressBarを作ることができます。
一例ではありますが、進捗率を黒色で表す角丸のプログレスバーを実装したい場合は下記の様になります。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:tools="http://schemas.android.com/tools"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Define the background properties like color etc -->
    <item Android:id="@android:id/background">
        <shape>
            <solid android:color="@color/white"/>
            <corners android:radius="16dp"/>
        </shape>
    </item>

    <!-- Define the progress properties like start color, end color etc -->
    <item Android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <shape>
                <solid android:color="@color/black"/>
                <corners android:radius="16dp"/>
            </shape>
        </scale>
    </item>
</layer-list>

スクリーンショット 2022-03-25 18.12.51.png

最後に

以上が、角丸のプログレスバーの実装方法です。
地味に使う機会が多いので、備忘録として残しておきます。
どなたかの役に立てれば幸いです

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0