Showing dividers between menu items in android actionbar - android

I want show dividers between menu items in android actionbar
Icon1 | Icon2 | icon3
my code for showing menu items is
<item
android:id="#+id/menu_time"
android:icon="#drawable/action_time_btn_stateful"
android:title="time"
peel:showAsAction="always"/>
<item android:id="#+id/menu_room_change"
android:icon="#drawable/action_room_btn_stateful"
android:title="change"
peel:showAsAction="always"/>
<item
android:id="#+id/menu_like_set"
android:icon="#drawable/like_button"
android:title="Like"
peel:showAsAction="always" />
Thanks in advance.

Simply put,
your actionbar in ICS and later version is limited to show 4 items in menu.
The rest of the items can be shown when you tap on overflow menu (vertical 3 dotted line).
So adding a divider between items counts divider is also a menu item.
Did you take a look at these already :)
Is there a standard way to add dividers between action bar items in Android 3.0?
ActionBar MenuItem Divider
I suggest get your icons with divider on their left or right based on your requirement.
Not a good practice. But let me know if you find a better solution :)

Try setting custom style
<style name="CustomTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
</style>
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/action_bar_background</item>
<item name="android:showDividers">beginning</item>
<item name="android:divider">#color/action_bar_divider</item>
</style>

Related

android action bar spacing between icons [duplicate]

Is there a way to show Divider between the Menu Items in ActionBar for HoneyComb+.
Some post says that the Divider will be shown only when the menu items has android:showAsAction="withText".
I want to show only the Icon not the Text.
I successfully shown Divider for Pre-HoneyComb by implementing a Action Bar Compatibility.
I dont want to use ActionBarSherlock as given in this post Android actionbar sherlok doesn't show divider because it will be time to change from Action Bar Compatibility to ActionBarSherlock in my all Projects.
When i saw the Android Source i found that Divider will be show only when it has text as shown below (from ActionMenuItemView)
public boolean needsDividerBefore() {
return hasText() && mItemData.getIcon() == null;
}
public boolean needsDividerAfter() {
return hasText();
}
Is there a way that I can give my Implementation for ActionMenuItemView for ActionBar where needsDividerBefore() will always give true
I found an answer by myself with help of http://android-developers.blogspot.in/2011/04/customizing-action-bar.html However, this does not completely solve my problem. It adds a divider for Title, and also one for the home Icon. There are also left and right separators. That too is adjustable.
I added android:selectableItemBackground to my theme.
<item name="android:selectableItemBackground">#drawable/action_bar_item_selector</item>
action_bar_item_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/actionbar_compat_separator"></item>
<item android:left="1dp" android:drawable="#drawable/actionbar_compat_item"></item>
</layer-list>
actionbar_compat_separator - is my seperator drawable
and actionbar_compat_item is my selector for action bar item.
EDITED
I have found a better solution to my problem. It works well.
<item name="android:actionButtonStyle">#style/ActionButton</item> to my Theme
<style name="ActionButton" parent="android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#drawable/action_bar_item_selector</item>
</style>
You can override existing theme with custom styles, for e.g.
<style name="CustomTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
</style>
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/action_bar_background</item>
<item name="android:showDividers">beginning</item>
<item name="android:divider">#color/action_bar_divider</item>
</style>
Update: This doesn't seem to work for Android 5 Lollipop and above:
This is the best way I found. Just add a group with a dummy item to your menu:
menu.xml
<group>
<!--dummy item to get a nice separator-->
<item
android:title=""
android:showAsAction="always"
android:enabled="false" />
</group>
<item android:id="#+id/action_example"
...
The dummy item has an empty title so it appears invisible, and it's disabled so it can't be clicked.

Action bar with text in the middle of it that is clickable

I am trying to do in my app that i will have a clickable text in the middle of the actionbar like the whatsapp app have ,
In this picture you will see in the actionbar it got details of the person and its clickable , that is the exactly thing i am looking for
I saw that i can add subtitles and ofcourse the main title of the actionbar but i didnt seem to find a good result for that exact thing
Thanks heads up :)
Add TextView as CustomView that will mimic the plain title and at the same time clickable, instead putting it with setTitle(). Add click listener to the TextView before you supply it to the ActionBar. Don't forget to stretch to the size of the ActionBar.
Hope this idea helps.
Edit:
To get the same appearance in terms of size of text of the title and subtitle look at styles.xml
<style name="TextAppearance.Widget.ActionBar.Title"
parent="#android:style/TextAppearance.Medium">
</style>
<style name="TextAppearance.Widget.ActionBar.Subtitle"
parent="#android:style/TextAppearance.Small">
</style>
<style name="TextAppearance.Medium">
<item name="android:textSize">18sp</item>
</style>
<style name="TextAppearance.Small">
<item name="android:textSize">14sp</item>
<item name="android:textColor">?textColorSecondary</item>
</style>
use this way:
ActionBar action = getSupportActionBar();
action.setHomeButtonEnabled(true);
action.setDisplayShowTitleEnabled(true);
action.setTitle("Title");
action.setSubtitle("Sub title");
action.setIcon(getResources().getDrawable(R.drawable.ic_launcher));
for < 11 Android API use actionbarsherlock
or you can also use custom layout for actionbar and actionbar item click.
https://stackoverflow.com/a/7981633/1168654

Changing sub-menu text size and color in Sherlock action bar android

I am developing small android application in which I am using Sherlock action bar. In my action bar i am using sub-menu. Every thing is working fine only problem is that i am not able to override style of that sub-menu text.I want to change color and text of sub menu title and drop down list text color and size. I tried this in following way ...
// displaying sub menu
SubMenu subMenu1 = menu.addSubMenu("Coupons");
subMenu1.add("Co1");
subMenu1.add("co2");
subMenu1.add("co3");
MenuItem subMenu1Item = subMenu1.getItem();
//subMenu1Item.setIcon(R.drawable.fb_br);
subMenu1Item.setTitle("Cards");
subMenu1Item.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
and I tried to override style of text in style.xml like in this way
<style name="AppTheme" parent="#style/Theme.Sherlock.Light">
<item name="android:dropDownListViewStyle">#style/MyDropDownListView</item></style>
<style name="MyDropDownListView" parent="android:style/Widget.ListView.DropDown">
<item name="android:textColor">#FFFFFF</item>
</style>
But its not working for. Am I doing some thing wrong?.. How do this.. Need help .. thank you ..
Custom define a theme like
<style name="Theme.MyTheme" parent="Theme.Sherlock.Light">
<item name="android:actionMenuTextColor">#color/white</item>
</style>
This could change the menu item's color.
Or adding them in custom view xml for action bar.

ActionBar Divider Styling

I have two questions. Before detailing these questions, I want to add I'm using ActionBarSherlock.
The first question would be that I am having issues with adding a divider between ActionItems in my ActionBar. In the printscreen, there are 3 dividers, for instance the first one is between the back button and Check In.
I customized my ActionBar using the style below. However, the drawable called small_detail_divider does not show up. I also tried adding this divider programmatically, using the setBackgroundSplitDrawable(). That did not help either. What should I do to add divider between those ActionItems?
<style name="Theme.Example" parent="Theme.Sherlock">
<item name="actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="absForceOverflow">true</item>
</style>
<style name="Widget.Styled.ActionBar" parent="Widget.Sherlock.ActionBar.Solid">
<item name="background">#drawable/top_panel_background</item>
<item name="icon">#drawable/application_logo</item>
<item name="backgroundSplit">#drawable/small_detail_divider</item>
<item name="android:background">#drawable/top_panel_background</item>
<item name="android:icon">#drawable/application_logo</item>
<item name="android:backgroundSplit">#drawable/small_detail_divider</item>
</style>
Another question would be: I want to add action items in the same manner as they are added within the printscreen. When I add the action items, they are always added to the right of the ActionBar. How can I add an action item to the left of the ActionBar such as the Back Button in the printscreen? Any suggestion would help.
the attribute you are looking for is:
<style name="Theme.Example" parent="Theme.Sherlock">
<item name="actionBarDivider">#drawable/small_detail_divider</item>
....
<item name="android:actionBarDivider">#drawable/small_detail_divider</item>
...
</style>
Just to give you some more info.
The split ActionBar should be set with:
<style name="Theme.Example" parent="Theme.Sherlock">
<item name="actionBarSplitStyle">#style/Widget.Styled.ActionBarSplit</item>
<item name="android:actionBarSplitStyle">#style/Widget.Styled.ActionBarSplit</item>
...
Then provide your custom style for the split action bar..
Thrid question: Adding in order:
When you add the menu item pragmatically use: Menu
menu.add (0, R.id.menu_new_ab_item, 0, "Item");
The order determines how you order your menu items.
You can be more specific in your menu.xml files android:orderInCategory="1..n" can be any int. I normally start at 10 or so, so I can inflate items in-front of the standard items.

ActionBar MenuItem Divider

Is there a way to show Divider between the Menu Items in ActionBar for HoneyComb+.
Some post says that the Divider will be shown only when the menu items has android:showAsAction="withText".
I want to show only the Icon not the Text.
I successfully shown Divider for Pre-HoneyComb by implementing a Action Bar Compatibility.
I dont want to use ActionBarSherlock as given in this post Android actionbar sherlok doesn't show divider because it will be time to change from Action Bar Compatibility to ActionBarSherlock in my all Projects.
When i saw the Android Source i found that Divider will be show only when it has text as shown below (from ActionMenuItemView)
public boolean needsDividerBefore() {
return hasText() && mItemData.getIcon() == null;
}
public boolean needsDividerAfter() {
return hasText();
}
Is there a way that I can give my Implementation for ActionMenuItemView for ActionBar where needsDividerBefore() will always give true
I found an answer by myself with help of http://android-developers.blogspot.in/2011/04/customizing-action-bar.html However, this does not completely solve my problem. It adds a divider for Title, and also one for the home Icon. There are also left and right separators. That too is adjustable.
I added android:selectableItemBackground to my theme.
<item name="android:selectableItemBackground">#drawable/action_bar_item_selector</item>
action_bar_item_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/actionbar_compat_separator"></item>
<item android:left="1dp" android:drawable="#drawable/actionbar_compat_item"></item>
</layer-list>
actionbar_compat_separator - is my seperator drawable
and actionbar_compat_item is my selector for action bar item.
EDITED
I have found a better solution to my problem. It works well.
<item name="android:actionButtonStyle">#style/ActionButton</item> to my Theme
<style name="ActionButton" parent="android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#drawable/action_bar_item_selector</item>
</style>
You can override existing theme with custom styles, for e.g.
<style name="CustomTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
</style>
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/action_bar_background</item>
<item name="android:showDividers">beginning</item>
<item name="android:divider">#color/action_bar_divider</item>
</style>
Update: This doesn't seem to work for Android 5 Lollipop and above:
This is the best way I found. Just add a group with a dummy item to your menu:
menu.xml
<group>
<!--dummy item to get a nice separator-->
<item
android:title=""
android:showAsAction="always"
android:enabled="false" />
</group>
<item android:id="#+id/action_example"
...
The dummy item has an empty title so it appears invisible, and it's disabled so it can't be clicked.

Categories

Resources