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.
Related
i am using the Support Library Navigation Drawer and I want to customize it.
My Current Menu looks like this:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="?android:attr/activatedBackgroundIndicator">
<group
android:id="#+id/DrawerMainGroup"
android:checkableBehavior="single"
android:background="?android:attr/activatedBackgroundIndicator"
>
<item
android:id="#+id/drawer_home"
android:checked="true"
android:icon="#drawable/ic_home"
android:title="#string/home"
/>...
I want to have another icon on this. Do you think it is possible?
I searched the Web and could not fin anything useful for me.
Both images will be dynamically loaded. For example:
I have a app where i can get videos,pictures etc. That is the first Icon. Next to this, there should be a icon if this site is on homescreen or not.
Like: (IconType)(IconOnHome) Text
I don't know if this is even possible. I found app:actionlayout already, but i am not sure if I could load different images in to the xml.
I have an application without an appbar. Now I want to put 3 Buttons into a menu. I have seen the option to create a toolbar and then add the items programmaticlly. But first I would prefer not to have a bar but just the menu.
I know that that isn´t really important because I can make the bar transparent.
And Second I really don´t want to add the items programmatically. (But defigned in xml.) Is this possible, are there better ways and how can I do it?
If "By the menu" you mean, the overflow menu that exists in the app bar then you can not just the add the menu that way. The app bar or toolbar has to be there to contain that overflow menu. But for giving that sort of effect as you also mentioned you can have the toolbar transparent or you can look into the PopUpMenu, http://developer.android.com/guide/topics/ui/menus.html,
this way you can hide your app bar and can give a separate button which will call PopUpMenu, its going to give you same overflow menu effect.
Regarding your 2nd requirement of putting menu in xml, if i am getting it correct you can have your menu defined like this,
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/phone"
android:title="#string/phone"
android:icon="#drawable/phone"
android:showAsAction="ifRoom|withText"
/>
<item
android:id="#+id/computer"
android:title="#string/computer"
android:icon="#drawable/computer"
android:showAsAction="ifRoom|withText"
/>
</menu>
You need your CSS anymets revised.
Please consider this codings:
style {template.css}
I think you'll find those are the exact answer.
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.
It was hard to give a descriptive title for this question!
I have an app widget in which I have some clickable buttons (using RemoteViews and PendingIntents as needed for app widgets) that are difficult to tap at their current size. To work around this without having to resize the actual button, I have placed larger, invisible, clickable FrameLayouts over these buttons to increase the clickable area. This works well, except the buttons also have selectors connected to them so that the background color for the images change when tapped. This selector no longer works when the FrameLayout covers the buttons since it's now actually the FrameLayout that's being tapped, not the buttons.
My question is if there's a way to somehow make it "click through" the FrameLayout so that the selector for the button is still triggered, or any other clever workaround that achieves the same effect? Applying the selector on the FrameLayout itself will make the background change much too large.
Below is a simplified example of what I'm doing. The actual layout I'm using is more complex, so any solutions that requires changing the layout may be more difficult to do than it may seem here. Also, the reason the FrameLayout is placed in a RelativeLayout is so that I have more freedom with the placement.
EDIT
The FrameLayout is placed on top of two other layouts, which is why I can't simply place it under the button. It needs to cover a larger area. I'm hoping I won't have to redo the entire layout to fix this problem.
LAYOUT
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageButton
android:layout_width="#dimen/size_myButton_w"
android:layout_height="#dimen/size_myButton_h"
android:layout_alignParentRight="true"
android:background="#drawable/selector" //NOT TRIGGERED! Covered by FrameLayout below.
android:src="#drawable/myButton" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
<!-- More stuff here! -->
</RelativeLayout>
<!-- Even more stuff here! -->
</LinearLayout>
<FrameLayout
android:layout_width="120dp"
android:layout_height="35dp"
android:layout_alignParentRight="true">
</FrameLayout>
</RelativeLayout>
SELECTOR
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/navy" />
<item android:state_focused="true" android:drawable="#color/white" />
<item android:drawable="#color/white" />
</selector>
Perhaps you could place your FrameLayout below the button, rather than on top. That way if they hit the actual button, you get your selector triggered and if they miss the button and still hit the FrameLayout...well, your selector won't get triggered, but your FrameLayout click listener will still get called.
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?