Styling indeterminate progressbar on ActionBar

2019-01-21 12:09发布

问题:

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?

回答1:

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>


回答2:

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



回答3:

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.



回答4:

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>


回答5:

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.



回答6:

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);
        }
    });


回答7:

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.