ProgressBarの太さの変更方法を解説【Android】

Androidアプリ開発
記事内に広告が含まれています。

今回はProgressBarの太さを変更する方法について解説します。

ProgressBarはダウンロードの進捗状況を表すときやアプリの待機時に表示するアニメーションなどに便利です。

この記事ではソースコード付きで説明しているので是非参考にしてください。

実装

今回は

  • レイアウトから変更する
  • カスタムdrawableを作成して変更する

上の2つのProgressBarの太さを変更する方法を解説します。

レイアウトから変更する方法は横棒のProgressBarの太さを変更したいときに使います。より手軽にカスタマイズしたい場合におすすめです。

リング型のProgressBarの太さを変更したいときは、カスタムdrawableを作成して変更する方法を使います。新たにXMLを作成する必要があるので少し手間がかかりますが、色や形も一緒に変えられるので色々カスタマイズしたいときにおすすめです。

どちらの方法でもKotlinやJavaのコードを書く必要はありません。

ProgressBarの基本的な実装方法は以下の記事で解説しています。こちらも併せてお読みください。

それでは2種類の実装方法をそれぞれソースコードを交えて解説していきます。

レイアウトから変更する

ProgressBarのレイアウトに以下のコードを追加します。このコードがないと太さを変えられないので注意しましょう。

android:indeterminate="true"

太さはlayout_heightから変更します。

android:layout_height="100dp"

以下の画像はlayout_heightを25dp、50dp、100dpにしたときのProgressBarの見た目です。こちらも実装するときに参考にしてみてください。

カスタムdrawableを作成して変更する

drawableに新しくcustom_progressbarという名前のDrawableResourceFileを追加しましょう。

custom_progressbarには以下のコードを記述してください。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="ring"
            android:innerRadiusRatio="2.5"
            android:thicknessRatio="10.0"
            android:useLevel="false">
            <solid android:color="#9A9A9A"/>
        </shape>
    </item>
    <item>
        <shape
        android:shape="ring"
        android:innerRadiusRatio="2.5"
        android:thicknessRatio="10.0"
        android:useLevel="true">
        <solid android:color="#03A9F4"/>
    </shape>
    </item>
</layer-list>

innerRadiusRatiothicknessRatioの数値を変えることでProgressBarの太さを変更できます。

shapeから形を変えたりsolidの中で色を変えたりすることもできるので色々カスタマイズしてみてください。上のコードではリング型で青色のProgressBarになっています。

custom_progressbarができたらレイアウトに以下のコードを追加しましょう。

android:indeterminateDrawable="@drawable/custom_progressbar"

このコードを追加することでカスタムDrawableがProgressBarに適用されます。

まとめ

今回はAndroidでProgressBarの太さを変更する方法を2種類紹介しました。いかがだったでしょうか。

ProgressBarはカスタマイズできる要素が沢山あります。アプリのクオリティを上げることにも役立つと思うので是非この記事を参考にして実装してみてください。

参考:ProgressBar  |  Android Developers

コメント

タイトルとURLをコピーしました