Action bar (Sherlock) menu items cutting off built-in Spinner - android

My action bar menu items are cutting off the width of the action bar Spinner so that the Spinner's text gets truncated. I've set all my menu items to use "ifRoom" but unfortunately they interpret the original Spinner width as available room.
Here's the truncation when I have three menu items (yes, I know the third icon looks identical to the second):
Here's what I get when I comment out the third menu item. Ultimately, I want something that looks like this, but with an overflow icon showing instead of the search icon:
I populate the Spinner using a custom adapter (extending from BaseAdapter and implementing SpinnerAdapter).
Here's my menu XML:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/ab_refresh"
android:orderInCategory="1"
android:showAsAction="ifRoom"
android:title="#string/ab_refresh"
android:icon="#drawable/navigation_refresh"/>
<item
android:id="#+id/ab_search"
android:orderInCategory="2"
android:showAsAction="ifRoom|collapseActionView"
android:title="#string/ab_search"
android:icon="#drawable/action_search"
android:actionViewClass="com.actionbarsherlock.widget.SearchView"/>
<item
android:id="#+id/ab_toggle"
android:orderInCategory="3"
android:showAsAction="ifRoom"
android:title="#string/ab_latest"
android:icon="#drawable/action_search"/>
</menu>
And here's my ab_dropdown XML (used in getView of my custom adapter):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rel"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="fill_horizontal">
<TextView
android:id="#+id/txt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20sp"
android:textStyle="bold"
android:layout_marginLeft="5dp"
android:layout_marginTop="1dp" />
</RelativeLayout>
What I've tried:
Setting a minWidth of 570dp for the RelativeLayout and TextView of ab_dropdown. No effect regardless of whether I set it in XML or the getView method of my custom adapter.
Hardcoding the layout_width of RelativeLayout and TextView to 570dp. Again, no effect in XML or code.
I WOULD attempt to find the action bar Spinner programmatically so as to set its width, but when I tried to do this for a different reason, I couldn't.
Any ideas?

Personally, I'd switch to a navigation drawer and dump the drop-down list navigation.
That being said, it sounds like you need two versions of your menu resource. Have the third item be never in the toolbar (always in overflow) by default, and have it be ifRoom on larger screens (e.g., res/menu-sw600dp/).
You could also experiment with AutoScaleTextView for your drop-down list navigation labels.
The navigation portion of the action bar is deemed least important, which is why ifRoom considers there to be room.

Related

Action bar not fitting all the items

Here is my code for my actionbar:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/actionBarNew"
android:showAsAction="always"
android:scaleType="fitXY"
android:title="new" />
<item android:id="#+id/actionBarSave"
android:showAsAction="always"
android:scaleType="fitXY"
android:title="save" />
<item android:id="#+id/actionBarLoad"
android:showAsAction="always"
android:scaleType="fitXY"
android:title="load" />
<item android:id="#+id/actionBarDelete"
android:showAsAction="always"
android:scaleType="fitXY"
android:title="delete" />
</menu>
Then in my onCreate() method, I add the switch widget like so:
ActionBar actionBar = getActionBar();
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM, ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setCustomView(actionBarSwitch, new ActionBar.LayoutParams(
ActionBar.LayoutParams.WRAP_CONTENT, ActionBar.LayoutParams.WRAP_CONTENT,
Gravity.CENTER_VERTICAL | Gravity.END));
actionBar.setTitle(title);
actionBarSwitch.setText(sfx);
actionBarSwitch.setTextColor(res.getColor(R.color.white));
actionBarSwitch.setChecked(soundOn);
actionBarSwitch.setOnCheckedChangeListener(this);
Here is what it looks like at the moment:
As you can see, the switch widget on the left is covered up. It is supposed to say "SFX" on the left of it but it doesnt fit. Is there any way to keep the icon and all the other action bar icons visible? Maybe scale to fit or something?
Any help is appreciated, thanks.
Here is my code for my actionbar
I do not believe that android:scaleType is a recognized attribute for a MenuItem.
Is there any way to keep the icon and all the other action bar icons visible?
Use the split action bar, to move your action bar items (NEW, etc.) to the bottom of the screen on narrow devices.
Maybe scale to fit or something?
While you are welcome to attempt to use view properties to scale the size of your Switch, there is no guarantee that there is enough room to have a usable Switch when you're done. You do not have control over scaling of the regular action bar items.
IMHO this is bit of an abuse of the ActionBar. If you definitely want to fit everything in there, you might try mimicking the ActionBar by adding a LinearLayout at the top of your activity with a background color. You should be able to use the LayoutWeight parameters to get the widgets to fit then.

Make menu items fill height of action bar

I have an app with an action bar. I need the menu items to fill the height of the action bar. I have tried styling the action bar with android:padding="0dp" and settings android:layout_height="fill_parent" on the action views to no avail.
This picture shows that the browse subjects actionview for instance does not fill the actionbar.
Here is a shortened version of my menu declaration.
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menu_more"
android:title="More"
android:showAsAction="always"
android:actionProviderClass="pacakge.action_providers.MoreProvider"
/>
</menu>
The action provider class inflates and returns a view that is inserted into the ActionBar.
Any help would be greatly appreciated! Thanks
Ended up just hard coding the button height to 50dp. Not a very elegant solution but it works.
Hmm....looks like you need to use bigger icons.
Also, in the layout for the buttons, use android:layout_height as "fill_parent".
And as a last tip, use android:showAsAction="ifRoom"
Try to change menu item layout to RelavtiveLayout

displaying a progressbar instead of the refresh menu item in an action bar

I'm trying to display a progress bar instead of a refresh menu item in the action bar. However, when I currently press the refresh button, it disappears, but the progress bar replaces the action bar title, instead of appearing where the refresh button was.
These are my two .xml files:
The menu item:
<item android:id="#+id/menu_refresh"
android:icon="#drawable/ic_menu_refresh"
android:visible="true"
android:orderInCategory="0"
android:showAsAction="ifRoom|collapseActionView"
android:actionLayout="#layout/action_progress_bar"
android:title="#string/refresh"
android:titleCondensed="#string/refresh"/>
The progress bar layout:
<?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" >
</ProgressBar>
I found out what the problem is. In order for the progress bar to appear instead of the menu item, it must not have the collapseActionView flag. Removing it, and moving the logic to the code (along with using the easy setActionView method), did the trick
This is a default actionLayout behaviour, and AFAIK you can't change it. Instead you could try something like handling the button click and replacing the bar item from code.
UPDATE:
Take a look at the ActionBarCompat sample project. (New Project/Android Sample Project).

Set menu items centered and full-width with ActionBarSherlock

I'm attempting to display an action bar with two items, Cancel and Save, but I want these laid out to span the entire length of the action bar, like so:
______________________________
|____Cancel____|____Save ____|
| |
| |
| |
| |
So basically I need a way to display only two action items, centered, and spanning the entire action bar.
What's the easiest way to accomplish this? I'm considering using a customlayout, but as I'm still new to using actionbars and menus, I'm not sure how I would be able to do this and have these still be menu action items.
Is there some kind of styling solution? What's the best and most painless way to accomplish this?
EDIT
As this is my first go with Action Bars and custom layouts, I've got no feel for what will work and what is a hopelessly idiotic approach that simply won't work. For example, setting a custom layout to this:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_gravity="center_horizontal">
<item android:id="#+id/menu_item_cancel"
android:showAsAction="always"
android:title="Cancel"/>
<item android:id="#+id/menu_item_save"
android:showAsAction="always"
android:title="Save" />
</menu>
causes an inflation exception and won't work, and though others with more experience will rightaway know this can't work, I'm left bungling about burning time until I can feel my way out of this or someone points me in the right direction.
So for those asking me what I've tried, I'll keep posting, but expect much of the same.
2nd try
Getting a ClassNotFoundException: Didn't find class "android.view.menu" on path
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal">
<menu android:layout_gravity="center_horizontal">
<item android:id="#+id/menu_item_cancel"
android:showAsAction="always"
android:title="Cancel"/>
<item android:id="#+id/menu_item_save"
android:showAsAction="always"
android:title="Save" />
</menu>
</LinearLayout>
3rd try
This almost works, except I only see the top half of each button. The lower half is cut off, even though the action bar seems to have enough room for it to draw itself properly.
I also lose the action item styling since these are normal buttons, as well as the divider. I'd much rather find a solution that uses the native action items, as it will make it easier to style along with the rest of the action bars throughout the app.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal">
<Button
android:id="#+id/cancel_btn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Cancel" />
<Button
android:id="#+id/save_btn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Save" />
</LinearLayout>
4th try
This one is pretty close. I was going through the ActionBarSherlock demo project, and noticed when the split menu bar is used, the layout tends to center itself. So I reverted to the original menu I've been using, and added the showAsAction ifRoom value.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+id/menu_item_cancel"
android:showAsAction="ifRoom"
android:title="Cancel"/>
<item android:id="#+id/menu_item_save"
android:showAsAction="ifRoom"
android:title="Save"/>
</menu>
I also added this to my activity in the manifest:
android:uiOptions="splitActionBarWhenNarrow"
This gives me the exact styling I want...but it's in the split action bar. I want this at the top, not at the bottom. Running this on the emulator with Android 2.2 works, but seems to center the two options proportional to the length of the text, so the area for Cancel is larger than the area for Save.
If someone knows a way to get this exact styling but in the top action bar, that would fix everything.
Doesn't seem to be a way to do this with native action bar styling or options. Had to use a custom view, similar to my third try, with revised styling and backgrounds to mimic the action bar.

Is there a standard way to add dividers between action bar items in Android 3.0?

I have a slight problem trying to customise the look of the action bar in my app. I want to be able to have the pixel wide dividers to group action bar items that you see in many of the native apps (e.g. Gmail, Calendar). I found a way to do this by adding a menu item and setting the 'android:actionLayout' attribute to a custom layout for the divider:
<View
android:background="#color/LightGray"
android:layout_marginTop="5dip"
android:layout_marginBottom="5dip"
android:layout_width="1dip"
android:layout_height="fill_parent" />
This works nicely, but the issue is it counts as a menu item and the action bar seems to limit the number of menu items to 4 - any others get pushed into the overflow menu.
So I guess what I'm asking is whether there is a standard way to add item dividers without having to use a menu item with a custom view, and in a way that doesn't count towards the limit for action bar items?
Thanks in advance!
I wouldn't try and force dividers into places that the system does not add them automatically as it will make your app inconsistent with the platform. The default behavior is:
Divider between overflow and others.
Divider between text and another item where it would disambiguate which item the text belongs to.
I couldn't find a standard way, but the way I did it was to use the android:actionLayout property for the menu item, and I put the divider in there.
When Google released the 3.0 SDK I got a quick demo app to see how the ActionBar works and just looking back at it, if I use Text Items without Icon drawables, then I get automatic dividers drawn.
My menu.xml file is like this:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menu_text" android:showAsAction="ifRoom" android:title="#string/action_label_text" />
<item android:id="#+id/menu_text" android:showAsAction="ifRoom" android:title="#string/action_label_text" />
<item android:id="#+id/menu_text" android:showAsAction="ifRoom" android:title="#string/action_label_text" />
<item android:id="#+id/menu_text" android:showAsAction="ifRoom" android:title="#string/action_label_text" />
</menu>
Maybe this won't work with icons??
Or thinking about it, maybe the size of the icon has an effect?

Categories

Resources