MenuItem - change colour, text and set a divider - android

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.

Related

How to change search icon color in my android project?

I have added search icon in menu folder and created menu.xml file for that. Here I created custom search icon with light green color from Android Image Asset.
When I added this light green color search icon in drawable and run the project, it coming with white color. And search hint and search text also coming in white.
Since I have white action bar, these all search icons are not at all visible. Please help to correct this.
I have created a menu.xml file for search icon and also added search icon with light green color in drawable folders. I am using Theme.AppCompat.Light.DarkActionBar and my action bar color it set it to white.
Styles.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="titleTextColor">#color/titleColor</item>
<item name="colorControlNormal">#color/colorAccent</item>
menu.xml file :
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_search"
android:icon="#drawable/ic_action_search"
app:showAsAction="always"
app:actionViewClass="android.support.v7.widget.SearchView"
android:title="#string/search_string" />
<!--<item
android:id="#+id/action_settings"
android:title="Settings"/>-->
</menu>
Activity code :
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
MenuItem item = menu.findItem(R.id.action_search);
//additonal code
return super.onCreateOptionsMenu(menu);
I want custom color search icon only to be displayed in white action bar instead of white color search icon(now displaying). And search query search hint in black color. Please help...
what worked for me is setting foreground. that changes icon color of the searchview.
<style name="MySearchViewTheme" parent="Widget.AppCompat.SearchView">
<item name="android:background">#color/grey_dark</item>
<!-- Changes icons color -->
<item name="android:colorForeground">#color/grey_400</item>
</style>
The best option would be to use custom layout for items in the menu.
Also you can try to follow this article
You need to use android.support.v7.widget.SearchView :
<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
<!-- Gets rid of the search icon -->
<item name="searchIcon">#drawable/ic_search</item>
<!-- Gets rid of the "underline" in the text -->
<item name="queryBackground">#color/white</item>
<!-- Gets rid of the search icon when the SearchView is expanded -->
<item name="searchHintIcon">#null</item>
<!-- The hint text that appears when the user has not typed anything -->
<item name="queryHint">#string/search_hint</item>
</style>

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.

Issues with ActionBar

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.

Styling Sherlock Action Bar drop down items

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).

Android 3.0: cannot style Action Bar 's action item buttons

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.

Categories

Resources