I have developed an app and it is currently in the BETA testing stage and I am working through bug fixes. This one particular issue has been driving me nuts; the issue I have is that certain android devices have bottom navigation bars, (the particular phone i am having this issue with this the HTC One M9) and this bottom navigation bar is causing the image I have on the view to cover up my Recycler View option.
I have tried all solutions to try and programmatically hide the bottom tool bar but nothing has worked. When I go into settings and hide the bottom navigation bar the display is correct again however I not everyone may be aware/have the 'hide bottom navigation bar' feature and so I wanted to overcome this alignment issue without the user having to make any further customisation.
This is my xml file: festivals.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:clipToPadding="false"
android:windowTranslucentStatus="false"
android:statusBarColor="#android:color/transparent"
android:navigationBarColor="#android:color/transparent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
android:id="#+id/festivals_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:fitsSystemWindows="true"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="470dp"
android:id="#+id/imageView"
android:src="#drawable/ganesh_red"
android:layout_alignParentBottom="true android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" android:scaleType="centerCrop"
/>
</RelativeLayout>
Here is the .java file corresponding to the above .xml file: FestivalsActivity.java
public class FestivalsActivity extends BaseActivity implements RecyclerViewAdapterFestivals.ClickListener {
private RecyclerView mRecyclerView;
//Creating an instance of the adapter object
private RecyclerViewAdapterFestivals adapter;
private static final int ITEM_COUNT = 2;
#Override
//public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.festivals);
//This line of code will set the View to full screen without any trimming
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
//This line will forcefully hide the bottom navigation bar on devices that have them
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);
//Setting the orientation to Portrait Only
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
//Calling Activate Toolbar method (with the Back button enabled)
activateToolBar();
//Instantiating the recycler view as defined in national_committee
mRecyclerView=(RecyclerView) findViewById(R.id.festivals_recycler_view);
//Adding item decoration. Recycler view divider
mRecyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL_LIST));
//Initialising the adapter - Passing in the activity and the getData method
adapter=new RecyclerViewAdapterFestivals(this, getData());
//Here passing in the click listener into the Adapter. 'this' signifies that it is the fragment that handles the click listener.
//This is possible as the on Click Listener interface is being implemented.
adapter.setClickListener(this);
//Setting the adapter
mRecyclerView.setAdapter(adapter);
//Setting the Layout
//mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar enough_food it is present.
//getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
//int id = item.getItemId();
return super.onOptionsItemSelected(item);
}
//Creating an array list of information objects that can be passed into the recycler view
public static List<SubInformation> getData() {
List<SubInformation> data = new ArrayList<>();
//String array of text for the recycler view
String[] text = {"January - June", "July - December"};
//For loop to go through entire length of the menu string
for(int i=0; i<ITEM_COUNT; i++){
data.add(new SubInformation(text[i]));
}
return data;
}
#Override
public void itemClicked(View view, int position) {
}
}
Please find the screenshots below (first with, second one without navigation bar)
As you can see, the bottom bar is pushing the ImageView up causing it to cover the second option in the recylerview, I don't want this to happen. I would like the view to display how it does without the bottom Navigation bar even with the bottom bar active. Hope this makes sense. Is this possible?
I think it is something real small i am failing to see.
Any help would be highly appreciated.
Solution
(check comments for more information)
Change size of the RecyclerView, I mean take smaller screen device. If you don't have it, please make a 4' screen emulator. Check how it looks on it.
If needed create custom thinner toolbar - i don't think you need as wide as standard for it.
You can also change height of RecyclerView. Then if it looks good check on HTC One.
Keep in your mind that there are some screen devices and Android version. As I see your HTC has Lollipop (5.x) version. Check also how it looks on Kitkat and older by creating some more emulators or buying some cheap different screen-sized phones.
Hope it help
im looking for creating an action bar like this:
X Cancel -------------- add +
where X and + are icons. So im using getActionBar.setIcon to set the X. home action to set the Cancel title. the ---------- stuf is just blank space, An action with title and icon to set the "add" and the "+", the problem is that by default the action shows the icon to the left side of the title. so im having:
X Cancel -------------- + add
Is there a way to flip it?
or maeby a better way to do this....
i realy was unmotivated to use a custom layout for the action bar cuz i think i lose the power of action items...
here is the menu xml:
<item
android:id="#+id/action_create_key"
android:icon="#drawable/plus"
android:title="#string/action_create"
android:showAsAction="always|withText"/>
Thanks a lot for ur time and help...
Why would you not like to use custom layout for action bar? you can also add the actions to the items in the custom layout too.
Simply create the custom layout of your desired design and use following code to handle it
final ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(R.layout.action_bar, null);
final ActionBar actionBar = getActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(actionBarLayout);
ImageView cancel = (ImageView) actionBarLayout.findViewById(R.id.cancel_icon);
ImageView add = (ImageView) actionBarLayout.findViewById(R.id.add_icon);
cancel.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
//add your functionaity
}
});
This isn't something that can be done using stock ActionBar items. You could consider using the Done/Discard custom action bar, which uses a custom layout of two buttons as the action bar, replacing 'DiscardandDonefor yourCancelandAdd. If you are using the provided [DoneBarActivity source code][2], you'd want to change the right hand layout to usedrawableRightrather thandrawableLeft` to position your icon to the right of the text.
I want to set some view over action bar that will display Tutorial text (Like click here and send email...). Is this possible? I ask because i know that action bar uses the top space on layout, and a fragment or activity uses remaining space.
My second question is how to display all action items on action bar. I use ActionBarSherlock library and i see that i have room for one more action item, but it's not displaying on action bar. I set in xml ifRoom option on item...
Thanks!!!
There are multiple ways to achieve a tutorial-like overlay. Probably the easiest one is to use specially prepared Dialog window with transparent background and without dim behind.
Using custom Dialog for tutorial overlay
First of all we have to prepare content for the Dialog. In this example there will be one TextView inside RelativeLayout which is the most useful layout here.
Content of info_overlay.xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/darker_gray"
android:padding="3dp"
android:text="TextView"
android:textColor="#android:color/white" />
</RelativeLayout>
Now, we can use this layout to create our Dialog:
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Dialog overlayInfo = new Dialog(MainActivity.this);
// Making sure there's no title.
overlayInfo.requestWindowFeature(Window.FEATURE_NO_TITLE);
// Making dialog content transparent.
overlayInfo.getWindow().setBackgroundDrawable(
new ColorDrawable(Color.TRANSPARENT));
// Removing window dim normally visible when dialog are shown.
overlayInfo.getWindow().clearFlags(
WindowManager.LayoutParams.FLAG_DIM_BEHIND);
// Setting position of content, relative to window.
WindowManager.LayoutParams params = overlayInfo.getWindow().getAttributes();
params.gravity = Gravity.TOP | Gravity.LEFT;
params.x = 100;
params.y = 20;
// If user taps anywhere on the screen, dialog will be cancelled.
overlayInfo.setCancelable(true);
// Setting the content using prepared XML layout file.
overlayInfo.setContentView(R.layout.info_overlay);
overlayInfo.show();
}
Result
Below is the screenshot of the above solution working. Note the TextView over ActionBar.
A few notes about solution
If you'll have a dedicated button to dismiss tutorial you can probably use setCancelable(false) to avoid accidental closing of tutorial.
This solution works with any theme with any action bar solution (either OS-provided, Android Support Library or ActionBar Sherlock)
Other solutions/helpers
Take a look at Showcase View library as it focuses on creating tutorial-like screens in easy way. I'm not sure however that it can easily overlay actionbars.
Is there a way to render a view on top of the action bar? I want to create a small tip box that will point the user to an item in the action bar. I know that a Toast with a set view will be rendered above the action bar. Does anyone know how to do this with a view?
I have attempted using FrameLayout with layout_gravity="top" and inflating a view and then adding it to the running activity's layout.
I appreciate you in advance.
Edit:
Here is an image of what I was thinking:
Edit:
Perhaps some more detail is needed. I am looking for a way, or to find out if it is even possible to add a view to the view hierarchy of the activity so that it is rendered last.
Similar to CSS, I want a higher z-index order for this particular view ( the blue floating box in the image), such that it would be rendered on top of the Action Bar region in the activity. The view is in no way associated with Action Bar, it is simply drawn on top of it.
I was trying to achieve something else but I needed a solution similar to this. I needed to draw an opaque layer covering the whole screen, even the action bar--sort of like a dialog. I did so this way:
ViewGroup vg = (ViewGroup)(getWindow().getDecorView().getRootView());
vg.addView(myNewView, params);
this can be used to draw anything anywhere on the screen.
UPDATE: You really shouldn't be using ActionBar anymore, you wouldn't have this issue in the first place if you were using Toolbar like Android recommends. Toolbar would go inside your activity xml like a regular view and you can can do whatever you want to it. And its fully backwards compatible.
https://developer.android.com/training/appbar/setting-up
After struggling with it myself quite some time, here's the solution (tested it - working good):
The general steps are:
Create a wrapper view
Detach the screen view children, place the wrapper, and attach the children
Inflate the content to the children
Controling the wrapper will help you control exactly the action bar and the content below it all together.
Now, using the wrapper, you can add "brothers" to the actionbar/main area. That brother is exactly what you described in your image.
Let's see some code.
First, create a method to help create a wrapper view. the wrapper will be placed between the entire screen and the content of your app. being a ViewGroup you can later on fully control it's content.
private ViewGroup setContentViewWithWrapper(int resContent) {
ViewGroup decorView = (ViewGroup) this.getWindow().getDecorView();
ViewGroup decorChild = (ViewGroup) decorView.getChildAt(0);
// Removing decorChild, we'll add it back soon
decorView.removeAllViews();
ViewGroup wrapperView = new FrameLayout(this);
// You should set some ID, if you'll want to reference this wrapper in that manner later
//
// The ID, such as "R.id.ACTIVITY_LAYOUT_WRAPPER" can be set at a resource file, such as:
// <resources xmlns:android="http://schemas.android.com/apk/res/android">
// <item type="id" name="ACTIVITY_LAYOUT_WRAPPER"/>
// </resources>
//
wrapperView.setId(R.id.ACTIVITY_LAYOUT_WRAPPER);
// Now we are rebuilding the DecorView, but this time we
// have our wrapper view to stand between the real content and the decor
decorView.addView(wrapperView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
wrapperView.addView(decorChild, decorChild.getLayoutParams());
LayoutInflater.from(this).inflate(getActivityLayout(),
(ViewGroup)((LinearLayout)wrapperView.getChildAt(0)).getChildAt(1), true);
return wrapperView;
}
Now, interfere with the regular Activity creation, and instead of using setContentView, use the method we've created.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// DON'T CALL `setContentView`,
// we are replacing that line with this code:
ViewGroup wrapperView = setContentViewWithWrapper(R.layout.activity_layout);
// Now, because the wrapper view contains the entire screen (including the notification bar
// which is above the ActionBar) I think you'll find it useful to know the exact Y where the
// action bar is located.
// You can use something like that:
ViewGroup actionBar = (ViewGroup)((LinearLayout)wrapperView.getChildAt(0)).getChildAt(0);
int topOffset = actionBar.getTop();
// Now, if you'll want to add a view:
// 1. Create new view
// 2. Set padding top - use "topOffset"
// 3. Add the view to "wrapperView"
// 4. The view should be set at front. if not - try calling to "bringToFront()"
}
That's about it.
Notes
I've used Android's hierarchy-viewer to understand what's the right hierarchy. (didn't guess those 0 and 1 indexes)
If you are using some kind of a menu drawer in your activity, you might have to configure it a little bit different since drawers are already creating that wrapper for you
I've learned a lot by looking at this great library
EDIT: Refer to #CristopherOyarzúnAltamirano Answer for further support on newer Android versions
Good luck!
There is a much simpler way to achieve this. ActionBar holds its layout in the class ActionBarContainer which simply inherits from FrameLayout. So in order to display something over the ActionBar you need to grab a reference to the ActionBarContainer and add your own custom View into it. Here is the code
int abContainerViewID = getResources().getIdentifier("action_bar_container", "id", "android");
FrameLayout actionBarContainer = (FrameLayout)findViewById(abContainerViewID);
LayoutInflater myinflater = getLayoutInflater();
View customView = myinflater.inflate(R.layout.yourCustomeViewLayout, null);
actionBarContainer.addView(customView);
I found this workaround based on #Sean answer:
//This is for Jelly, ICS, Honeycomb
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB && Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2){
LayoutInflater.from(this).inflate(resContent, (ViewGroup)((LinearLayout)wrapperView.getChildAt(0)).getChildAt(1), true);}
//This is for KitKat and Jelly 4.3
else if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2){
LayoutInflater.from(this).inflate(resContent, (ViewGroup) (((ViewGroup) wrapperView.getChildAt(0)).getChildAt(0)), true);}
//This is for Ginger
else{
LayoutInflater.from(this).inflate(resContent, (ViewGroup) ((LinearLayout)((FrameLayout) wrapperView.getChildAt(0)).getChildAt(0)).getChildAt(1), true);}
I found a much simpler way to do this.
I just applied android:translationZ="10dp" to the view which I need to be covering the action bar.
I chose 10dp but it can actually be anything you want as long as it is superior to the actionbar's elevation
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:translationZ="10dp"
android:src="#drawable/potatoe" />
Also, don't worry about Android studio's following warning :
"translationZ can't be used with API<21".
It will be ignored, but you don't really care because the toolbar shouldn't cover your view with APIs inferior to 21.
Try using ActionBar.setCustomView(). That's the only way to change the appearance of that area of the screen. You can't stick a View into the area "above" the ActionBar, because that area is basically controlled by the system. On the other hand, you can provide your own layout for it.
If you explain in more detail what you're trying to do, respondents might have some better design ideas.
https://github.com/michaelye/EasyDialogDemo
see the demo above,it may help you
dialog.setLocation(new location[])//point in screen
you could set the location[] yourself.
Use the android:actionLayout in your menu.xml file.
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menu_id"
android:title="#string/menu_string_to_show"
android:icon="#drawable/ic_menu_icon_name"
android:showAsAction="always"
android:actionLayout="#layout/action_button_foo" /></menu>
Then create your action_button_foo.xml layout:
<?xml version="1.0" encoding="utf-8"?><TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/menu_string_to_show"
android:drawableLeft="#drawable/ic_menu_icon_name"
android:background="#drawable/bg_btn_action_bar"
android:clickable="true" />
To handle click do the following:
#Overridepublic boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.my_menu, menu);
final MenuItem item = menu.findItem(R.id.menu_id);
item.getActionView().setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
onOptionsItemSelected(item);
}
});
return super.onCreateOptionsMenu(menu);}
That's if :)
(Reference: http://www.vogella.com/articles/AndroidActionBar/article.html)Custom Views in the ActionBar
You can also add a custom View to the ActionBar. For this you use the setCustomView method for the ActionView class. You also have to enable the display of custom views via the setDisplayOptions() method by passing in the ActionBar.DISPLAY_SHOW_CUSTOM flag.
For example you can define a layout file which contains a EditText element.
<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/searchfield"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="textFilter" >
This layout can be assigned to the ActionBar via the following code. The example code allow attaches a listener to the custom view.
package com.vogella.android.actionbar.customviews;
import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;
import android.widget.Toast;
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getActionBar();
// add the custom view to the action bar
actionBar.setCustomView(R.layout.actionbar_view);
EditText search = (EditText) actionBar.getCustomView().findViewById(R.id.searchfield);
search.setOnEditorActionListener(new OnEditorActionListener() {
#Override
public boolean onEditorAction(TextView v, int actionId,
KeyEvent event) {
Toast.makeText(MainActivity.this, "Search triggered",
Toast.LENGTH_LONG).show();
return false;
}
});
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM
| ActionBar.DISPLAY_SHOW_HOME);
}
}
The explanations here are all too long:
Wrap your main layout file into a top level ViewGroup (e.g. wrap a CoordinatorLayout into a FrameLayout), then inject or declare the view in the new top level layout out. The view will appear above the action bar.
I would like to do the same thing than the GMail application on Honeycomb tablets.
When you click on the Refresh button, the icon is replaced by a ProgressBar.
How can I do this?
Thanks
Ok, I tried what Cailean suggested but it didn't work for me. Every time I want to revert indeterminate progress to the original button it becomes unclickable, I used this layout for the progress
(actionbar_refresh_progress.xml)
<?xml version="1.0" encoding="utf-8"?>
<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"/>
and this one to revert to the button
(actionbar_refresh_button.xml)
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/ic_menu_refresh_holo_light"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
my code was:
private void setRefreshing(boolean refreshing) {
this.refreshing = refreshing;
if(refreshMenuItem == null) return;
View refreshView;
LayoutInflater inflater = (LayoutInflater)getActionBar().getThemedContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if(refreshing)
refreshView = inflater.inflate(R.layout.actionbar_refresh_progress, null);
else
refreshView = inflater.inflate(R.layout.actionbar_refresh_button, null);
refreshMenuItem.setActionView(refreshView);
}
After browsing the source of the Google IO app, especially this file: http://code.google.com/p/iosched/source/browse/android/src/com/google/android/apps/iosched/ui/HomeActivity.java i found another easier way.
Now I need only the first layout with progress and the working method looks like this:
private void setRefreshing(boolean refreshing) {
this.refreshing = refreshing;
if(refreshMenuItem == null) return;
if(refreshing)
refreshMenuItem.setActionView(R.layout.actionbar_refresh_progress);
else
refreshMenuItem.setActionView(null);
}
Menu item definition:
<item android:id="#+id/mail_refresh"
android:title="Refresh"
android:icon="#drawable/ic_menu_refresh_holo_light"
android:showAsAction="always"/>
I hope someone finds this useful.
Gmail does this using an action view for its "refresh in progress" state. Invoking a refresh is done using the standard action button/onMenuItemSelected path.
When you enter your refreshing state, set the action view of the refresh MenuItem to a ProgressBar. (Create it programmatically, inflate it from a layout, use actionLayout in the menu xml as CommonsWare suggests, whatever you prefer.) When you exit your refreshing state, set the action view back to null while keeping a reference to it so you can set it back again the next time you refresh. You can hang onto a reference to the MenuItem after you inflate the menu and changes to it later will be reflected in the action bar.
This approach has some advantages over using a full-time action view and managing other details of the state change yourself. An action view completely replaces the generated action button for a menu item, effectively blocking the user from being able to send the usual onMenuItemSelected events for refresh while a refresh is already in progress. One less thing to handle and the action view can stay completely non-interactive.
You could probably do something clever with an ActionProvider in API 14+ to encapsulate the whole process a bit more but the above ends up being pretty simple.
Assuming that you already have your menu item setup, you'll need to start by creating two new layouts. One that contains the layout for the normal refresh button, and another that contains the progressbar.
Once you have them, call the following piece of code to switch between the two layouts. It'll be up to you to decide exactly when it needs to be called a second time in order to switch it back to the refresh icon.
private void doRefresh(Boolean refreshing, MenuItem menuItem)
{
View refreshView;
LayoutInflater inflater = (LayoutInflater) getActionBar().getThemedContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if(refreshing)
refreshView = inflater.inflate(R.layout.actionbar_indeterminate_progress, null);
else
refreshView = inflater.inflate(R.layout.refresh_icon, null);
menuItem.setActionView(refreshView);
}
Use the following layout as the action view for the action bar menu item.
actionbar_refresh_progress.xml
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="#dimen/abc_action_button_min_width"
android:minWidth="#dimen/abc_action_button_min_width">
<ProgressBar
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
style="?indeterminateProgressStyle" />
</FrameLayout>
Then
menuItem.setActionView(R.layout.actionbar_refresh_progress);
Works across Gingerbread and the rest like a charm. Note that I have used dimension from support action bar for compatibility. You can use #dimen/action_button_min_width instead for ICS and up.
Source: https://code.google.com/p/iosched/source/browse/android/res/layout/actionbar_indeterminate_progress.xml?r=f4fd7504d43b25a75cc23b58d6f844f3553b48c3