ProgressBar in Kotlin XML: Determinate vs Indeterminate – Android UI Guide

Progress bars are essential UI elements in Android applications, providing visual feedback to users about the progress of a long-running operation. In Kotlin XML development, progress bars can be easily implemented using the ProgressBar view. This tutorial explores how to use progress bars in Kotlin XML, focusing on determinate and indeterminate progress bars, and includes various code samples to guide you through implementation.

What is a ProgressBar?

A ProgressBar is a visual indicator used to show the progression of a task, such as file downloads, data processing, or loading content. Progress bars help keep users informed and improve the user experience by reducing uncertainty during wait times.

Types of Progress Bars

• Determinate Progress Bar: Shows the actual progress of a task with a known duration. It displays a percentage or numerical value indicating how much of the task has been completed.
• Indeterminate Progress Bar: Shows a generic animation to indicate that a task is ongoing, but the progress cannot be accurately determined. It’s used when the duration of the task is unknown or not quantifiable.

How to Implement Progress Bars in Kotlin XML

Step 1: Add a ProgressBar to Your XML Layout

Add a ProgressBar to your layout XML file. You can choose between a determinate or indeterminate progress bar by setting the style attribute.

For a determinate progress bar:

<ProgressBar
    android:id="@+id/determinateProgressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="0"
    android:visibility="visible" />

For an indeterminate progress bar:

<ProgressBar
    android:id="@+id/indeterminateProgressBar"
    style="?android:attr/progressBarStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="visible" />

Step 2: Set Up Progress Bar Functionality in Your Kotlin Code

In your Kotlin activity or fragment, get a reference to the progress bar and update its properties.

For a determinate progress bar:

import android.os.Bundle
import android.os.Handler
import android.os.Looper
import android.widget.Button
import android.widget.ProgressBar
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private lateinit var determinateProgressBar: ProgressBar
    private lateinit var progressTextView: TextView
    private lateinit var startButton: Button
    private var progressStatus = 0
    private val handler = Handler(Looper.getMainLooper())

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

        determinateProgressBar = findViewById(R.id.determinateProgressBar)
        progressTextView = findViewById(R.id.progressTextView)
        startButton = findViewById(R.id.startButton)

        startButton.setOnClickListener {
            progressStatus = 0
            determinateProgressBar.progress = 0
            progressTextView.text = "0%"

            Thread {
                while (progressStatus < 100) {
                    progressStatus += 1
                    handler.post {
                        determinateProgressBar.progress = progressStatus
                        progressTextView.text = "$progressStatus%"
                    }
                    try {
                        Thread.sleep(100)
                    } catch (e: InterruptedException) {
                        e.printStackTrace()
                    }
                }
            }.start()
        }
    }
}

In the XML layout file (activity_main.xml), include:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/determinateProgressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="0" />

    <TextView
        android:id="@+id/progressTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="8dp"
        android:text="0%"
        android:textAppearance="?android:textAppearanceSmall" />

    <Button
        android:id="@+id/startButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Start Progress" />

</LinearLayout>

For an indeterminate progress bar:

import android.os.Bundle
import android.widget.ProgressBar
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private lateinit var indeterminateProgressBar: ProgressBar

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

        indeterminateProgressBar = findViewById(R.id.indeterminateProgressBar)
        // To start the indeterminate progress bar:
        indeterminateProgressBar.visibility = android.view.View.VISIBLE

        // To stop the indeterminate progress bar:
        // indeterminateProgressBar.visibility = android.view.View.GONE
    }
}

In the XML layout file (activity_main.xml), include:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <ProgressBar
        android:id="@+id/indeterminateProgressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible" />

</LinearLayout>

Step 3: Customizing the ProgressBar

You can customize the appearance of the progress bar using XML attributes:

• Color: Use android:progressTint (API 21+) to set the color.
• Background: Use android:progressBackgroundTint (API 21+) for the background color.
• Size: Adjust the layout_width and layout_height.

Example:

<ProgressBar
    android:id="@+id/customProgressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="50"
    android:progressTint="#FF4081"
    android:progressBackgroundTint="#D81B60" />

Advanced Usage

Using a Secondary Progress Bar

A secondary progress bar can indicate buffer progress (e.g., buffering a video). To add a secondary progress, use android:secondaryProgress and android:secondaryProgressTint:

<ProgressBar
    android:id="@+id/secondaryProgressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="30"
    android:secondaryProgress="60"
    android:progressTint="#FF4081"
    android:secondaryProgressTint="#3F51B5" />

Conclusion

Progress bars are essential UI components for providing feedback to users during long-running tasks. In Kotlin XML development, both determinate and indeterminate progress bars can be easily implemented and customized to enhance the user experience. By using the code samples and techniques discussed in this tutorial, you can effectively integrate progress bars into your Android applications, making them more user-friendly and informative.