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

Web表示などネット接続には時間がかかることもあります。ロード中とユーザーに知らせアプリが止まっていると勘違いされないようにしたい時には、ProgressBarを使うのが常套手段です。
　

Android Studio
2024.1.1

ProgressBar

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

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

尚、Kotlinのケースはこちら
　

progressbar 00 100x100 - [Android] ProgressBar で進捗状況を表示する

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

ネット接続でデータをダウンロードには時間がかかることもあります。ロード中であることをユーザーに知らせることでユーザビリティが上がります。Pr...

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

Widget.ProgressBar

例えば、４つの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:id="@+id/main"
    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:id="@+id/main"

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:id="@+id/main"
    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:id="@+id/main"

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>

　
これは themes.xml にて

<style name="Base.Theme.TestProgressBar" parent="Theme.Material3.DayNight.NoActionBar">

1	<style name="Base.Theme.TestProgressBar" parent="Theme.Material3.DayNight.NoActionBar">

として設定している場合です。

Theme.AppCompat.Light.DarkActionBar をThemeにするなど選べます
また「?android… 」としないと呼び出されません

style="?android:attr/progressBarStyle"

1	style="?android:attr/progressBarStyle"

VISIBLE と INVISIBLE

実際にはプログレスバーを使って処理中であることをユーザーに知らせて、処理が終われば消したいので、終わった時に非表示にするためにINVISIBLEを使います。
　
表示・非表示は、

// 表示
android.widget.ProgressBar.VISIBLE

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

// 表示

android.widget.ProgressBar.VISIBLE

// 非表示

android.widget.ProgressBar.INVISIBLE

　
MainActivity.java

//package com.example.testprogressbar;

import android.os.Bundle;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import android.widget.Button;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    private ProgressBar progressBar;
    private boolean flg = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        progressBar = findViewById(R.id.progressbar);

        Button button = findViewById(R.id.button);
        // lambda
        button.setOnClickListener( v -> {
            if (flg) {
                progressBar.setVisibility(android.widget.ProgressBar.VISIBLE);
                flg = false;
            }
            else {
                progressBar.setVisibility(android.widget.ProgressBar.INVISIBLE);
                flg = true;
            }
        });
    }
}

//package com.example.testprogressbar;

import android.os.Bundle;

import androidx.activity.EdgeToEdge;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.graphics.Insets;

import androidx.core.view.ViewCompat;

import androidx.core.view.WindowInsetsCompat;

import android.widget.Button;

import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

private ProgressBar progressBar;

private boolean flg = false;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

EdgeToEdge.enable(this);

setContentView(R.layout.activity_main);

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {

Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);

return insets;

});

progressBar = findViewById(R.id.progressbar);

Button button = findViewById(R.id.button);

// lambda

button.setOnClickListener( v -> {

if (flg) {

progressBar.setVisibility(android.widget.ProgressBar.VISIBLE);

flg = false;

}

else {

progressBar.setVisibility(android.widget.ProgressBar.INVISIBLE);

flg = true;

}

});

}

　
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:id="@+id/main"
    android:orientation="vertical"
    android:gravity="center"
    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" />

    <Button
        android:id="@+id/button"
        android:text="@string/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</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:id="@+id/main"

android:orientation="vertical"

android:gravity="center"

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" />

<Button

android:id="@+id/button"

android:text="@string/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

　
strings.xml

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

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

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

</resources>

ProgressBar.Horizontal

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

android:indeterminate="false"

1	android:indeterminate="false"

　
また進捗はメソッドの
setProgress()
を使います。
　
MainActivity.java

//package your.project.name;

import android.os.Bundle;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import android.widget.Button;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    private ProgressBar progressBar;
    private int val = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        progressBar = findViewById(R.id.progressbar);

        // 水平プログレスバーの最大値を設定します
        progressBar.setMax(100);


        Button button = findViewById(R.id.button);

        button.setOnClickListener( v -> {
            val += 10;

            // progress
            progressBar.setProgress(val);

            // セカンダリ値
            progressBar.setSecondaryProgress(70);
        });

    }
}

//package your.project.name;

import android.os.Bundle;

import androidx.activity.EdgeToEdge;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.graphics.Insets;

import androidx.core.view.ViewCompat;

import androidx.core.view.WindowInsetsCompat;

import android.widget.Button;

import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

private ProgressBar progressBar;

private int val = 0;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

EdgeToEdge.enable(this);

setContentView(R.layout.activity_main);

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {

Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);

return insets;

});

progressBar = findViewById(R.id.progressbar);

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

progressBar.setMax(100);

Button button = findViewById(R.id.button);

button.setOnClickListener( v -> {

val += 10;

// progress

progressBar.setProgress(val);

// セカンダリ値

progressBar.setSecondaryProgress(70);

});

}

　
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:id="@+id/main"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    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" />

    <Button
        android:id="@+id/button"
        android:text="@string/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</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:id="@+id/main"

android:orientation="vertical"

android:gravity="center_horizontal"

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" />

<Button

android:id="@+id/button"

android:text="@string/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

　
strings.xml

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

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

</resources>

ボタンをタップする毎にMaxまで10増加させられます。
　
　
Reference:
ProgressBar | Android Developers