Home > android, ui > Showing progress in standard window title bar

Showing progress in standard window title bar

I wanted to show progress indication in my application’s title bar. Android already provides a way to do this, but uses a bar-style progress indicator, whereas I wanted an “indeterminate” progress, a rotating “thing” seen in many applications.

At the same time, I wanted to only add my own progress indicator on the right, without changing the look of the title bar, even if it’s customized by the phone manufacturer.

November 22, 2010 – update.

There is an easier way to display the progress wheel, please read this post.

To do this, I needed to provide a custom title bar layout. This blog post shows the basics, but, as with other posts, focuses on creating a title bar that looks completely different from the default (which may be customed depending on the phone).

The default title bar layout can be found in the Android sdk, under platforms\android-X\data\res\layout\screen.xml. Interestingly enough, it already has a “circle” style progress bar, but its id not exported and so can’t be used by applications.

The default title bar layout uses a style for the title bar text: windowTitleStyle. This style can be referenced from applications as style="?android:attr/windowTitleStyle".

Another style we need is progressBarStyleSmallTitle, which is used for the non-accessible progress bar in the standard window title bar mentioned above.

Combining these two, we end up with this layout (save it as main_title_with_progress.xml):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 	xmlns:android="http://schemas.android.com/apk/res/android"
 	android:layout_width="fill_parent"
 	android:layout_height="wrap_content"
 	android:fitsSystemWindows="true">
	<TextView
 		android:id="@android:id/title"
 		style="?android:attr/windowTitleStyle"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content"
 		android:layout_alignParentLeft="true"
 		android:text="@string/app_name"/>
	<ProgressBar
 		android:id="@+id/title_progress_bar"
		style="?android:attr/progressBarStyleSmallTitle"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content"
 		android:layout_alignParentRight="true"
 		android:layout_centerVertical="true"
 		android:visibility="invisible"
 		android:indeterminateOnly="true"/>
</RelativeLayout>

To use this layout, we need to do this in the activity’s onCreate:

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		Window window = getWindow();
		window.requestFeature(Window.FEATURE_CUSTOM_TITLE);
		// setContentView goes here
		window.setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.main_title_with_progress);
		// get a reference to the progress bar
		mTitleProgressBar = (ProgressBar) findViewById(R.id.title_progress_bar);
	}
	private ProgressBar mTitleProgressBar;

Note that we need to request the use of a custom title bar before setting the content view, and set the actual layout for the title bar after setting the content view.

To use the progress bar, we can just show and hide the progress bar:

	// show the progress circle
	mTitleProgressBar.setVisibility(View.VISIBLE);
	// hide the progress circle
	mTitleProgressBar.setVisibility(View.INVISIBLE);

And that’s really it.

Advertisements
Categories: android, ui
  1. João Rossa
    September 8, 2011 at 7:21 pm

    What if you want to maintain the progressbar between activities, like the wheel is spinning which means some thread is doing something, and meanwhile you press a button and you go to another screen, how i t tell in this screen that the thread is still doind something so the progressbar still appears…?

    • September 8, 2011 at 7:53 pm

      For this you’d need a service to maintain the ongoing process between activities.

      Once you have that, you can register activities with the service in onStart, check the current state of the ongoing operation, and display the progress wheel. This code can be abstracted out into a common base class (a subclass of Activity).

  2. May 26, 2011 at 2:03 am

    that’s ok. my app already uses an action bar. im looking to decorate my status bar within the body. i figure using a progressdialog pretty much prevents the user from doing anything else

  3. May 25, 2011 at 5:56 pm

    have you experienced using a linearlayout as sort of a container for a status results? like giving a linearlayout a border and a background

  4. December 9, 2010 at 10:47 pm

    Thanks for this tutorial Kostya!

    Unfortunately the easier method you posted a few weeks ago doesn’t work with ListActivities (at least I can’t get it working). This method does work. 🙂

    However, it looks a little different than default title-bars. I’ve tried to find the difference by comparing screenshots, but I can’t find it. Nevermind…

    Tom

    • December 9, 2010 at 10:57 pm

      Ah, interesting. It just so happens that I never use ListActivities.

  5. C L
    November 22, 2010 at 6:40 am

    Wanted to share that I needed to add after window.setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.main_title_with_progress)

    setProgressBarVisibility(true);
    

    Also want to reiterate your point that it is necessary to do setContentView(R.layout.my_view_layout) before window.setFeatureInt(…)
    Hope above helps others as much as your blog here helped me. Thanks, Kostya.

  1. November 22, 2010 at 2:35 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s