We will Programmatically create Android Indeterminate Horizontal Progress Bar example tutorial today.
Generally, we use progress bar when we want to tell user that some process going on.
Here, user have to wait until the process is completed. The best way to handle this situation is to animate some progress symbol.
Now process also can be of two types. One which have specific time amount to complete it’s operation which is called determinate.
Other one is indeterminate where you do not have any clue about the total time required by the process.
In determinate process, you can show percentage to give user a little idea about how long he needs to wait.
While in the case of indeterminate you can not show any indicator like percentage.
So you need to create a specific indeterminate progress bar for scenario.
We will create horizontal indeterminate progress bar in this example.
This example includes four different types of indeterminate progress bars.
All Four Horizontal Progress Bars
Below is the visual representation of all four progress bars.
Follow all the below steps to complete this tutorial.
Various Progress bar Tutorials
Android Circular Progress Bar With Percentage Example
Android Indeterminate Circular Progress Bar Example
Determinate Horizontal Progress Bar Example
Step 1. Main Layout
First of all, create a new activity in the android studio. It is advisable to select “Empty Activity” while creating fresh project in the android studio.
We will define our xml code for progress bars in the activity_main.xml file.
Add the below code snippet in the 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ProgressBar
android:id="@+id/progressBar1"
android:layout_marginTop="20dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:indeterminateOnly="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ProgressBar
android:id="@+id/progressBar2"
style="@android:style/Widget.ProgressBar.Horizontal"
android:indeterminateOnly="true"
android:layout_marginTop="40dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ProgressBar
android:id="@+id/progressBar"
style="@android:style/Widget.Holo.ProgressBar.Horizontal"
android:layout_marginTop="40dp"
android:indeterminateOnly="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ProgressBar
android:id="@+id/pb4"
style="@android:style/Widget.Holo.ProgressBar.Horizontal"
android:layout_marginTop="40dp"
android:progressDrawable="@drawable/second"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
First three progress bars have android’s in built style for horizontal progress bar.
Below is the style for first progress bar.
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
Below two styles are for second and third progress bars respectively.
style="@android:style/Widget.ProgressBar.Horizontal" style="@android:style/Widget.Holo.ProgressBar.Horizontal"
Now consider the below coding lines for fourth progress bar.
<ProgressBar
android:id="@+id/pb4"
style="@android:style/Widget.Holo.ProgressBar.Horizontal"
android:layout_marginTop="40dp"
android:progressDrawable="@drawable/second"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Here, we will use custom drawable along with the in-built style.
Drawable file will give specific properties to make custom horizontal progress bar.
We have used second.xml drawable file in the fourth progress bar.
Let us create second.xml file.
Create a new drawable xml file under directory res->drawable. Name it as second.xml
Copy the 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="#eaea7f"
android:centerY="0.75"
android:endColor="#e7e551"
android:startColor="#dfcf21" />
</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:centerColor="#8064e694"
android:centerY="0.75"
android:endColor="#a000ff2a"
android:startColor="#8033ff00" />
</shape>
</clip>
</item>
</layer-list>
Step 2. Main Code
After working on XML files, it is time to play with java file.
Copy the following code snippet in MainActivity.java file.
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ProgressBar;
public class MainActivity extends AppCompatActivity {
private ProgressBar progressBar4;
private int pStatus = 0;
private Handler handler;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
progressBar4 = findViewById(R.id.pb4);
handler = new Handler();
new Thread(new Runnable() {
@Override
public void run() {
// TODO Auto-generated method stub
while (pStatus < 100) {
pStatus++;
if(pStatus == 99){
pStatus = 0;
}
handler.post(new Runnable() {
@Override
public void run() {
// TODO Auto-generated method stub
progressBar4.setProgress(pStatus);
progressBar4.setSecondaryProgress(pStatus+15);
}
});
try {
// Sleep for 200 milliseconds.
// Just to display the progress slowly
Thread.sleep(16); //thread will take approx 3 seconds to finish
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
}
Because we are using just android’s in-built style in the first three progress bars, we do not need to add any coding lines in java file for these progress bars.
We have handled some scenarios for the fourth one.
Consider the below code
private ProgressBar progressBar4; private int pStatus = 0; private Handler handler;
First line is declaring the object of the ProgressBar class.
Second one is creating the integer variable “pStatus” with zero as the initial value.
Third line is giving us Handler’s object.
Let us understand the below code structure for fourth progress bar.
handler = new Handler();
new Thread(new Runnable() {
@Override
public void run() {
// TODO Auto-generated method stub
while (pStatus < 100) {
pStatus++;
if(pStatus == 99){
pStatus = 0;
}
handler.post(new Runnable() {
@Override
public void run() {
// TODO Auto-generated method stub
progressBar4.setProgress(pStatus);
progressBar4.setSecondaryProgress(pStatus+15);
}
});
try {
// Sleep for 200 milliseconds.
// Just to display the progress slowly
Thread.sleep(16); //thread will take approx 3 seconds to finish
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
First, we will initialize handler object to avoid null pointer exception
Then we will create a new thread to start the horizontal progress bar.
Compiler will check for while() method in the run() method of the thread.
In while() loop, compiler will check if the value of the integer variable pStatus is less than 100 or not.
If pstatus has less value than 100 then compiler will enter in the while loop. After entering, it will increase the value of pStatus by one.
Now it will again check one if condition. If the value of pStatus is 99 than it will set the value of pStatus as zero.
This if condition is responsible for the infinite running of the thread hence the infinite running of the horizontal progress bar.
After this, compiler will set the value of the primary progress and the secondary progress.
Download Source Code For Android Indeterminate Horizontal Progress Bar Example
[sociallocker]Download source code for Horizontal Indeterminate Progress Bar[/sociallocker]