Sunday, January 6, 2013

28 How to create custom progress bar and progress dialog in Android.


Progress Bar and Progress Dialog are useful to tell user that the task is takes longer time to finish. A Progress Dialog showing a progress indicator and an optional text message or view. Only a text message or a view can be used at the same time.
In this tutorial, we show you how to display a custom progress bar and use progress dialog in Asynctask to tell user that the file download task is running.

Here is a result of this tutorial:

Android Custom ProgressBar And ProgressDialog Example


This project is developed in Eclipse 4.2.0.

1. Make main layout with some components: one button to show custom progress bars, one textview to show some infos, one button to start download image file from internet Url.


<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">
        <Button
            android:id="@+id/button1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="2dp"
            android:text="Show Progressbar" 
            android:onClick="button_click"
                android:layout_margin="5dip"
            />
       
        <ProgressBar
            android:id="@+id/progressBar1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            style="@style/CustomProgressBar" 
            android:layout_margin="5dip" />
       
        <ProgressBar
            android:id="@+id/progressBar2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
                    android:indeterminateDrawable="@drawable/my_progress_indeterminate"
            android:layout_margin="5dip"/>
        <TextView
             android:id="@+id/textView"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:gravity="center"
             android:text="show state up checkbox"
             android:layout_margin="5dip"
             android:textColor="#CC00CC"
             android:textSize="18dp"/>
       
        <Button
             android:id="@+id/button2"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_marginBottom="20dp"
             android:text="Start download file" 
                android:onClick="button_click"
                android:layout_margin="5dip"
            />
       
        <!-- Image view to show image after downloading -->
    <ImageView android:id="@+id/my_image"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>
To customize progress bars on xml file above and a progress style of progress dialog when downloading file, we will edit style property of each progress bar.
For progress bar with horizoltal style:
            style="@style/CustomProgressBar" 
Define CustomProgressBar style in res/values/styles.xml:
<resources> 
        <style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
          <item name="android:indeterminateOnly">false</item>
          <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
          <item name="android:minHeight">10dip</item>
          <item name="android:maxHeight">20dip</item>
        </style>       
    <style name="AppTheme" parent="android:Theme.Light" />
</resources>
And in file res/drawable/custom_progress_bar_horizontal.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--  @author : @alexduhem
                blog.sakaroz.com
 -->
<layer-list
        xmlns:android="http://schemas.android.com/apk/res/android">
        <item
                android:id="@android:id/background">
                <shape>
                        <corners
                                android:radius="5dip" />
                        <gradient
                                android:startColor="#ffffffff"
                                android:centerColor="#ffdddddd"
                                android:centerY="0.50"
                                android:endColor="#ffffffff"
                                android:angle="270" />
                </shape>
        </item>
        <item
                android:id="@android:id/secondaryProgress">
                <clip>
                        <shape>
                                <corners
                                        android:radius="5dip" />
                                <gradient
                                        android:startColor="#770e75af"
                                        android:endColor="#771997e1"
                                        android:angle="90" />
                        </shape>
                </clip>
        </item>
        <item
                android:id="@android:id/progress">
                <clip>
                        <shape>
                                <corners
                                        android:radius="5dip" />
                                <gradient
                                        android:startColor="#ff0e75af"
                                        android:endColor="#ff1997e1"
                                        android:angle="90" />
                        </shape>
                </clip>
        </item>
</layer-list>

For progress bar with spinner style:
                    android:indeterminateDrawable="@drawable/my_progress_indeterminate"

Content of res/drawable/my_progress_indeterminate.xml:
<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/loadingicon"
    android:pivotX="50%"
        android:pivotY="50%" />

2. Code
2.1. Starting a new asynctask to show custom two progress bars working when click on button. One horizontal style and one spinner style.
 Create asyncTask class: ShowCustomProgressBarAsyncTask
  public class ShowCustomProgressBarAsyncTask extends AsyncTask<Void, Integer, Void> {
  int myProgress;
  @Override
  protected void onPostExecute(Void result) {
   textview.setText("Finish work with custom ProgressBar");
   button1.setEnabled(true);
   progressBar2.setVisibility(View.INVISIBLE);
  }
  @Override
  protected void onPreExecute() {
   button1.setEnabled(false);
   textview.setText("Start work with custom ProgressBar");
   myProgress = 0;
   progressBar.setSecondaryProgress(0);
  }
  @Override
  protected Void doInBackground(Void... params) {
   while(myProgress<100){
    myProgress++;
    publishProgress(myProgress);
       SystemClock.sleep(100);
   }
   return null;
  }
  @Override
  protected void onProgressUpdate(Integer... values) {
   progressBar.setProgress(values[0]);
   progressBar.setSecondaryProgress(values[0] + 5);
  }
 }
2.2. When User clicks on the download file button, processing download and show custom progress dialog by starting a new asynctask.
In doInBackground method we process for download data from Url, then write to file located in SDCard.
After downloading image from the web then reading the downloaded image from the sdcard and displaying in a imageview, do this in onPostExecute method. All codes to work below:

/* Background Async Task to download file */
class DownloadFileFromURL extends AsyncTask<String, String, String> {
                /*  Before starting background thread. Show Progress Bar Dialog */
                @SuppressWarnings("deprecation")
                @Override
                protected void onPreExecute() {
                        super.onPreExecute();
                        showDialog(CUSTOM_PROGRESS_DIALOG);
                }
                /* Downloading file in background thread */
                @Override
                protected String doInBackground(String... f_url) {
                        int count;
                try {
                    URL url = new URL(f_url[0]);
                    URLConnection conection = url.openConnection();
                    conection.connect();
                    // getting file length
                    int lenghtOfFile = conection.getContentLength();
                    // input stream to read file - with 8k buffer
                    InputStream input = new BufferedInputStream(url.openStream(), 8192);
                    // Output stream to write file
                    OutputStream output = new FileOutputStream("/sdcard/filedownload.jpg");
                    byte data[] = new byte[1024]; 
                    long total = 0;
                    while ((count = input.read(data)) != -1) {
                        total += count;
                        // publishing the progress....
                        // After this onProgressUpdate will be called
                        publishProgress(""+(int)((total*100)/lenghtOfFile));
                        // writing data to file
                        output.write(data, 0, count);
                    }
                    // flushing output
                    output.flush();
                    // closing streams
                    output.close();
                    input.close();
                   
                } catch (Exception e) {
                        Log.e("Error: ", e.getMessage());
                }
                return null;
                }
                /* Updating progress bar */
                protected void onProgressUpdate(String... value) {
                        // setting progress percentage
                        pDialog.setProgress(Integer.parseInt(value[0]));
                        pDialog.setSecondaryProgress(Integer.parseInt(value[0]) + 5);
     }
                /*  After completing background task. Dismiss the progress dialog */
                @SuppressWarnings("deprecation")
                @Override
                protected void onPostExecute(String file_url) {
                        // dismiss the dialog after the file was downloaded
                        dismissDialog(CUSTOM_PROGRESS_DIALOG);
                        // Displaying downloaded image into image view
                        // Reading image path from sdcard
                        String imagePath = Environment.getExternalStorageDirectory().toString() + "/filedownload.jpg";
                        // setting downloaded into image view
                        my_image.setImageDrawable(Drawable.createFromPath(imagePath));
                }
        }

Note: add some permission in androidmanifest.xml file to work with Internet and External Storage SDCard:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.INTERNET" />

3.DEMO
3.1. Run application

Android Custom ProgressBar And ProgressDialog Example
  
3.1. Click on first button

Android Custom ProgressBar And ProgressDialog Example

3.2. Click on Download file button

Android Custom ProgressBar And ProgressDialog Example

Android Custom ProgressBar And ProgressDialog Example


You can download all source codes of this tutorial from here.
Reference: http://www.androidhive.info

28 comments:

  1. Nice tutorial! Thanks!

    ReplyDelete
  2. Congo.. buddy... This is nice one i have ever seen like his customization..

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Nice one

    where is the android:drawable="@drawable/loadingicon"

    ReplyDelete
  5. It's awesome to go to see this web site and reading the views of all mates about this piece of writing, while I
    am also eager of getting knowledge.

    Have a look at my website - wordpress themes available

    ReplyDelete
  6. Thank you for your android progressbar tutorial

    ReplyDelete
  7. when i click on the show progress bar the app is getting crashed ....i want to know the reason

    ReplyDelete
  8. i saw your blog about custom progress bar and Progress dialog..Its really useful to me when i crashed..Android Training

    ReplyDelete
  9. This is one of the best programming blogs which I have ever come across. In fact, the details in the blog are so simplified and that motivates me to be part of this educative forum. Through professional Science Homework Writing Aid you can be assisted to generate such projects.

    ReplyDelete
  10. where is the android:drawable="@drawable/loadingicon"

    ReplyDelete
  11. Respecting the time and exertion you put into your site and point by point data you offer!..
    Custom Animated Logo

    ReplyDelete
  12. We are one of the most trusted Android Mobile App Development and IOS application development to meet your business complex requirement through offshore world.
    Do you have project and want to discuss with us ? We can assist you in Web Application Development, Mobile App development, Games Development & Emerging Technology.

    ReplyDelete
  13. Nice post! Thanks for sharing this information. Looking for help with your selecting your thesis topic? Get reliable research topics help from the leading Research Projects Writing Company at an affordable cost. Our experts are available 24/7.

    ReplyDelete
  14. Excellent blog!!! I got to know more useful information by reading your blog. Thanks for posting this blog. Golden Triangle Tour Package India

    ReplyDelete
  15. Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support in this area. same as your blog i found another one Mobile Marketing .Actually I was looking for the same information on internet for Mobile Marketing and came across your blog. I am impressed by the information that you have on this blog. Thanks once more for all the details.

    ReplyDelete
  16. Great Article !! if you have QuickBooks issue then you can solve QuickBooks POS Error 00008 at
    quickbooks phone number in quickest possible time.

    ReplyDelete
  17. Amazing Artcle !!QuickBooks Error 6000 308 most common error that can you resoved by QuickBooks Expert at
    Quickbooks Phone Number877) 693-1117

    ReplyDelete