【初心者向け】ProgressBarの実装方法を解説【Android,Kotlin】

今回はAndroidでProgressbarを実装する方法を紹介します。

ProgressBarは進捗状況を表示したいときや待機中のアニメーションなどに使用できます。

簡単に実装出来てアプリのクオリティも上がるので是非実装してみてください。

完成イメージ
実装
まとめ

完成イメージ

今回は

リング型
横棒

以上の2種類のProgressBarを実装します。

どちらのProgressBarを実装するときもJavaやKotlinのコードを書く必要はありません。

レイアウトに追加するだけで簡単に表示できるので早速実装してみましょう。

実装

リング型のProgressBar

リング型のProgressbarの実装方法です。

activity_main_layout.xml

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginTop="32dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

以上のコードだけで自動でグルグル回り続けるリング型のProgressBarを実装することができます。

ProgressBarのサイズはlayout_widthやlayout_heightから変更してください。

横棒のProgressBar

activity_main_layout.xml

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="200dp"
        android:layout_height="24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:indeterminate="true"
        style="@android:style/Widget.ProgressBar.Horizontal"/>

リング型のProgressBarのコードにstyle=”@android:style/Widget.ProgressBar.Horizontal“を追加するだけで横棒のProgressBarにすることができます。

他にも以下のようなStyleがあり、サイズを変えたり色を反転させたりできます。

Widget.ProgressBar.Small
Widget.ProgressBar.Large
Widget.ProgressBar.Inverse
Widget.ProgressBar.Small.Inverse
Widget.ProgressBar.Large.Inverse

ProgressBarの色を変更する

色の変更は先ほど紹介したコード内に以下のコードを追加するだけです。

android:indeterminateTint="#E91E63" //色コードを変更して好きな色に

まとめ

今回はKotlinでProgressbarを実装する方法について紹介しました。いかがだったでしょうか。

ProgressBarは色や形の変更も簡単にできるので、是非この記事を参考にして実装してみてください。

参考：
ProgressBar | Android Developers

以下の記事ではProgressBarの太さを変更する方法を解説しています。この記事と同様にリング型と横棒それぞれの太さを変える方法を説明しているので、今回実装したProgressBarをカスタマイズしたい方はこちらの記事もぜひ併せて読んでみてください。