Here is the dev guide related to the subject http://developer.android.com/guide/topics/ui/actionbar.html#ActionItems
So we have in activity
public class MyActivity extends Activity {
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
super.onCreateOptionsMenu(menu);
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.my_menu, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item)
{
switch (item.getItemId())
{
case R.id.first_menu_button:
return true;
case R.id.second_menu_button:
return true;
default:
return super.onOptionsItemSelected(item);
}
}
Where R.menu.my_menu is
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/first_menu_button"
android:showAsAction="always"
android:icon="#drawable/btn_first"/>
<item
android:id="#+id/second_menu_button"
android:showAsAction="always"
android:icon="#drawable/btn_second"/>
</menu>
To style that buttons http://developer.android.com/guide/topics/ui/actionbar.html#ActionItemStyles say we should use android:actionButtonStyle attribute. I've done it like this:
In manifest:
<activity android:name="com.root.test.MyActivity"
android:theme="#style/CustomActionBarStyle"
</activity>
In styles.xml:
<style name="CustomActionBarStyle" parent="#android:style/Theme.Holo.Light">
<item name="android:actionButtonStyle">#style/customActionButtonStyle</item>
<item name="android:windowActionBar">true</item>
<item name="android:windowNoTitle">false</item>
</style>
<style name="customActionButtonStyle" parent="#android:style/Widget.Holo.Light.ActionButton">
<item name="android:[...]
</style>
Problem is that whatever I write in customActionButtonStyle, it's just ignoring it. Other atributes in CustomActionBarStyle works (even more complicated, they are jast omit for the sake of simplicity). My main purpuse was to set custom padding. Is there any other way to do that, like some other, not android:actionButtonStyle attribute? Or some one knows how to get this work? (android:abItemPadding attribute added only in 3.1)
Thanks.
If you wanna change text parametres like text size, color or style, you must use actionMenuTextAppearance. Here is my code for ActionBarSherlock:
<item name="actionMenuTextAppearance">#style/MyProject.ActionMenuTextAppearance</item>
<item name="android:actionMenuTextAppearance">#style/MyProject.ActionMenuTextAppearance</item>
...
<style name="MyProject.ActionMenuTextAppearance" parent="TextAppearance.Sherlock.Widget.ActionBar.Menu">
<item name="android:textSize">15sp</item>
<item name="android:textStyle">normal</item>
<item name="android:textAllCaps">false</item>
</style>
EDIT: This is my template for styling action bar with ActionBarSherlock: https://github.com/petrnohejl/Android-Templates-And-Utilities/tree/master/Res-Theme-Holo-Deprecated
Most style elements will work but padding is supplied by the system layouts used to generate the action buttons and likely will not do what you expect. Most action bar metrics such as padding and margins should generally be left alone for UX consistency. Even the item padding attribute you noted is meant to be informational for apps that may want to use it to style their own custom action views.
Related
I have a problem with an inflated menu. What I want is to change the background colou, the text of the items and to set a divider between the items. I read a lot of the comments and tried different ways (hacks/selectors) but nothing has worked so far.
Here is the menu's calling:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
Menu currentActionViewMenu = menu;
return true;
}
In the style I tried inserting these items
<item name="android:background">#color/gray_600</item>
<item name="android:itemBackground">#color/gray_400</item>
<item name="android:itemTextAppearance">#color/black_90</item>
but the result still is far from the desired. Thanks!
inside your style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:itemBackground">#color/colorPrimary</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:dividerHeight">0.4dp</item>
</style>
as shown above android:itemBackground change the item background color , android:dividerHeight add a divider and android:textColor change the text color
Result
Thank you,Manish, this is the result out of your suggestion.
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.
I'm having two issues using the V7 support version of Action Bar Activity.
This is what my application looks like:
And this is how I want it to look:
The first issues is that the text apart from the title is showing up black instead of grey.
I'm using the Display Home As Up Enabled option, but you can't see the arrow because its black on a black background as shown above (the arrow is there if you look really hard!)
This is the style I'm using for the actionbar - I'm fairly sure I'm doing something wrong here, but I can't figure out what:
<style name="PropertyCrossTheme" parent="#style/Theme.AppCompat.Light">
<!-- Any customizations for your app running on pre-3.0 devices here -->
<item name="android:actionBarStyle">#style/ActionBar</item>
<item name="android:actionMenuTextAppearance">#style/ActionBar.MenuTextStyle</item>
</style>
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/actionbar_background</item>
<item name="android:titleTextStyle">#style/ActionBar.TitleText</item>
</style>
<style name="ActionBar.TitleText" parent="#android:style/TextAppearance">
<item name="android:textColor">#android:color/white</item>
</style>
<style name="ActionBar.MenuTextStyle" parent="android:style/TextAppearance">
<item name="android:textColor">#android:color/white</item>
</style>
The second issue is that my add to favourite/remove from favourite option is always being pushed into hidden menu.
This is my menu xml:
<item android:id="#+id/favourites_add_item" android:title="#string/favourites_add"
android:icon="#drawable/nostar" android:showAsAction="always|withText" />
<item android:id="#+id/favourites_remove_item" android:title="#string/favourites_remove"
android:icon="#drawable/star" android:showAsAction="always|withText" />
And in code I'm adding the menu like this (I know it's c# - I'm using Xamarin, but I don't think that's the reason for the issue, so please just pretend it's java :-D):
public override bool OnCreateOptionsMenu(IMenu menu)
{
MenuInflater.Inflate(Resource.Menu.favourites_toggle, menu);
return true;
}
public override bool OnPrepareOptionsMenu(IMenu menu)
{
IMenuItem addItem = menu.FindItem(Resource.Id.favourites_add_item);
addItem.SetVisible(!IsFavourited);
IMenuItem removeItem = menu.FindItem(Resource.Id.favourites_remove_item);
removeItem.SetVisible(IsFavourited);
return true;
}
Thanks
Ross
In the menu xml, try removing "|withText", so it looks like:
<item android:id="#+id/favourites_add_item" android:title="#string/favourites_add"
android:icon="#drawable/nostar" android:showAsAction="always" />
<item android:id="#+id/favourites_remove_item" android:title="#string/favourites_remove"
android:icon="#drawable/star" android:showAsAction="always" />
You are using Support v7, hence you need to use:
app:showAsAction="always|withText"
instead of
android:showAsAction="always|withText"
app should be:
xmlns:app="http://schemas.android.com/apk/res-auto"
Note, that when using withText you are forcing it to show the text associated with the Menu item, you probably don't want if you only want that star to show.
i'm just looking for a solution in my simple 1-Activty-Project
How to get the actionbar in android?
if i use the following, everything works but not layouted:
actionBar = getActionBar();
[..] register viewpager, add tabs dynamically etc [...]
I could add layout parameters in java now..
But, i want to to define an .xml like this for my actionbar by function override onCreateOptionsMenu():
#override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_activity, menu);
return super.onCreateOptionsMenu(menu);
}
main_activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menu_main_activity"
android:icon="#drawable/logo"
android:title="#string/app_name"
android:showAsAction="ifRoom|withText" />
</menu>
If i do this combined i get my actionbar which is doubled... But how to do it the right way?
What am I doing wrong..?
You need to change how it looks by creating a style for it in values/styles like
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#drawable/bar</item>
<item name="android:textColor">#drawable/white</item>
</style>
Then create a custom application theme to use the actionbar
<style name="CustomActivityTheme" parent="#android:style/Theme.Holo.Light"> // this is telling the app to use your custom themes for the actionbar
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
or you can use.
ActionBar actionBar = getActionBar();
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(v);
after inflating the layout you want to use. Either way, you still override onCreateOptionsMenu() to get the functionality for your menu
I've been trying for a while to style the items in a drop down list I added to the Action Bar, but I can't come up with the right code.
I tried looking into the abs__styles.xml and abs__themes.xml in the SherlockActionBar project but none of the items I added to my project worked.
The way I'm creating the menus is the following:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Sharing icons
SubMenu submenu = menu.addSubMenu(null);
submenu.add(getResources().getString(R.string.twitter));
submenu.add(getResources().getString(R.string.facebook));
submenu.add(getResources().getString(R.string.email));
// Share button itself
MenuItem ShareButton = submenu.getItem();
ShareButton.setIcon(R.drawable.icon_share_triangle);
ShareButton.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
// Twitter submenu button
MenuItem TwitterItem = submenu.getItem(0);
TwitterItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
TwitterItem.setOnMenuItemClickListener(new OnMenuItemClickListener() {
public boolean onMenuItemClick(MenuItem item) {
setShareTwitterIntent();
return true;
}
});
...
}
I also tried taking a look at this post using the following code, but still no luck:
<!-- style the list navigation -->
<style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/ad_spinner_background_holo_light</item>
<item name="android:popupBackground">#drawable/ad_menu_dropdown_panel_holo_light</item>
<item name="android:dropDownSelector">#drawable/ad_selectable_background</item>
</style>
I just need to change the background color of the items in the drop down list.
Thanks a lot for your help!
EDIT:
I also tried this, and it still doesn't work:
<item name="android:actionDropDownStyle">#style/MyApp.DropDownNav</item>
<item name="actionDropDownStyle">#style/MyApp.DropDownNav</item>
...
<style name="MyApp.DropDownNav" parent="Widget.Sherlock.Light.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/sharing_panel</item>
</style>
I had the same problem and after a lot of head scratching - the sort of scratching like a dog with a bad case of fleas - I got it to work. This is with ABS 4.1 (90). The below code will change the background colour of the drop down item.
SomeActivity.java
Context context = ab.getThemedContext();
ArrayAdapter<CharSequence> list = ArrayAdapter.createFromResource(
context, R.array.map_activity_view_list,
R.layout.sherlock_spinner_item);
list.setDropDownViewResource(R.layout.sherlock_spinner_dropdown_item);
Note: You use R.layout.sherlock_spinner_item for the createFromResource and R.layout.sherlock_spinner_dropdown_item for the setDropDownViewResource.
This is what appears in the sample in the ABS source:
https://github.com/JakeWharton/ActionBarSherlock/blob/master/samples/demos/src/com/actionbarsherlock/sample/demos/ListNavigation.java
This is because the unselected dropdown in the action bar when is the sherlock_spinner_item layout and the actual dropdown items use the sherlock_spinner_dropdown_item layout which means the styles are different for each:
sherlock_spinner_item
android:spinnerItemStyle
spinnerItemStyle
sherlock_spinner_dropdown_item
android:spinnerDropDownItemStyle
spinnerDropDownItemStyle
Remember both styles are needed - android: prefixed styles for for the native ICS ActionBar and the style without the android: prefix is for the AcrionBarSherlock style on devices older than ICS.
res/values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.MyApp" parent="Theme.Sherlock.Light">
<!-- the text when loading -->
<!--
<item name="actionBarStyle">#style/Widget.MyApp.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.MyApp.ActionBar</item>
-->
<!-- the dropdown items -->
<item name="android:spinnerDropDownItemStyle">#style/MyApp.Widget.Holo.DropDownItem</item>
<item name="spinnerDropDownItemStyle">#style/MyApp.Widget.Holo.DropDownItem</item>
<!-- the action bar dropdown menu item -->
<!--
<item name="android:spinnerItemStyle">#style/MyApp.Widget.Holo.SpinnerItem</item>
<item name="spinnerItemStyle">#style/MyApp.Widget.Holo.SpinnerItem</item>
-->
</style>
<style name="Widget.MyApp.ActionBar" parent="Widget.Sherlock.Light.ActionBar">
<item name="titleTextStyle">#style/Widget.MyApp.TitleTextStyle</item>
<item name="android:titleTextStyle">#style/Widget.MyApp.TitleTextStyle</item>
</style>
<style name="Widget.MyApp.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#color/orange</item>
</style>
<style name="MyApp.Widget.Holo.DropDownItem" parent="Widget.Sherlock.Light.DropDownItem.Spinner">
<item name="android:background">#color/orange</item>
</style>
<style name="MyApp.Widget.Holo.SpinnerItem" parent="Widget.Sherlock.TextView.SpinnerItem">
<item name="android:background">#color/orange</item>
</style>
</resources>
res/values/color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="orange">#ffEf4f1f</color>
</resources>
Please mark as answer if this solves it for you. Thanks!
Links:
Browse styles:
https://github.com/JakeWharton/ActionBarSherlock/blob/master/actionbarsherlock/res/values/abs__styles.xml
Browse themes:
https://github.com/JakeWharton/ActionBarSherlock/blob/master/actionbarsherlock/res/values/abs__themes.xml
To change the background drawable of the menu item in Sherlock Action Bar (v4.1.0), use the following:
<style name="My_Theme" parent="Theme.Sherlock">
<item name="android:popupMenuStyle">#style/MyApp.PopupMenuStyle</item>
<item name="popupMenuStyle">#style/MyApp.PopupMenuStyle</item>
</style>
<style name="MyApp.PopupMenuStyle" parent="Widget.Sherlock.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_item_background</item>
</style>
hope this helps.
i used this, and its work for me
<style name="MyDropDownItem" parent="Widget.Sherlock.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/spinner_background_holo_light</item>
<item name="android:popupBackground">#color/actionbar_normal</item>
<item name="android:dropDownSelector">#drawable/list_selector_holo_light</item>
</style>
<style name="myTheme" parent="#style/Theme.Sherlock">
...
...
...
<item name="android:actionDropDownStyle">#style/MyDropDownItem</item>
<item name="actionDropDownStyle">#style/MyDropDownItem</item>
</style>
where,
"spinner_background_holo_light" and "list_selector_holo_light" are selectors
and
"actionbar_normal" drawable (image OR color)
I am not sure if this question has been answered in a satisfactory way, but I ran into this problem and did not find an answer that I liked. It seemed like I had a pretty standard configuration of ActionBarSherLock and using the drop down navigation gave me some bad results out of the box. Black text on a black background. I want to make the text white. Here is how I accomplished it:
For starters, my application's base theme extends Theme.Sherlock:
<style name="AppBaseTheme" parent="Theme.Sherlock">
</style>
My actual application theme AppTheme extends my base (I can't remember why I did this at the time, it is likely unnecessary).
<style name="AppTheme" parent="AppBaseTheme">
<item name="spinnerItemStyle">#style/SpinnerItemStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItemStyle</item>
</style>
I needed to override Widget.Sherlock.TextView.SpinnerItem and so as below:
<style name="SpinnerItemStyle" parent="Widget.Sherlock.TextView.SpinnerItem">
<item name="android:textAppearance">#style/TextAppearance.MySpinnerItem</item>
</style>
The reason for doing this was to access the TextApperance widget: TextAppearance.Sherlock.Widget.TextView.SpinnerItem
This was overridden as below:
<style name="TextAppearance.MySpinnerItem" parent="TextAppearance.Sherlock.Widget.TextView.SpinnerItem">
<item name="android:textColor">#FFFFFF</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">normal</item>
</style>
My biggest mistake in tying to get the text in trying to fix this was trying to directly set textColor in the overridden SpinnerItemStyle. Since it used a textAppearance widget, it was just not working.
Then my code to make this work looks like this (in my activity's onCreate method):
SpinnerAdapter spinnerAdapter = ArrayAdapter.createFromResource(this,
R.array.call_type, R.layout.sherlock_spinner_item);
OnNavigationListener onNavigationListener = new OnNavigationListener() {
// Get the same strings provided for the drop-down's ArrayAdapter
String[] strings = getResources().getStringArray(R.array.call_type);
#Override
public boolean onNavigationItemSelected(int position, long itemId) {
String filter = strings[position];
filterCalls(filter);
return true;
}
};
ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
actionBar.setListNavigationCallbacks(spinnerAdapter,
onNavigationListener);
This allowed my to change the color of the text, on the spinner drop down using ActionBarSherlock.
ActionBarSherlock requires you to use one of its 3 themes. You can extend them though, and override the dropdown style, like this:
<style name="MySherlockLightTheme" parent="Theme.Sherlock.Light">
<item name="actionDropDownStyle">#style/MyDropDownNav</item>
</style>
This is assuming you want the holo light theme, and your dropdown style is MyDropDownDav.
Then in your code, you just switch to use your theme (either in the manifest, or do it in Activity's onCreate).