Styling indeterminate progressbar on ActionBar

Question

I would like to put a progressBar on the action bar but setting

requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);  
setProgressBarIndeterminateVisibility(true);

on onCreate method produces a medium size progressBar (48dip x 48dip) I guess. I want to change the size of the progressBar but I cannot find how to do it. Can you help me please?

Answer 1

Styled ANIMATED indeterminate progressbar icon on ActionBar:

1.Define res/values/styles.xml (This example uses Sherlock library to provide actionbar in old Android versions so, if you arent using Sherlock you should use appropiated parents to define your custom styles):

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="Theme.Sherlock">
        <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item>
        <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item>
    </style>

    <style name="Widget.Styled.ActionBar" parent="Widget.Sherlock.Light.ActionBar">
        <item name="android:indeterminateProgressStyle">@style/IndeterminateProgress</item> 
        <item name="indeterminateProgressStyle">@style/IndeterminateProgress</item> 
    </style>

    <style name="IndeterminateProgress" parent="@android:style/Widget.ProgressBar.Small"> 
       <item name="android:indeterminateDrawable">@drawable/progress_indeterminate_custom</item> 
    </style> 
</resource>

2.Define res/drawable/progress_indeterminate_custom.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
    <rotate
        android:drawable="@drawable/ic_progress_logo1"
        android:fillAfter="true"
        android:fromDegrees="-180"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="180" />
    </item>
     <item>
    <rotate
        android:drawable="@drawable/ic_progress_logo2"
        android:fillAfter="true"
        android:fromDegrees="180"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="-180" />
</item>
</layer-list>

3.Above code uses 2 images (ic_progress_logo1 and ic_progress_logo2) as custom progress indeterminated icon. You can use as much images/drawables as you want by adding new item elements. Also, you can apply differents effects/animations. More info here: Animation Resources

4.Apply style you've created using AndroidManifest.xml:

<application
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name" 
    android:name=".application.MyApplication">
    <activity
        android:name=".activities.MyActivity"
        android:label="@string/app_name"
        android:theme="@style/MyTheme" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

5.Enjoy your animated custom progress indeterminate icon :D

Answer 2

For ActionBarSherlock you can change the indeterminate progress by parenting the Widget.ProgressBar.Small, this should work without Sherlock as well.

I fetched the drawables from the android-15 res folder in the SDK, be sure to grab progress_small_white.xml and associated resource.

 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <style name="Dark" parent="Theme.Sherlock">
         <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item>
         <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item>
     </style>

     <style name="Widget.Styled.ActionBar" parent="Widget.Sherlock.Light.ActionBar">
         <item name="android:indeterminateProgressStyle">@style/IndeterminateProgress</item> 
         <item name="indeterminateProgressStyle">@style/IndeterminateProgress</item> 
     </style>

      <style name="IndeterminateProgress" parent="@android:style/Widget.ProgressBar.Small"> 
        <item name="android:indeterminateDrawable">@drawable/progress_small_holo</item> 
    </style> 
 </resource>

Answer 3

To make the ProgressBar on ActionBar smaller, what you want to do is override Widget.Holo.ProgressBar.Small like this

<style name="Theme.MyStyle" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="actionBarStyle">@style/ActionBar.MyStyle</item>
    ...
</style>

<style name="ActionBar.MyStyle" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
    ...
    <item name="android:indeterminateProgressStyle">@style/ActionBarProgressBar.MyStyle</item>
    ...
</style>

<style name="ActionBarProgressBar.MyStyle" parent="@android:style/Widget.Holo.ProgressBar.Small">
    <item name="android:minWidth">28dp</item>
    <item name="android:maxWidth">28dp</item>
    <item name="android:minHeight">28dp</item>
    <item name="android:maxHeight">28dp</item>
</style>

and set the size to whatever you want.

Answer 4

You'll need to create your own style to apply to the ActionBar. There's a great tutorial on this on the Android Developers Blog. To style the intermediate progress bar, try using indeterminateProgressStyle and Widget.ProgressBar.Small. Here's a quick example.

<style name="YourTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/ActionBarIPS</item>
</style>

<style name="IndeterminateProgress" parent="@android:style/Widget.ProgressBar">
    <item name="android:indeterminateDrawable">@drawable/ic_launcher</item>
</style>

<style name="ActionBarIPS" parent="@android:style/Widget.ActionBar">
    <item name="android:indeterminateProgressStyle">@style/IndeterminateProgress</item>
    <item name="android:background">@color/white</item>
</style>

Answer 5

Paste below code in your on Create method and run this below bar in intermediate mode.
If you want to show on progress percentage, then comment progressBar.setIndeterminate(true); method and uncomment progressBar.setProgress(65) method and maintain your progress

       progressBar = new ProgressBar(this, null, android.R.attr.progressBarStyleHorizontal);
       progressBar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 24));
     //progressBar.setProgress(65);
     //progressBar.setBackgroundDrawable(getResources().getDrawable(R.color.lock_background_greeen));
      progressBar.setIndeterminate(true);

    // retrieve the top view of our application
      final FrameLayout decorView = (FrameLayout) getWindow().getDecorView();
      decorView.addView(progressBar);


      ViewTreeObserver observer = progressBar.getViewTreeObserver();
      observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            View contentView = decorView.findViewById(android.R.id.content);
            progressBar.setY(contentView.getY() - 10);

            ViewTreeObserver observer = progressBar.getViewTreeObserver();
            observer.removeGlobalOnLayoutListener(this);
        }
    });

Answer 6

I have to be compatible with older versions of the Android SDK so I had to keep it simple and used:

Styles.xml

 <style name="TallerTitleBarDialogThemeStyle" parent="@android:style/Theme.Dialog">
    <item name="android:windowTitleSize">36dp</item>
</style>

AndroidManifest.xml

android:theme="@style/TallerTitleBarDialogThemeStyle"

for the activity I need to adjust.