Genta Hirauchi

公開日：2020/02/25
更新日：2020/08/03

【Kotlin基礎】ProgressBarで進捗状況を表示する方法を解説

  • Kotlinで進捗状況を表示する方法が知りたい。
  • ProgressBarをコードで動的に実装したい。

データをダウンロードする時などは、ダウンロードが無事行われているかがわかるように、進捗状況を表示したいですよね。Kotlinでは、ProgressBarというViewを使用することで、進捗状況を表示することができます。

本記事では、Kotlinで進捗状況を示す水平バーを表示する方法を、サンプルコードを交え、わかりやすく解説しております。

目次

ProgressBarで進捗状況を表示する方法

xmlでProgressBarを実装する

Kotlinで進捗状況を表示するには、ProgressBarというViewを使用します。

【公式ドキュメント】 ： ProgressBar | Android Developers

ProgressBarは、以下のように実装します。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <ProgressBar
       android:id="@+id/progress_bar"
       style="?android:attr/progressBarStyleHorizontal"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_margin="16dp" />

</LinearLayout>

ProgressBarを実装するには、<ProgressBar/>タグを使用します。

そして、style属性に、progressBarStyleHorizontalを指定します。この指定がないと、水平ではなく、ローディングのプログレスバーが表示されてしまいます。

Point
  • 水平のプログレスバーを実装するには、<ProgressBar/>タグを使用し、style属性にprogressBarStyleHorizontalを指定する

なお、progressBarStyleHorizontal以外のスタイルを指定した場合の実装に関しましては、以下の記事でまとめておりますので、そちらをご覧いただけると幸いです。

【Kotlin基礎】ProgressBarでローディング画面を実装する方法を解説

Kotlinでローディング画面を実装するにはどうすればいいの？と悩んでいる方、いらっしゃいませんか。Kotlinでは、ProgressBarというお手軽にローディング画面を実装することができるViewが存在します。本記事では、ProgressBarの基本的な実装方法を解説しております。

ProgressBarの基本的な使い方

ProgressBarの値を変更する

続いて、ProgressBarの値を変更する方法を紹介致します。ProgressBarの値は、progressで指定することができます。

【xmlで指定する場合】

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <ProgressBar
       android:id="@+id/progress_bar"
       style="?android:attr/progressBarStyleHorizontal"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_margin="16dp"
       android:progress="30" />

</LinearLayout>

【コードで指定する場合】

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val progressBar = findViewById<ProgressBar>(R.id.progress_bar)
   progressBar.progress = 30
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <ProgressBar
       android:id="@+id/progress_bar"
       style="?android:attr/progressBarStyleHorizontal"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_margin="16dp" />

</LinearLayout>

サンプルコードでは、progressに30を指定しております。
ProgressBarの最大値の初期値は100なので、100分の30あたりまでピンクの進捗が進んでいるのがわかります。

Point
  • ProgressBarの値は、progressで指定する

ProgressBarの最大値、最小値を変更する

続いて、ProgressBarの最大値、最小値を変更する方法を紹介致します。ProgressBarの最大値はmax、最小値はminで指定することができます。

【xmlで指定する場合】

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <ProgressBar
       android:id="@+id/progress_bar"
       style="?android:attr/progressBarStyleHorizontal"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_margin="16dp"
       android:max="50"
       android:min="-50" />

</LinearLayout>

【コードで指定する場合】

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val progressBar = findViewById<ProgressBar>(R.id.progress_bar)
   progressBar.max = 50
   progressBar.min = -50
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <ProgressBar
       android:id="@+id/progress_bar"
       style="?android:attr/progressBarStyleHorizontal"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_margin="16dp" />

</LinearLayout>

サンプルコードでは、maxに50、minに-50を指定しております。
ProgressBarの値の初期値は0なので、真ん中まで進捗が進んでいるのがわかります。

Point
  • ProgressBarの最大値は、maxで指定する
  • ProgressBarの最小値は、minで指定する

ProgressBarのセカンダリ値を変更する

ProgressBarでは、これまで紹介してきた進捗状況の値とは別に、もう1つ進捗状況の値を表示することができます。

2つ目の値は、secondaryProgressで指定することができます。

【xmlで指定する場合】

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <ProgressBar
       android:id="@+id/progress_bar"
       style="?android:attr/progressBarStyleHorizontal"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_margin="16dp"
       android:progress="40"
       android:secondaryProgress="70" />

</LinearLayout>

【コードで指定する場合】

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val progressBar = findViewById<ProgressBar>(R.id.progress_bar)
   progressBar.progress = 40
   progressBar.min = 70
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <ProgressBar
       android:id="@+id/progress_bar"
       style="?android:attr/progressBarStyleHorizontal"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_margin="16dp" />

</LinearLayout>

70の部分まで、薄いピンクで進捗が表示されております。これがsocondaryProgressで指定した部分です。濃いピンクがprogressで指定した部分です。

socondaryProgressを実装する際に注意しなければならないのは、secondaryProgressには、progressよりも大きい値を指定しなければならないということです。仮に、secondaryProgressにprogressよりも小さい値を指定した場合は、progressしか表示されません。

Point
  • ProgressBarのセカンダリ値は、secondaryProgressで指定する

まとめ

  • 水平のプログレスバーを実装するには、<ProgressBar/>タグを使用し、style属性にprogressBarStyleHorizontalを指定する
  • ProgressBarの値は、progressで指定する
  • ProgressBarの最大値は、maxで指定する
  • ProgressBarの最小値は、minで指定する
  • ProgressBarのセカンダリ値は、secondaryProgressで指定する

関連記事