[Android & Kotlin] ProgressBar で進捗状況を表示する

ネット接続でデータをダウンロードには時間がかかることもあります。ロード中であることをユーザーに知らせることでユーザビリティが上がります。ProgressBar使うとダウンロードが何パーセントと簡単に表示できます。
　

Android Studio
2021.1.1

ProgressBar

　
ProgressBarはいくつかのstyleがあり、またコードを書かなくてもレイアウトで設定するだけで動きます。

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

これらのstyleがあります。
　

目次
1. Widget.ProgressBar
2. Themeからのstyle
3. VISIBLE と INVISIBLE
4. ProgressBar.Horizontal

Widget.ProgressBar

　
例えば、４つのstyleで試してみます。
LinearLayoutでやってみました。
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ProgressBar
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="30dp"
        style="@android:style/Widget.ProgressBar.Small" />

    <ProgressBar android:id="@+id/progressbar"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="30dp"
        style="@android:style/Widget.ProgressBar" />

    <ProgressBar
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="30dp"
        style="@android:style/Widget.ProgressBar.Large" />

    <ProgressBar
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="30dp"
        android:indeterminate="true"
        style="@android:style/Widget.ProgressBar.Horizontal" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<ProgressBar

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_margin="30dp"

style="@android:style/Widget.ProgressBar.Small" />

<ProgressBar android:id="@+id/progressbar"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_margin="30dp"

style="@android:style/Widget.ProgressBar" />

<ProgressBar

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_margin="30dp"

style="@android:style/Widget.ProgressBar.Large" />

<ProgressBar

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_margin="30dp"

android:indeterminate="true"

style="@android:style/Widget.ProgressBar.Horizontal" />

</LinearLayout>

Themeからのstyle

　
また、古い情報ではThemeのstyleを使うこともできるようです。
　
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ProgressBar
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="30dp"
        style="?android:attr/progressBarStyleSmall" />

    <ProgressBar
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="30dp"
        style="?android:attr/progressBarStyle" />

    <ProgressBar
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="30dp"
        style="?android:attr/progressBarStyleLarge" />

    <ProgressBar
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="30dp"
        android:indeterminate="true"
        style="?android:attr/progressBarStyleHorizontal" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<ProgressBar

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_margin="30dp"

style="?android:attr/progressBarStyleSmall" />

<ProgressBar

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_margin="30dp"

style="?android:attr/progressBarStyle" />

<ProgressBar

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_margin="30dp"

style="?android:attr/progressBarStyleLarge" />

<ProgressBar

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_margin="30dp"

android:indeterminate="true"

style="?android:attr/progressBarStyleHorizontal" />

</LinearLayout>

　
これは Theme.AppCompat.Light.DarkActionBar をThemeとして設定している場合です。なのでThemeをカスタマイズすると変更できるところもあります。
また「?android… 」としないと呼び出されません

style="?android:attr/progressBarStyle"

1	style="?android:attr/progressBarStyle"

またBarの色設定は ..\res\values\themes\themes.xml にあるcolorの設定でできます。

VISIBLE と INVISIBLE

　
例えば、ロードが始まったらProgressBarを表示させておき、終わりがわからない場合は進捗が表示できないのでそのままくるくる回転させておき、終わった時に非表示にすればいいのではないでしょうか。
　
表示・非表示はこれらを使います。

// 表示
android.widget.ProgressBar.VISIBLE

// 非表示
android.widget.ProgressBar.INVISIBLE

// 表示

android.widget.ProgressBar.VISIBLE

// 非表示

android.widget.ProgressBar.INVISIBLE

　
まとめると
MainActivity.kt

//package com.example.testprogressbar

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
// ViewBindg
import com.example.testprogressbar.databinding.ActivityMainBinding


class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        var flg = false

        binding.button.setOnClickListener {
            if (flg) {
                binding.progressbar.visibility = android.widget.ProgressBar.VISIBLE

                flg = false
            } else {
                binding.progressbar.visibility = android.widget.ProgressBar.INVISIBLE

                flg = true
            }
        }
    }
}

//package com.example.testprogressbar

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

// ViewBindg

import com.example.testprogressbar.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityMainBinding.inflate(layoutInflater)

setContentView(binding.root)

var flg = false

binding.button.setOnClickListener {

if (flg) {

binding.progressbar.visibility = android.widget.ProgressBar.VISIBLE

flg = false

} else {

binding.progressbar.visibility = android.widget.ProgressBar.INVISIBLE

flg = true

}

　
ConstraintLayoutに変更してみました。
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ProgressBar android:id="@+id/progressbar"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="30dp"
        style="@android:style/Widget.ProgressBar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.05" />

    <Button
        android:id="@+id/button"
        android:text="@string/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.2" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<ProgressBar android:id="@+id/progressbar"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_margin="30dp"

style="@android:style/Widget.ProgressBar"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.05" />

<Button

android:id="@+id/button"

android:text="@string/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.2" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
strings.xml

<resources>
    <string name="button">YourAppName</string>
    <string name="button">Button</string>
</resources>

<string name="button">YourAppName</string>

<string name="button">Button</string>

</resources>

　
build.gradle

...
android {
    ...
    buildFeatures {
        viewBinding true
    }
}
...

...

android {

...

buildFeatures {

viewBinding true

}

...

　
これでProgressbarをボタンをタップして非表示・表示ができました。
　

ProgressBar.Horizontal

　
一方で、進捗がわかるようにしたい場合もあります。ProgressBar.Horizontalを使うとそのprogressをユーザーに提示できます。
　
レイアウトでindeterminateをfalseにする必要があります。
　

android:indeterminate="false"

1	android:indeterminate="false"

　
ボタンタップで10づつ増加して100まで Horizontal ProgressBar で表示するコードを書いてみます。
MainActivity.kt

//package com.example.testprogressbarhorizontal

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
// ViewBinding
import com.example.testprogressbarhorizontal.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)


        // 水平プログレスバーの最大値を設定します
        binding.progressbar.max = 100

        var value = 0

        binding.button.setOnClickListener {
            value += 10

            // progress
            binding.progressbar.progress = value

            // セカンダリ値
            binding.progressbar.secondaryProgress = 70
        }
    }
}

//package com.example.testprogressbarhorizontal

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

// ViewBinding

import com.example.testprogressbarhorizontal.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityMainBinding.inflate(layoutInflater)

setContentView(binding.root)

// 水平プログレスバーの最大値を設定します

binding.progressbar.max = 100

var value = 0

binding.button.setOnClickListener {

value += 10

// progress

binding.progressbar.progress = value

// セカンダリ値

binding.progressbar.secondaryProgress = 70

}

　
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ProgressBar android:id="@+id/progressbar"
        android:layout_height="20dp"
        android:layout_width="200dp"
        android:layout_margin="30dp"
        android:indeterminate="false"
        style="@android:style/Widget.ProgressBar.Horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.05" />

    <Button
        android:id="@+id/button"
        android:text="@string/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.2" />


</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<ProgressBar android:id="@+id/progressbar"

android:layout_height="20dp"

android:layout_width="200dp"

android:layout_margin="30dp"

android:indeterminate="false"

style="@android:style/Widget.ProgressBar.Horizontal"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.05" />

<Button

android:id="@+id/button"

android:text="@string/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.2" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
strings.xml

<resources>
    <string name="button">Your App Name</string>
    <string name="button">Button</string>
</resources>

<string name="button">Button</string>

</resources>

　
build.gradle

...
android {
    ...
    buildFeatures {
        viewBinding true
    }
}
...

...

android {

...

buildFeatures {

viewBinding true

}

...

　
これを使って例えばネットからのデータダウンロードの進捗を表示することなどができます。
　
　
Reference:
ProgressBar | Android Developers