Android Kotlin: How to change horizontal progress bar color

This code demonstrates how to create a progress bar with a button to initiate a simulated task and update the progress visually. It also showcases two ways to change the color of a progress bar programmatically in Kotlin.

Explanation:

Layout and Widgets:
- The activity_main.xml file defines the user interface layout using ConstraintLayout. It includes a TextView, three ProgressBars, and a Button.
MainActivity.kt:
- This class handles the activity's logic.
- It retrieves references to the UI widgets from the layout (TextView, ProgressBars, and Button).
Progress Bar Color:
- Two approaches are used to set the progress bar color:
  - Programmatically: progressBar3.progressTintList and progressBar3.progressBackgroundTintList are assigned ColorStateList objects created with specific colors (red and blue in this case).
  - Declaratively (XML): progressBar2 sets the color attributes directly in the XML layout using android:progressTint and android:progressBackgroundTint.
Button Click Listener:
- Clicking the button triggers a background thread that simulates a task by incrementing a progress variable.
- The Handler.post method updates the progress bars and TextView on the main UI thread to reflect the progress.
Progress Update:
- The background thread updates the progressStatus variable and sleeps for 100 milliseconds to simulate work.
- The Handler.post ensures the UI updates happen on the main thread, preventing UI thread blocking.

Summary

This example provides a solid foundation for working with progress bars in Android using Kotlin. It demonstrates setting progress bar colors programmatically and declaratively, as well as simulating a task and updating the progress bar accordingly. You can adapt this code to create progress bars with different colors and functionalities in your own Android applications.

MainActivity.kt


package com.cfsuman.kotlintutorials

import android.app.Activity
import android.content.res.ColorStateList
import android.graphics.Color
import android.os.Bundle
import android.os.Handler
import android.os.Looper
import android.widget.Button
import android.widget.ProgressBar
import android.widget.TextView


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


        // Get the widgets reference from XML layout
        val button = findViewById<Button>(R.id.button)
        val textView = findViewById<TextView>(R.id.textView)
        val progressBar = findViewById<ProgressBar>(R.id.progressBar)
        val progressBar2 = findViewById<ProgressBar>(R.id.progressBar2)
        val progressBar3 = findViewById<ProgressBar>(R.id.progressBar3)


        // Variable to hold progress status
        var progressStatus = 0;

        // Initialize a new Handler instance
        val handler = Handler(Looper.getMainLooper())


        // Set progressbar color (tint) programmatically
        progressBar3.progressTintList = ColorStateList
            .valueOf(Color.RED)
        progressBar3.progressBackgroundTintList = ColorStateList
            .valueOf(Color.BLUE)


        // Set a button click listener
        button.setOnClickListener {
            // Disable the button itself
            it.isEnabled = false

            Thread {
                while (progressStatus < 100) {
                    // Update progress status
                    progressStatus += 1

                    // Sleep the thread for 100 milliseconds
                    Thread.sleep(100)

                    // Update the progress bar
                    handler.post {
                        progressBar.progress = progressStatus
                        progressBar2.progress = progressStatus
                        progressBar3.progress = progressStatus
                        textView.text = "$progressStatus"
                    }
                }
            }.start()
        }
    }
}

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:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp"
    android:background="#DCDCDC">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="36dp"
        android:fontFamily="sans-serif"
        android:textSize="24sp"
        android:textStyle="bold"
        tools:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <ProgressBar
        android:id="@+id/progressBar2"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:progressTint="#177245"
        android:progressBackgroundTint="#8BC34A"
        android:layout_marginTop="12dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar" />

    <ProgressBar
        android:id="@+id/progressBar3"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar2" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Start Task"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar3" />

</androidx.constraintlayout.widget.ConstraintLayout>