Cannot Unhide/Hide ProgressBar Android

Question

I have an activity which consists of an ImageView, a Button and a ProgressBar.

The XML for the activity is following:

<?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/submitActivityConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SubmitActivity">

    <ImageView
        android:id="@+id/previewImageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/submitButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/submitButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Submit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:elevation="2dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

And the button has the following button click listener function:

val progressBar=findViewById<ProgressBar>(R.id.progressBar)
val submitActivityConstraintLayout=findViewById<ConstraintLayout>(R.id.submitActivityConstraintLayout)
progressBar.visibility=View.VISIBLE
submitActivityConstraintLayout.background = ColorDrawable(ContextCompat.getColor(this, R.color.shadow))
runBlocking{delay(5000L)}
progressBar.visibility=View.GONE
submitActivityConstraintLayout.background = ColorDrawable(ContextCompat.getColor(this, R.color.white))

What I want to achieve is to show the ProgressBar over the ImageView and change the background colour of ConstraintLayout as soon as the button is clicked and then again return back to the earlier state when the response is returned from the asynchronous task.

But for some reason I am not able to achieve both of them.

Answer 1

The problem is that you are tying up the main thread, so your changes don't have a chance to render before they are changed back. You can move the delay off the UI thread and allow the changes to render and display on the UI thread. When the delay thread is finish, it will make the UI changes on the main thread as required.

Something like this should work:

Log.d("Applog", "Before")
launch {
    delay(5000L)
    launch(Dispatchers.Main) {
        Log.d("Applog", "After")
        progressBar.visibility = View.GONE
        submitActivityConstraintLayout.background =
            ColorDrawable(ContextCompat.getColor(this@MainActivity, R.color.white))
    }
}
Log.d("Applog", "Continuing...")

You should see "Before" followed the "Continuing..." then a delay of five seconds during which time you will see your changes. After the delay, you will see your second set of changes and "After."