Progress Bar is a element used to visualize the progression of an extended running operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format..
Steps to use progress bar in your project.
- Crate a project in android studio.
- Open your main_activity.xml and update it-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.pankaj.progressbar.MainActivity">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="defaultProgressDialog"
android:text="Default Progress Bar Dialog" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="customProgressDialog"
android:text="Custom Progress Bar Dialog" />
</LinearLayout> - Create a custom dialog view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:orientation="vertical"
android:padding="1dp">
<!--content of dialog box-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:padding="5dp">
<!--title-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="loading...." />
<!--progress update textview -->
<TextView
android:id="@+id/tvUpdateProgress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0" />
<!--progress out of-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="/100" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:background="@android:color/white"
android:padding="5dp">
<!--progress bar-->
<ProgressBar
android:id="@+id/prDownload"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout> - open your resource directory and creat a drawable for custom progress bar new drawable resource file(selector)(drawable/custom_progress_drawable.xml)-
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="@android:id/background">
<shape>
<gradient
android:centerColor="#20FFFF00"
android:endColor="#20007A00"
android:startColor="#20FF0000" />
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="@android:id/progress">
<clip>
<shape>
<gradient
android:centerColor="#FFFF00"
android:endColor="#007A00"
android:startColor="#FF0000" />
</shape>
</clip>
</item>
</layer-list> - Open your MainActivity.JAVA class and update it -
package com.pankaj.progressbar;
import android.app.AlertDialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
//__methode will be call when we click on "Default Progress Bar Dialog" and will be show the default preogress bar in the dialog.
public void defaultProgressDialog(View view) {
updateProgress(false);
}
//__methode will be call when we click on "Custom Progress Bar Dialog" and will be show the custom preogress bar in the dialog.
public void customProgressDialog(View view) {
updateProgress(true);
}
private void updateProgress(boolean isCustom) {
//________create the custom view of dialog
LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
View view1 = inflater.inflate(R.layout.custom_dialog_view, null);
//__________create the dialog builder
AlertDialog.Builder builder = new AlertDialog.Builder(this);
//__________set custom view to dialog builder
builder.setView(view1);
//__________create alert dialog
AlertDialog dialog = builder.create();
//__________show alert dialog
dialog.show();
//__________create progress bar and update progress bar textview object
final ProgressBar prDownload = (ProgressBar) view1.findViewById(R.id.prDownload);
final TextView tvUpdateProgress = (TextView) view1.findViewById(R.id.tvUpdateProgress);
//__________check ckicked on custom progress bar dialog or default progress bar dialog
if (isCustom) prDownload.setProgressDrawable(getResources().getDrawable(R.drawable.custom_progress_drawable));
//__________create a thread
new Thread() {
public void run() {
int progress = 0; //_________progress will be start from here
int percent = 100; //__________progress will be complete on this
while (progress++ < percent) {
try {
final int finalProgress = progress;
runOnUiThread(new Runnable() {
@Override
public void run() {
//__________update progress
tvUpdateProgress.setText(finalProgress + "");
prDownload.setProgress(finalProgress);
}
});
//__________sleep for 200 ms to create difference between updates
Thread.sleep(200);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}.start();
}
} - Now all the development steps for Progress Bar has completed, Please run the application and see the screen of device.
- Now click on "Default Progress Bar Dialog" and see the screen -
- Now click on "Custom Progress Bar Dialog" and see the screen -
- Good bye, Thanks to read this blog.
