Learn how to create Android Horizontal Progress Bar With Percentage Programmatically.
We will develop horizontal progress bar with percentage in this example tutorial.
There are many processes like downloading, uploading, fetching data from remote server etc. where you need to tell the user to wait for some time.
To accomplish this purpose, showing horizontal progress bar to the user is great option.
If you show the progress bar with percentage then the user will feel more comfortable while waiting.
View Output
This video demonstrate how our example’s output will look a like.
Determinate Horizontal Progress bar
Determinate progress bar means that you tell user that how much process is completed in terms of percentage.
When you know the exact or approximate time amount which will be taken by the process, you should use determinate progress bar.
You should use determinate progress bar when you do not have any idea about timing of the process.
Other Progress Bar Example
- Indeterminate Horizontal Progress Bar Android Example
- Circular Progress Bar With Percentage Android Example
- Indeterminate Circular Progress Bar Android Example
We will create three horizontal progress bar with different designs in this tutorial.
Step 1. Drawable XML files
We need to create drawable xml files to develop various styles for progress bars.
Create a new xml file under res->drawable directory. Name it as progress_limit.xml
Add below source code in it
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:startColor="#ff9d9e9d" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:startColor="#80ffd300" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:endColor="#008000"
android:startColor="#33FF33" />
</shape>
</clip>
</item>
</layer-list>
Prepare another xml file under same directory.
Give name to that file as progress.xml
Write down following code in it
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:startColor="#ff9d9e9d" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#80e664e1"
android:centerY="0.75"
android:endColor="#a0ff00e5"
android:startColor="#80ff00ff" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:endColor="#800000"
android:startColor="#ff3a33" />
</shape>
</clip>
</item>
</layer-list>
- Above two examples will create custom style for our progress bars.
- It will create parameters like shape, color, gradient effect etc.
Step 2. Launching Progress bar
Now we need to change activity_main.xml and MainActivity.java files.
Write down the below source code in activity_main.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="0/100"/>
<ProgressBar
android:id="@+id/pb"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
style="@android:style/Widget.Holo.Light.ProgressBar.Horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn"
android:text="start above progress bar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv2"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="0/100"/>
<ProgressBar
android:id="@+id/pb2"
android:layout_marginTop="10dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="0"
android:secondaryProgress="100"
android:progressDrawable="@drawable/progress_limit" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn2"
android:text="start above progress bar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv3"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="0/100"/>
<ProgressBar
android:id="@+id/pb3"
android:layout_marginTop="10dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="0"
android:secondaryProgress="100"
android:progressDrawable="@drawable/progress_limit" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn3"
android:text="start above progress bar"/>
</LinearLayout>
- We are going to show three progress bars. So, I have taken three textviews, three buttons and three progress bars in this file.
- All three textviews will show the completion percentage.
- I have implemented button for each progress bar. When the user clicks on button, a progress bar related to that button will start it’s operations.
Now consider the below code
<ProgressBar
android:id="@+id/pb"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
style="@android:style/Widget.Holo.Light.ProgressBar.Horizontal" />
- Above is our first progress bar.
- I have used android’s in-built style for this progress bar. So we do not require to attach any drawable files in the above code.
Below is the code for second horizontal progress bar.
<ProgressBar
android:id="@+id/pb2"
android:layout_marginTop="10dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="0"
android:secondaryProgress="100"
android:progressDrawable="@drawable/progress_limit" />
- I have attached a drawable xml file progress_limit.xml to this progress bar.
- This progress bar contains two types of progresses. Primary progress and Secondary Progress.
- Both progresses will increase it’s value simultaneously with the loading of the process.
- In this code, I have set the secondary progress as 100 means that it will have full value.
Following is the third progress bar source code.
<ProgressBar
android:id="@+id/pb3"
android:layout_marginTop="10dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:maxHeight="10dip"
android:minHeight="10dip"
android:progress="0"
android:progressDrawable="@drawable/progress" />
- I have attached progress.xml file from drawable directory which we developed in Step 1.
- We will show different colors in the progress bars with help of xml files of drawable directory.
Finally, write down the following coding lines in MainActivity.java
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private TextView tv, tv2, tv3;
private Button btn, btn2, btn3;
private ProgressBar progressBar, progressBar2, progressBar3;
private int progressStatus = 0, progressStatus2 = 0, progressStatus3 = 0;
private Handler handler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv = findViewById(R.id.tv);
btn = findViewById(R.id.btn);
progressBar = findViewById(R.id.pb);
tv2 = findViewById(R.id.tv2);
btn2 = findViewById(R.id.btn2);
progressBar2 = findViewById(R.id.pb2);
tv3 = findViewById(R.id.tv3);
btn3 = findViewById(R.id.btn3);
progressBar3 = findViewById(R.id.pb3);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (progressStatus == 100) {
progressStatus = 0;
}
new Thread(new Runnable() {
@Override
public void run() {
while (progressStatus < 100) {
// Update the progress status
progressStatus += 1;
// Try to sleep the thread for 20 milliseconds
try {
Thread.sleep(20); //3 seconds
} catch (InterruptedException e) {
e.printStackTrace();
}
// Update the progress bar
handler.post(new Runnable() {
@Override
public void run() {
progressBar.setProgress(progressStatus);
// Show the progress on TextView
tv.setText(progressStatus + "/100");
}
});
}
}
}).start(); // Start the operation
}
});
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (progressStatus2 == 100) {
progressStatus2 = 0;
}
new Thread(new Runnable() {
@Override
public void run() {
while (progressStatus2 < 100) {
// Update the progress status
progressStatus2 += 1;
// Try to sleep the thread for 20 milliseconds
try {
Thread.sleep(20); //3 seconds
} catch (InterruptedException e) {
e.printStackTrace();
}
// Update the progress bar
handler.post(new Runnable() {
@Override
public void run() {
progressBar2.setProgress(progressStatus2);
// Show the progress on TextView
tv2.setText(progressStatus2 + "/100");
}
});
}
}
}).start(); // Start the operation
}
});
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (progressStatus3 == 100) {
progressStatus3 = 0;
}
new Thread(new Runnable() {
@Override
public void run() {
while (progressStatus3 < 100) {
// Update the progress status
progressStatus3 += 1;
// Try to sleep the thread for 20 milliseconds
try {
Thread.sleep(20); //3 seconds
} catch (InterruptedException e) {
e.printStackTrace();
}
// Update the progress bar
handler.post(new Runnable() {
@Override
public void run() {
progressBar3.setProgress(progressStatus3);
progressBar3.setSecondaryProgress(progressStatus3 + 15);
// Show the progress on TextView
tv3.setText(progressStatus3 + "/100");
}
});
}
}
}).start(); // Start the operation
}
});
}
}
Look at the below code
private int progressStatus = 0, progressStatus2 = 0, progressStatus3 = 0;
- I have declared three integer variables. These variables will represent the amount or percentage of the completed process.
Following code will run the progress bar.
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (progressStatus == 100) {
progressStatus = 0;
}
new Thread(new Runnable() {
@Override
public void run() {
while (progressStatus < 100) {
// Update the progress status
progressStatus += 1;
// Try to sleep the thread for 20 milliseconds
try {
Thread.sleep(20); //3 seconds
} catch (InterruptedException e) {
e.printStackTrace();
}
// Update the progress bar
handler.post(new Runnable() {
@Override
public void run() {
progressBar.setProgress(progressStatus);
// Show the progress on TextView
tv.setText(progressStatus + "/100");
}
});
}
}
}).start(); // Start the operation
}
});
- I have used handler class to start the thread. This thread will approximately take 3 seconds complete.
- It means that our progress bar will start from 0 and will reach at 100 percentage in 3 seconds.
- You change the time as per your requirements using the following line.
Thread.sleep(20); //3 seconds
- Change the amount to other than 20 in the above code.
- In the thread, compiler will check one while() loop.
- if the value of the progressStatus variable is less than 100 then compiler will execute the code inside the while() loop, otherwise, it will terminate the thread.
- When progressStatus is less than 100 then the compiler will increase the value of progressStatus by one unit.
After that, it will update the value of textview with latest value of progressStatus using below line.
progressBar.setProgress(progressStatus); // Show the progress on TextView tv.setText(progressStatus + "/100");
- Above code will also set the progressStatus to the progress bar.
Download Source Code For Android Horizontal Progress Bar Example
[sociallocker]Download Source Code For Horizontal ProgressBar[/sociallocker]