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