android action bar spacing between icons [duplicate] - android

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.

Related

Black Android ActionBar with Custom Image background

i'm in need to have custom image background with a logo, the problem is that backgound is white. I got it to work with this
<style name="CustomActionBarTheme"
parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/activity_grey</item>
<item name="actionMenuTextColor">#android:color/black</item>
<item name="android:actionMenuTextColor">#android:color/black</item>
<item name="android:itemTextAppearance">#style/TextAppearance</item>
Now my problem it this: My background color is WHITE and the settings dots on the right top corner are white as well.. How can i change those 3 dots from white color to black??? I spent the weekend trying different solution but nothing worked..
Remember, i need to keep the background image for my acitonBar (which already works) + i need to make that actionBar Settings icon in the dark colors..
Thanks!
ps. my temp workAround is that i'm using Grey background instead so the icon is somewhat visible, but that is not right..
Create a folder under res named menu and create main_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/menu_item"
android:icon="#drawable/ic_"
android:title="#string/menu_item"
app:showAsAction="always"/>
</menu>
Download item menu black/grey from here
https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/
or you can also your own icon and add it in your drawable
and this in main your Main Activity class
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main_menu, menu);
return true;
}
Hope this will help :)
Customize your Theme like this:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/app_color_Primary</item>
<item name="colorPrimaryDark">#color/app_color_primary_dark</item>
<item name="colorAccent">#color/app_color_accent</item>
</style>
And <item name="colorPrimary">#color/app_color_Primary</item> will render your ActionBar's background.

Showing dividers between menu items in android actionbar

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>

How to Style ActionBar, tab background on selected tab

I'm struggling with styling the ActionBar. My app has an ActionBar with three tabs. I'm trying to get the selected tab to have a background color, and the unselected tabs to show a different color. I'm following this reference: Customizing Action Bar. But all the TABs are showing the Selected color.
My styles.xml file is as follows:
<style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:background">#drawable/tab_background</item>
<item name="android:paddingLeft">32dp</item>
<item name="android:paddingRight">32dp</item>
</style>
<style name="MyActionBarTabBarStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:background">#drawable/red</item>
</style>
<style name="AppTheme.Light" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar.Light</item>
<item name="android:actionBarTabStyle">#style/MyActionBarTabStyle</item>
<item name="android:actionBarTabBarStyle">#style/MyActionBarTabBarStyle</item>
</style>
tab_background is just a 9 patch. I'm also not sure if I'm inheriting the action bar tab from the correct parent (parent="android:style/Widget.Holo.Light.ActionBar.TabBar). I've looked through the references & find it very difficult to understand the style hierarchy
Why wont my tabs show selected or no? Thanks in advance for your assistance.
I solved my problem. I didn't use State List Drawables initially. I used the background image directly instead of going via the StateListDrawable. Using StateListDrawable, you can set a different background based on whether the tag is selected or not.
So I added the file tab_background_select.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/tab_background" />
</selector>
and I referenced this from my styles.xml:
<item name="android:background">#drawable/tab_background_select</item>

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