Android Horizontal Progressbar Tutorial With Example

Are you working on an Android app and want to display a Android Horizontal Progressbar to indicate ongoing tasks or loading processes?

In this article, we’ll walk you through adding a horizontal progress bar to your Android app. It’s a simple yet effective way to keep your users informed about what’s happening in the background.

Output:

Example of Android Horizontal ProgressBar

Now, we will create an android application. Then, we will use horizontal progressBar in this application.

Open Android Studio.
Go to File => New => New Project. Write application name. Then, click next button.
Select minimum SDK you need. However, we have selected 21 as minimum SDK. Then, click next button
Then, select Empty Activity => click next => click finish.
If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit post to create a new project to know steps in detail.

Let’s modify xml and java file to use horizontal progressBar.

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:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="16dp"

tools:context=".MainActivity">

<ProgressBar

android:id="@+id/mainProgressbar"

style="@style/Widget.AppCompat.ProgressBar.Horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:indeterminate="true"

android:indeterminateTint="@color/black"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<Button

android:id="@+id/btnStopProgress"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="24dp"

android:text="Hide Progressbar"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@id/mainProgressbar" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainAcivity.java:

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ProgressBar mainProgressbar = findViewById(R.id.mainProgressbar);

Button btnStopProgressbar = findViewById(R.id.btnStopProgress);

btnStopProgressbar.setOnClickListener(view -> {

int visibility = mainProgressbar.getVisibility() == View.GONE ? View.VISIBLE : View.GONE;

mainProgressbar.setVisibility(visibility);

String btnText = mainProgressbar.getVisibility() == View.GONE ? "Show Progressbar" : "Hide Progressbar";

btnStopProgressbar.setText(btnText);

});

}

The code snippet provided is a fundamental example of how to implement a horizontal progress bar in your Android app’s layout. Let’s break it down step by step:

XML Structure: The code begins by defining the layout of your Android app using XML. It specifies that you’re creating a LinearLayout, which is a common layout element in Android development.
ProgressBar Element: Inside the LinearLayout, there’s a ProgressBar element. This is where the magic happens. It defines the visual representation of your progress bar.
Style: The style attribute sets the appearance of the progress bar to be horizontal. This means the progress will move from left to right, providing a clear visual indication of how much work has been completed.
Layout Parameters: The android:layout_width and android:layout_height attributes determine how the progress bar will be sized within the layout. In this example, it’s set to match the parent, making it fill the available space horizontally.
Indeterminate Mode: The android:indeterminate attribute is set to true. This makes the progress bar run in an indeterminate mode, where it moves continuously to show that a task is ongoing, but without indicating a specific completion percentage.
Indeterminate Tint: The android:indeterminateTint attribute specifies the color of the indeterminate progress bar.

By implementing this code, you can add a Android Horizontal ProgressBar to your Android app, making it more user-friendly and transparent about background processes. Users will appreciate having a visual cue to know that something is happening, which can improve their overall experience with your app. So, don’t hesitate to try it out in your app development projects!