2024/3/22

【Kotlin/Android】ProgressBarでローディングビューを実装する方法

この記事からわかること

Android Studio/KotlinのProgressBarの使い方
ローディングビューの実装方法
進捗バーの実装方法

index

[open]

ProgressBarでローディングビューを実装する方法
進捗バーを実装する

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Flamingo
Kotlin：1.8.20

公式リファレンス：ProgressBar

ProgressBarでローディングビューを実装する方法

Android/Kotlinでローディングビューを実装するにはProgressBarを使用します。これだけで上記のようなぐるぐると回るローディング機能を実装することができます。

<ProgressBar
  android:id="@+id/loading_icon"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

ローディングビューの大きさはstyleを指定することで変更することも可能です。

<ProgressBar
  android:id="@+id/loading_icon"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  style="?android:attr/progressBarStyleSmall" />
  

  <ProgressBar
  android:id="@+id/loading_icon"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  style="?android:attr/progressBarStyleLarge" />

進捗バーを実装する

styleにprogressBarStyleHorizontalを指定することで進捗バーを実装することも可能progressBarStyleHorizontalです。

<ProgressBar
  android:id="@+id/progressBar"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  style="?android:attr/progressBarStyleHorizontal" />

この進捗具合はsetProgressメソッドを使用して変化させます。

タイマーを使用して「0.1秒ごとに1％進捗バーを進める実装」をしてみました。

class MainActivity : AppCompatActivity() {

    private lateinit var progressBar: ProgressBar
    private var progress = 0

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

        progressBar = findViewById(R.id.progressBar)

        val timer = Timer()
        timer.scheduleAtFixedRate(object : TimerTask() {
            override fun run() {
                progress += 1
                runOnUiThread {
                    if (progress >= 100) {
                        progress = 0
                    }
                    progressBar.progress = progress
                }
            }
        }, 0, 100)
    }
}