Android - Progress Bar and Customizing Progress Bar

Progress Bar

I am sure most of our application need progress bar (for status like loading, downloading a data, media streaming). Is there any application without a progress bar? I doubt that. Lets explore how to show progress bar in Android.


Cyclic Progress Bar

Below code is for showing a progress bar with cyclic animation


public class CustomprogressbarActivity extends Activity {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

    }

}

Main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/hello" />

   

     <ProgressBar        

         android:layout_width="wrap_content"        

         android:layout_height="wrap_content"        

         style="@android:style/Widget.ProgressBar.Small"        

         android:layout_marginRight="5dp" />

</LinearLayout>

Other progress bar styles provided by the system include:

·         Widget.ProgressBar.Horizontal

·         Widget.ProgressBar.Small

·         Widget.ProgressBar.Large

·         Widget.ProgressBar.Inverse

·         Widget.ProgressBar.Small.Inverse

·         Widget.ProgressBar.Large.Inverse

Horizontal Scroll Bar

Next lets see how to show a horizontal scroll bar. In this example we will also see how to update a progress bar from another thread.

In Android, all the views are updated in UI thread. There fore when we try to update an UI (like updating text, progress bar) from another thread, our application will crash.

To avoid this we need to post an handler to UI thread for updating the UI.

package com.example.customprogressbar;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.widget.ProgressBar;

public class CustomprogressbarActivity extends Activity {

    /** Called when the activity is first created. */

                ProgressBar pb;

                private static int x = 0;

                private Handler mHandler;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        mHandler = new Handler();

        pb = (ProgressBar)findViewById(R.id.progress);

                                Thread working = new Thread(new Runnable() {

                                               

                                                @Override

                                                public void run() {

                                                                while(x<=100)

                                                                {

                                                                                try {

                                                                                                Thread.sleep(1000);

                                                                                } catch (InterruptedException e) {

                                                                                                // TODO Auto-generated catch block

                                                                                                e.printStackTrace();

                                                                                }

                                                                x = x+5;

                                                                // Update the progress bar

                mHandler.post(new Runnable() {

                    public void run() {

                        pb.setProgress(x);

                    }

                });

                                                               

                                                }

                                                }

                                });

                               

                                working.start();

    }

}

Main.Xml file for horizontal scrollbar

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/hello" />

   

     <ProgressBar        

         android:layout_width="wrap_content"        

         android:layout_height="wrap_content"        

         style="@android:style/Widget.ProgressBar.Horizontal"        

         android:layout_marginRight="5dp"

         android:id = "@+id/progress"

         />

</LinearLayout>


We will get below UI :)

Customizing Progress Bar

Our next question will be can I customize the progress bar???? Like changing the background color, fill color???

Ofcourse we can do it :) Below example will help us to do the same,


Create an xml file in drawable folder (/res/drawable), search_progress_drawable.xml.

<?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="25dip" />

            <gradient android:startColor="#C0C0C0" android:centerColor="#F8F8FF"

                android:centerY="0.75" android:endColor="#ffffff" android:angle="90" />

            <stroke android:width="1dp" android:color="#6B8E23" />

        </shape>

    </item>

    <item android:id="@android:id/progress">

        <clip>

            <shape>

                <corners android:radius="25dip" />

                <gradient android:startColor="#9ACD32" android:endColor="#FFFF00"

                    android:angle="90" />

                <stroke android:width="1dp" android:color="#d20404" />

            </shape>

        </clip>

    </item>

</layer-list>

Main.xml file

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/hello" />

   

     <ProgressBar        

         android:layout_width="200dp"        

         android:layout_height="wrap_content"         

         style="@android:style/Widget.ProgressBar.Horizontal"        

         android:layout_marginRight="5dp"

         android:progressDrawable="@drawable/search_progress_drawable"

         android:id = "@+id/progress"

         />

</LinearLayout>




Wow look what an beautiful progress Bar :)

Now we all can show progress Bar in our Android application :) Learning is FUN :)

Android - Setting Window Theme in Code and Manifest

Window in Android

A Window in Android is compromised of Statusbar, Title and area where User Interface for an Activity is shown.

Status Bar/ Annunciator Bar - status like battery, signal strength, data connectivity icon are shown in this area

Title - Name of the application will be shown.

 

                                       

Default Android Window comes with a title bar for an activity. Sometimes we might need an activity without title (Application which likes to have its own custom title) or Full Screen (like gaming apps, where user is not bothered to see the status icon).

In Android Window themes can be customized in code and in Android Manifest file.

Let us explore how we can achieve this, 
                              
Changing Android Manifest File
No title for the all screens

If you wish to apply Theme as No Title for all the activities in an application, set the android:theme as

"@android:style/Theme.NoTitleBar" in the application tag.

<application android:name="AppName"  
    android:icon="@drawable/icon" 
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
............
.............

</application>

No title for a specific activity

If you like to set an theme only specific to an activity, 

<activity android:name="MainActivity" 
        android:theme="@android:style/Theme.NoTitleBar"/>

No annunciator/status bar for a specific activity

If you need full screen for an activity, 

<activity android:name="MainActivity" 
        android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>


Changing Code
Before setting the layout, we need request Window feature,



@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE); // To Set a window with no title


   // This is to set full screen without status bar
   getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 

                                WindowManager.LayoutParams.FLAG_FULLSCREEN);  
    setContentView(R.Layout.Main);
}


More Window Features
If we wish to set an icon for title, following features can be used
FEATURE_LEFT_ICON    - to set an icon on left side of the title
FEATURE_RIGHT_ICON  - to set an icon on right side of the title