Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling indeterminate progressbar on ActionBar

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?

like image 776
Matroska Avatar asked Feb 06 '12 15:02

Matroska


3 Answers

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>
like image 59
adneal Avatar answered Oct 27 '22 00:10

adneal


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

like image 28
Alberto M. Avatar answered Oct 26 '22 23:10

Alberto M.


I struggled with all of these solutions because I was not using actionbarsherlock. I leveraged off Vlasto Benny Lava's answer, which didn't work for me initially.

Here is what I did step by step:

1) open your styles.xml file, it should be under /res/values/styles.xml. If it doesn't exist create it.

2) paste in:

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="myTheme" parent="android:Theme.Holo">
        <item name="android:actionBarStyle">@style/ActionBar.MyStyle</item>
    </style>

    <style name="ActionBar.MyStyle" parent="@android:style/Widget.Holo.ActionBar">
        <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> 
</resources>

One catchya I came across, you cannot use a theme name of "AppTheme" otherwise the overrides will not work. I used "MyTheme". This theme is using Holo so it has a black ActionBar as seen in image below. If you wish to have a white coloured actionbar then of course replace android:Theme.Holo with android:Theme.Holo.Light etc.

3) Edit AndroidManifest.xml.

your <application> must contain android:theme="@style/myTheme" so that the application is using your override styles from styles.xml

ie, my manifest application tag file looks something like this:

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/myTheme"
    android:name="Application Name Here" >

Because your simply shrinking down the size of the existing progress png there is no need to export any images and move them to your drawable location etc.

Here's what mine looks like, the size of the icon is perfect for me.

enter image description here

like image 22
wired00 Avatar answered Oct 27 '22 01:10

wired00