apply custom theme in android preference - android

I want to do few things in my preference screen.
apply custom font to the title
change some icons of preference
change background color and font color when the preference is selected(or touched?)
First, I started with CheckBoxPreference.
to apply a custom font, I make myCheckBoxPreference.
public class MyCheckBoxPreference extends CheckBoxPreference {
public String robotoRegular = "fonts/Roboto-Regular.ttf";
public MyCheckBoxPreference(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public MyCheckBoxPreference(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyCheckBoxPreference(Context context) {
super(context);
}
#Override
protected View onCreateView(ViewGroup parent) {
View view = super.onCreateView(parent);
TextView titleView = (TextView) view.findViewById(android.R.id.title);
Typeface tf = Typeface.createFromAsset(view.getContext().getAssets(), robotoRegular);
titleView.setTypeface(tf);
return view;
}
}
and it works fine.
to change the checkbox image, I made a theme and apply it.
in my styles.xml
<style name="MyTheme" parent="Theme.Sherlock.Light">
<item name="android:checkboxStyle">#style/MyCheckbox</item>
</style>
<style name="MyCheckbox" parent="android:Widget.CompoundButton.CheckBox">
<item name="android:button">#drawable/btn_check</item>
</style>
to change the background color of preference list, I also made a theme and apply it.
<style name="MyTheme" parent="Theme.Sherlock.Light">
<item name="android:checkboxStyle">#style/MyCheckbox</item>
<item name="android:listViewStyle">#style/MyListView</item>
</style>
<style name="MyListView" parent="android:Widget.ListView.White">
<item name="android:listSelector">#drawable/list_selector_background</item>
</style>
it works all fine, too.
but I got stucked to change font dynamically.
I tried using theme
<style name="MyTheme" parent="Theme.Sherlock.Light">
<item name="android:textColorPrimary">#717171</item>
<item name="android:textColorPrimaryInverse">#FFFFFF</item>
<item name="android:textColorPrimaryDisableOnly">#dcdcdc</item>
</style>
but not worked.
and I tried using onTouchListener in MyCheckBoxPreference.
now onCreateView in MyCheckBoxPreference.java became as follow
#Override
protected View onCreateView(ViewGroup parent) {
View view = super.onCreateView(parent);
TextView titleView = (TextView) view.findViewById(android.R.id.title);
Typeface tf = Typeface.createFromAsset(view.getContext().getAssets(), robotoRegular);
titleView.setTypeface(tf);
titleView.setTextColor(0xFF717171);
view.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
TextView titleView = (TextView) v.findViewById(android.R.id.title);
int actionMasked = event.getActionMasked();
switch (actionMasked)
{
case MotionEvent.ACTION_DOWN:
{
titleView.setTextColor(0xFFFFFFFF);
break;
}
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
{
titleView.setTextColor(0xFF717171);
break;
}
default:
{
Log.d("MyCheckBoxPreference", "action" + event);
}
}
return false;
}
});
return view;
}
At first, it seemed to work but it has a problem.
if I touch an item and move my finger to another item, the font color remains white(0xFFFFFFFF).
In that code, the title text color sets first #717171 in onCreateView. When the list item is selected the color changed in onTouch with MotionEvent.ACTION_DOWN. And I expected when I unselect the item MotionEvent.ACTION_UP or MotionEvent.ACTION_CANCEL make the font color to #717171. However, when I unselect the item, the font color is changed in the onCreateView. I think because the preference is changed, the system wants to create the view again.
This works only when preference is toggled. As I mentioned above when I touch an item and move my finger to another item, the font color remains white because preference status remains unchanged and MotionEvent.ACTION_CANCEL is not reached.
If I return true in OnTouchListener MotionEvent.ACTION_UP and MotionEvent.ACTION_CANCEL are reached but it consumes the event and background color is not changed.
This is my story to come to here.
I apply styles in ListView by making custom list_item.xml and set textColor with my listview_item_selector.xml But in the preference, it uses default ListView, so I don't know how to do it.
What should I do? Do I have to customize all the preferences?
Any suggestions would be great. Thanks.

Related

How to style the child view of a LinearLayout from the LinearLayout's own style?

Sorry for the possibly confusing title
So I'm using ViewPagerIndicator, which is a library commonly used for tabs before TabLayout was released in 5.0. In this library, tabs are views that extend TextView, that accepted a custom attribute for styling.
//An inner class of TabPageLayout
private class TabView extends TextView {
private int mIndex;
public TabView(Context context) {
super(context, null, R.attr.vpiTabPageIndicatorStyle); //<--custom attribute
}
// ...
}
vpi__attrs.xml
<resources>
<declare-styleable name="ViewPagerIndicator">
...
<!-- Style of the tab indicator's tabs. -->
<attr name="vpiTabPageIndicatorStyle" format="reference"/>
</declare-styleable>
...
With this setup, when I used TabPageLayout in my own project, I could define the style of the text like this
<!--This is styles.xml of my project -->
<style name="MyStyle.Tabs" parent="MyStyle" >
<item name="vpiTabPageIndicatorStyle">#style/CustomTabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator">
<item name="android:gravity">center</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">#dimen/secondary_text_size</item>
...
</style>
The following style would be applied to the Activity, and it would override the default vpiTabPageIndicator in the ViewPagerIndicator library.
My problem now is that I needed to make more customization to TabView than a TextView would allow, so I created a new inner class called "TabLayoutWithIcon" that extends LinearLayout and includes a TextView.
private class TabViewWithIcon extends LinearLayout {
private int mIndex;
private TextView mText;
public TabViewWithIcon(Context context) {
super(context, null, R.attr.vpiTabPageIndicatorStyle);
//setBackgroundResource(R.drawable.vpi__tab_indicator);
mText = new TextView(context);
}
...
public void setText(CharSequence text){
mText.setText(Integer.toString(mIndex) + " tab");
addView(mText);
}
public void setImage(int iconResId){
mText.setCompoundDrawablesWithIntrinsicBounds(iconResId, 0, 0, 0);
mText.setCompoundDrawablePadding(8); //Just temporary
}
Now the same custom style is being applied to a LinearLayout, but I also want to style the child TextView. How can I do this?
Of course, I could also just pass in a style for the TextView programatically inside TabViewWithIcon,like
mText.setTextAppearance(context, R.style.CustomTabTextStyle);
but then I would have to write my custom style inside the library, which I shouldn't be doing.
Do I need to redefine some attributes or something? Am I approaching this incorrectly?
Im an idiot, I just have pass the custom TextView style into the TextView
public TabView(Context context) {
super(context, null, R.attr.vpiTabPageIndicatorStyle);
//setBackgroundResource(R.drawable.vpi__tab_indicator);
mText = new TextView(context, null, R.attr.vpiTabPageIndicatorStyle);
}

How to _really_ programmatically change primary and accent color in Android Lollipop?

First of all, this question asks a very similar question. However, my question has a subtle difference.
What I'd like to know is whether it is possible to programmatically change the colorPrimary attribute of a theme to an arbitrary color?
So for example, we have:
<style name="AppTheme" parent="android:Theme.Material.Light">
<item name="android:colorPrimary">#ff0000</item>
<item name="android:colorAccent">#ff0000</item>
</style>
At runtime, the user decides he wants to use #ccffff as a primary color. Ofcourse there's no way I can create themes for all possible colors.
I don't mind if I have to do hacky stuff, like relying on Android's private internals, as long as it works using the public SDK.
My goal is to eventually have the ActionBar and all widgets like a CheckBox to use this primary color.
Themes are immutable, you can't.
I read the comments about contacts app and how it use a theme for each contact.
Probably, contacts app has some predefine themes (for each material primary color from here: http://www.google.com/design/spec/style/color.html).
You can apply a theme before a the setContentView method inside onCreate method.
Then the contacts app can apply a theme randomly to each user.
This method is:
setTheme(R.style.MyRandomTheme);
But this method has a problem, for example it can change the toolbar color, the scroll effect color, the ripple color, etc, but it cant change the status bar color and the navigation bar color (if you want to change it too).
Then for solve this problem, you can use the method before and:
if (Build.VERSION.SDK_INT >= 21) {
getWindow().setNavigationBarColor(getResources().getColor(R.color.md_red_500));
getWindow().setStatusBarColor(getResources().getColor(R.color.md_red_700));
}
This two method change the navigation and status bar color.
Remember, if you set your navigation bar translucent, you can't change its color.
This should be the final code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTheme(R.style.MyRandomTheme);
if (Build.VERSION.SDK_INT >= 21) {
getWindow().setNavigationBarColor(getResources().getColor(R.color.myrandomcolor1));
getWindow().setStatusBarColor(getResources().getColor(R.color.myrandomcolor2));
}
setContentView(R.layout.activity_main);
}
You can use a switch and generate random number to use random themes, or, like in contacts app, each contact probably has a predefine number associated.
A sample of theme:
<style name="MyRandomTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/myrandomcolor1</item>
<item name="colorPrimaryDark">#color/myrandomcolor2</item>
<item name="android:navigationBarColor">#color/myrandomcolor1</item>
</style>
You can use Theme.applyStyle to modify your theme at runtime by applying another style to it.
Let's say you have these style definitions:
<style name="DefaultTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/md_lime_500</item>
<item name="colorPrimaryDark">#color/md_lime_700</item>
<item name="colorAccent">#color/md_amber_A400</item>
</style>
<style name="OverlayPrimaryColorRed">
<item name="colorPrimary">#color/md_red_500</item>
<item name="colorPrimaryDark">#color/md_red_700</item>
</style>
<style name="OverlayPrimaryColorGreen">
<item name="colorPrimary">#color/md_green_500</item>
<item name="colorPrimaryDark">#color/md_green_700</item>
</style>
<style name="OverlayPrimaryColorBlue">
<item name="colorPrimary">#color/md_blue_500</item>
<item name="colorPrimaryDark">#color/md_blue_700</item>
</style>
Now you can patch your theme at runtime like so:
getTheme().applyStyle(R.style.OverlayPrimaryColorGreen, true);
The method applyStylehas to be called before the layout gets inflated! So unless you load the view manually you should apply styles to the theme before calling setContentView in your activity.
Of course this cannot be used to specify an arbitrary color, i.e. one out of 16 million (2563) colors. But if you write a small program that generates the style definitions and the Java code for you then something like one out of 512 (83) should be possible.
What makes this interesting is that you can use different style overlays for different aspects of your theme. Just add a few overlay definitions for colorAccent for example. Now you can combine different values for primary color and accent color almost arbitrarily.
You should make sure that your overlay theme definitions don't accidentally inherit a bunch of style definitions from a parent style definition. For example a style called AppTheme.OverlayRed implicitly inherits all styles defined in AppTheme and all these definitions will also be applied when you patch the master theme. So either avoid dots in the overlay theme names or use something like Overlay.Red and define Overlay as an empty style.
I've created some solution to make any-color themes, maybe this can be useful for somebody. API 9+
1. first create "res/values-v9/" and put there this file: styles.xml
and regular "res/values" folder will be used with your styles.
2. put this code in your res/values/styles.xml:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#000</item>
<item name="colorPrimaryDark">#000</item>
<item name="colorAccent">#000</item>
<item name="android:windowAnimationStyle">#style/WindowAnimationTransition</item>
</style>
<style name="AppThemeDarkActionBar" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#000</item>
<item name="colorPrimaryDark">#000</item>
<item name="colorAccent">#000</item>
<item name="android:windowAnimationStyle">#style/WindowAnimationTransition</item>
</style>
<style name="WindowAnimationTransition">
<item name="android:windowEnterAnimation">#android:anim/fade_in</item>
<item name="android:windowExitAnimation">#android:anim/fade_out</item>
</style>
</resources>
3. in to AndroidManifest:
<application android:theme="#style/AppThemeDarkActionBar">
4. create a new class with name "ThemeColors.java"
public class ThemeColors {
private static final String NAME = "ThemeColors", KEY = "color";
#ColorInt
public int color;
public ThemeColors(Context context) {
SharedPreferences sharedPreferences = context.getSharedPreferences(NAME, Context.MODE_PRIVATE);
String stringColor = sharedPreferences.getString(KEY, "004bff");
color = Color.parseColor("#" + stringColor);
if (isLightActionBar()) context.setTheme(R.style.AppTheme);
context.setTheme(context.getResources().getIdentifier("T_" + stringColor, "style", context.getPackageName()));
}
public static void setNewThemeColor(Activity activity, int red, int green, int blue) {
int colorStep = 15;
red = Math.round(red / colorStep) * colorStep;
green = Math.round(green / colorStep) * colorStep;
blue = Math.round(blue / colorStep) * colorStep;
String stringColor = Integer.toHexString(Color.rgb(red, green, blue)).substring(2);
SharedPreferences.Editor editor = activity.getSharedPreferences(NAME, Context.MODE_PRIVATE).edit();
editor.putString(KEY, stringColor);
editor.apply();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) activity.recreate();
else {
Intent i = activity.getPackageManager().getLaunchIntentForPackage(activity.getPackageName());
i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
activity.startActivity(i);
}
}
private boolean isLightActionBar() {// Checking if title text color will be black
int rgb = (Color.red(color) + Color.green(color) + Color.blue(color)) / 3;
return rgb > 210;
}
}
5. MainActivity:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
new ThemeColors(this);
setContentView(R.layout.activity_main);
}
public void buttonClick(View view){
int red= new Random().nextInt(255);
int green= new Random().nextInt(255);
int blue= new Random().nextInt(255);
ThemeColors.setNewThemeColor(MainActivity.this, red, green, blue);
}
}
To change color, just replace Random with your RGB, Hope this helps.
There is a complete example: ColorTest.zip
You can have a look at this GitHub project from Rumit Patel.
I used the Dahnark's code but I also need to change the ToolBar background:
if (dark_ui) {
this.setTheme(R.style.Theme_Dark);
if (Build.VERSION.SDK_INT >= 21) {
getWindow().setNavigationBarColor(getResources().getColor(R.color.Theme_Dark_primary));
getWindow().setStatusBarColor(getResources().getColor(R.color.Theme_Dark_primary_dark));
}
} else {
this.setTheme(R.style.Theme_Light);
}
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.app_bar);
if(dark_ui) {
toolbar.setBackgroundColor(getResources().getColor(R.color.Theme_Dark_primary));
}
You can change define your own themes, or customize existing android themes in res > values > themes, find where it says primary color and point it to the color defined in color.xml you want
<style name="Theme.HelloWorld" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/my_color</item>
<item name="colorPrimaryVariant">#color/my_color</item>
<item name="colorOnPrimary">#color/white</item>
from an activity you can do:
getWindow().setStatusBarColor(i color);
You cannot change the color of colorPrimary, but you can change the theme of your application by adding a new style with a different colorPrimary color
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
</style>
<style name="AppTheme.NewTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorOne</item>
<item name="colorPrimaryDark">#color/colorOneDark</item>
</style>
and inside the activity set theme
setTheme(R.style.AppTheme_NewTheme);
setContentView(R.layout.activity_main);
USE A TOOLBAR
You can set a custom toolbar item color dynamically by creating a custom toolbar class:
package view;
import android.app.Activity;
import android.content.Context;
import android.graphics.ColorFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;
import android.support.v7.internal.view.menu.ActionMenuItemView;
import android.support.v7.widget.ActionMenuView;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AutoCompleteTextView;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
public class CustomToolbar extends Toolbar{
public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// TODO Auto-generated constructor stub
}
public CustomToolbar(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public CustomToolbar(Context context) {
super(context);
// TODO Auto-generated constructor stub
ctxt = context;
}
int itemColor;
Context ctxt;
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
Log.d("LL", "onLayout");
super.onLayout(changed, l, t, r, b);
colorizeToolbar(this, itemColor, (Activity) ctxt);
}
public void setItemColor(int color){
itemColor = color;
colorizeToolbar(this, itemColor, (Activity) ctxt);
}
/**
* Use this method to colorize toolbar icons to the desired target color
* #param toolbarView toolbar view being colored
* #param toolbarIconsColor the target color of toolbar icons
* #param activity reference to activity needed to register observers
*/
public static void colorizeToolbar(Toolbar toolbarView, int toolbarIconsColor, Activity activity) {
final PorterDuffColorFilter colorFilter
= new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.SRC_IN);
for(int i = 0; i < toolbarView.getChildCount(); i++) {
final View v = toolbarView.getChildAt(i);
doColorizing(v, colorFilter, toolbarIconsColor);
}
//Step 3: Changing the color of title and subtitle.
toolbarView.setTitleTextColor(toolbarIconsColor);
toolbarView.setSubtitleTextColor(toolbarIconsColor);
}
public static void doColorizing(View v, final ColorFilter colorFilter, int toolbarIconsColor){
if(v instanceof ImageButton) {
((ImageButton)v).getDrawable().setAlpha(255);
((ImageButton)v).getDrawable().setColorFilter(colorFilter);
}
if(v instanceof ImageView) {
((ImageView)v).getDrawable().setAlpha(255);
((ImageView)v).getDrawable().setColorFilter(colorFilter);
}
if(v instanceof AutoCompleteTextView) {
((AutoCompleteTextView)v).setTextColor(toolbarIconsColor);
}
if(v instanceof TextView) {
((TextView)v).setTextColor(toolbarIconsColor);
}
if(v instanceof EditText) {
((EditText)v).setTextColor(toolbarIconsColor);
}
if (v instanceof ViewGroup){
for (int lli =0; lli< ((ViewGroup)v).getChildCount(); lli ++){
doColorizing(((ViewGroup)v).getChildAt(lli), colorFilter, toolbarIconsColor);
}
}
if(v instanceof ActionMenuView) {
for(int j = 0; j < ((ActionMenuView)v).getChildCount(); j++) {
//Step 2: Changing the color of any ActionMenuViews - icons that
//are not back button, nor text, nor overflow menu icon.
final View innerView = ((ActionMenuView)v).getChildAt(j);
if(innerView instanceof ActionMenuItemView) {
int drawablesCount = ((ActionMenuItemView)innerView).getCompoundDrawables().length;
for(int k = 0; k < drawablesCount; k++) {
if(((ActionMenuItemView)innerView).getCompoundDrawables()[k] != null) {
final int finalK = k;
//Important to set the color filter in seperate thread,
//by adding it to the message queue
//Won't work otherwise.
//Works fine for my case but needs more testing
((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);
// innerView.post(new Runnable() {
// #Override
// public void run() {
// ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);
// }
// });
}
}
}
}
}
}
}
then refer to it in your layout file. Now you can set a custom color using
toolbar.setItemColor(Color.Red);
Sources:
I found the information to do this here: How to dynamicaly change Android Toolbar icons color
and then I edited it, improved upon it, and posted it here: GitHub:AndroidDynamicToolbarItemColor
This is what you CAN do:
write a file in drawable folder, lets name it background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="?attr/colorPrimary"/>
</shape>
then set your Layout's (or what so ever the case is) android:background="#drawable/background"
on setting your theme this color would represent the same.

Change ActionMode Overflow icon

Is there a way to change the ActionMode Overflow icon without changing the icon for the "normal" ActionBar?
I still need to figure out how to only change the Overflow-Icon inside of the ActionMode-Actionbar as I changed my Overflow-Icon in the default-Actionbar which is not visible in the ActionMode-Actionbar (and no, I don't want to change the background of my ActionMode-Actionbar!)
Okay.
Let's start with defining some styles. I will try and explain why we are defining them in this fashion:
// This is just your base theme. It will probably include a lot more stuff.
// We are going to define the style 'OverflowActionBar' next.
<style name="BaseTheme" parent="android:Theme.Holo.Light">
....
....
....
<item name="android:actionOverflowButtonStyle">#style/OverflowActionBar</item>
</style>
// Assigning a parent to this style is important - we will inherit two attributes -
// the background (state-selector) and the content description
<style name="OverflowActionBar" parent="#android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/overflow_menu_light</item>
</style>
// Next up is an extension to our 'BaseTheme'. Notice the parent here.
<style name="ChangeOverflowToDark" parent="#style/BaseTheme">
<item name="android:actionOverflowButtonStyle">#style/OverflowActionMode</item>
</style>
// One last thing is to define 'OverflowActionMode'. Again, we inherit useful
// attributes by assigning 'Widget.Holo.ActionButton.Overflow' as the parent.
<style name="OverflowActionMode" parent="#android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/overflow_menu_dark</item>
</style>
All our work with styles.xml is done. The very last bit happens at runtime. I suppose you already have an implementation of ActionMode.Callback.
In your activity, define a method - changeOverflowIcon():
public void changeOverflowIcon() {
getTheme().applyStyle(R.style.ChangeOverflowToDark, true);
}
You will be calling this method from onCreateActionMode(...) of your ActionMode.Callback implementation:
public class CustomActionModeCallback implements ActionMode.Callback {
#Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
changeOverflowIcon()
// other initialization
return true;
}
#Override
public boolean onPrepareActionMode(final ActionMode mode, Menu menu) {
return true;
}
#Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
return false;
}
#Override
public void onDestroyActionMode(ActionMode mode) {}
}
A bit of explanation:
The assignment in 'BaseTheme' is for the ActionBar. It will pick the drawable overflow_menu_light since we are assigning it in the base theme of your app.
getTheme().applyStyle(R.style.ChangeOverflowToDark, true)
The second argument true forces the current theme to override the old attributes with the new ones. Since we only define one attribute in ChangeOverflowToDark, its value is overwritten. The ActionBar is not affected because it has already used the old attribute. But, the action mode is yet to be created (it will be created when we return true from onCreateActionMode(...)). When the action mode checks for this attributes value, it gets the new one.
There's more...
The answer given by Manish is quite awesome. I could have never thought of using the content description to find the exact ImageButton. But what if you could find the ImageButton using a straightforward findViewById()?
Here's how you can:
First, we will need unique ids. If your project doesn't currently have a res/values/ids.xml file, create one. Add a new id to it:
<item type="id" name="my_custom_id" />
The setup I discussed above will remain the same. The only difference will be in OverflowActionMode style:
<style name="OverflowActionMode" parent="#android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/overflow_menu_dark</item>
<item name="android:id">#id/my_custom_id</item>
</style>
The id we defined above will be assigned to the ImageButton when we call getTheme().applyStyle(R.style.ChangeOverflowToDark, true);
I'll borrow the code snippet from Manish's answer here:
private ActionMode.Callback mCallback = new ActionMode.Callback()
{
#Override
public boolean onPrepareActionMode( ActionMode mode, Menu menu )
{
mDecorView.postDelayed(new Runnable() {
#Override
public void run() {
ImageButton btn = (ImageButton) mDecorView.findViewById(R.id.my_custom_id);
// Update the image here.
btn.setImageResource(R.drawable.custom);
}
}, 500); // 500 ms is quite generous // I would say that 50 will work just fine
return true;
}
}
Best of both worlds?
Let's say we need R.drawable.overflow_menu_light for ActionBar and R.drawable.overflow_menu_dark for ActionMode.
Styles:
<style name="BaseTheme" parent="android:Theme.Holo.Light">
....
....
....
<item name="android:actionOverflowButtonStyle">#style/OverflowActionMode</item>
</style>
<style name="OverflowActionMode" parent="#android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/overflow_menu_dark</item>
<item name="android:id">#id/my_custom_id</item>
</style>
As defined in our style, the ActionBar will pick R.drawable.overflow_menu_dark - but don't we need the light version for the ActionBar? Yes - we will assign that in the activity's onPrepareOptionsMenu(Menu) callback:
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
ImageButton ib = (ImageButton)
getWindow().getDecorView()
.findViewById(R.id.my_custom_id);
if (ib != null)
ib.setImageResource(R.drawable.overflow_menu_light);
}
}, 50L);
return super.onPrepareOptionsMenu(menu);
}
We are doing this here because before onPrepareOptionsMenu(Menu), the ImageButton would not have been created.
Now, we don't need to deal with ActionMode - because it will pick the dark drawable from the theme.
My apologies for this gigantic post. I really hope it helps.
ImageButton is the widget used to display the menu overflow. actionOverflowButtonStyle is used for styling the ImageButton. This styling is applied in ActionMenuPresenter.
private class OverflowMenuButton extends ImageButton implements ActionMenuChildView {
public OverflowMenuButton(Context context) {
super(context, null, com.android.internal.R.attr.actionOverflowButtonStyle);
...
}
}
ActionMenuPresenter class is used for building action menus both in action bar and action modes. Hence by overriding the theme files will apply same style in both modes. The only way to accomplish is it programatically as it is done here for the action bar.
Here is the code of how it can be done for action mode overflow icon. You can assign the drawable to the ImageButton in ActionMode.Callback.onPrepareActionMode method.
public class MainActivity extends Activity {
ViewGroup mDecorView;
public void onCreate(Bundle savedInstanceState) {
// Assign mDecorView to later use in action mode callback
mDecorView = (ViewGroup) getWindow().getDecorView();
}
private ActionMode.Callback mCallback = new ActionMode.Callback()
{
#Override
public boolean onPrepareActionMode( ActionMode mode, Menu menu )
{
// We have to update the icon after it is displayed,
// hence this postDelayed variant.
// This is what I don't like, but it is the only way to move forward.
mDecorView.postDelayed(new Runnable() {
#Override
public void run() {
ArrayList<View> outViews = new ArrayList<View>();
// The content description of overflow button is "More options".
// If you want, you can override the style and assign custom content
// description and use it here.
mDecorView.findViewsWithText(outViews, "More Options", View.FIND_VIEWS_WITH_CONTENT_DESCRIPTION);
if(!outViews.isEmpty()) {
View v = outViews.get(0);
if(v instanceof ImageButton) {
ImageButton btn = (ImageButton) v;
// Update the image here.
btn.setImageResource(R.drawable.custom);
}
}
}
}, 500);
return true;
}
}
}
You should be able to do that using styles:
ActionBarSherlock:
<style name="MyTheme" parent="Theme.Sherlock.Light">
<item name="actionOverflowButtonStyle">#style/MyTheme.OverFlow</item>
</style>
<style name="MyTheme.OverFlow" parent="Widget.Sherlock.ActionButton.Overflow">
<item name="android:src">#drawable/YOUR_ICON_GOES_HERE</item>
</style>
ActioBar:
<style name="MyTheme" parent="#android:style/Theme.Holo">
<item name="android:actionOverflowButtonStyle">#style/MyTheme.OverFlow</item>
</style>
<style name="MyTheme.OverFlow" parent="#android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/YOUR_ICON_GOES_HERE</item>
</style>
Make sure to set MyTheme in the manifest.
Is there a way to change the ActionMode Overflow icon without changing the icon for the "normal" ActionBar?
Regards how to change the overflow icon, I think there are many answers as above.
If you just want to change the color of the overflow icon, you can use a simple way.
<style name="BaseAppTheme" parent="Theme.xxxx.Light.NoActionBar.xxx">
...
<item name="actionOverflowButtonStyle">#style/ActionMode.OverFlow</item>
</style>
<style name="ActionMode.OverFlow" parent="#style/Widget.AppCompat.ActionButton.Overflow">
<item name="android:tint">#color/black</item> #or any color you want.#
</style>
It works for me. I investigated a bit, just check this screenshot http://prntscr.com/vqx1ov you will know the reason.
And I don't suggest to set the colour of colorControlNormal, it will change the color of "back arrow" and "overflow icon" on ActionBar.
In my case, I just want a different color of the three dots icon, and to achieve it, I set <item name="actionBarTheme">#style/Widget.ActionMode.ActionBar</item> in my theme, and Widget.ActionMode.ActionBar looks like below:
<style name="Widget.ActionMode.ActionBar" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="colorControlNormal">the color I want</item>
</style>

Android Theming Preference Dialog

I have an application that uses a preference activity to set some user settings. I been trying to figure this out all day. I am trying to theme the alert dialog when an user presses an Edit Text Preference object. A dialog opens up and the user can set the shared preference. The dialog pops up:
I want the text green. I want the divider green. The line and cursor green.
This is what I have so far.
<style name="CustomDialogTheme" parent="#android:style/Theme.Dialog">
<item name="android:background">#color/text_green</item>
<item name="android:textColor">#color/text_green</item>
</style>
Can someone point me in the right direction or maybe share some code. I am at lost. I've been surfing the net to find something most of the day. Thanks in advance.
If you don't want to create a custom layout or use a third party library, you can subclass EditTextPreference, then access each View you want to edit by using Resources.getIdentifier then using Window.findViewById. Here's a quick example.
public class CustomDialogPreference extends EditTextPreference {
public CustomDialogPreference(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public CustomDialogPreference(Context context, AttributeSet attrs) {
super(context, attrs);
}
/**
* {#inheritDoc}
*/
#Override
protected void showDialog(Bundle state) {
super.showDialog(state);
final Resources res = getContext().getResources();
final Window window = getDialog().getWindow();
final int green = res.getColor(android.R.color.holo_green_dark);
// Title
final int titleId = res.getIdentifier("alertTitle", "id", "android");
final View title = window.findViewById(titleId);
if (title != null) {
((TextView) title).setTextColor(green);
}
// Title divider
final int titleDividerId = res.getIdentifier("titleDivider", "id", "android");
final View titleDivider = window.findViewById(titleDividerId);
if (titleDivider != null) {
titleDivider.setBackgroundColor(green);
}
// EditText
final View editText = window.findViewById(android.R.id.edit);
if (editText != null) {
editText.setBackground(res.getDrawable(R.drawable.apptheme_edit_text_holo_light));
}
}
}
Implementation
Replace <EditTextPreference.../> with <path_to_CustomDialogPreference.../> in your xml.
Note
I used Android Holo Colors to create the background for the EditText.
You can build your custom layout for your own dialog theme using your own customized components or you can use external libs, for example android-styled-dialogs
So in this case use can customize dialogs as you want:
<style name="DialogStyleLight.Custom">
<!-- anything can be left out: -->
<item name="titleTextColor">#color/dialog_title_text</item>
<item name="titleSeparatorColor">#color/dialog_title_separator</item>
<item name="messageTextColor">#color/dialog_message_text</item>
<item name="buttonTextColor">#color/dialog_button_text</item>
<item name="buttonSeparatorColor">#color/dialog_button_separator</item>
<item name="buttonBackgroundColorNormal">#color/dialog_button_normal</item>
<item name="buttonBackgroundColorPressed">#color/dialog_button_pressed</item>
<item name="buttonBackgroundColorFocused">#color/dialog_button_focused</item>
<item name="dialogBackground">#drawable/dialog_background</item>
</style>

How to change the Text color of Menu item in Android?

Can I change the background color of a Menu item in Android?
Please let me know if anyone have any solution to this. The last option will be obviously to customize it but is there any way for changing the text color without customizing it.
One simple line in your theme :)
<item name="android:actionMenuTextColor">#color/your_color</item>
It seems that an
<item name="android:itemTextAppearance">#style/myCustomMenuTextAppearance</item>
in my theme and
<style name="myCustomMenuTextAppearance" parent="#android:style/TextAppearance.Widget.IconMenu.Item">
<item name="android:textColor">#android:color/primary_text_dark</item>
</style>
in styles.xml change the style of list-items but not menu items.
You can change the color of the MenuItem text easily by using SpannableString instead of String.
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
inflater.inflate(R.menu.your_menu, menu);
int positionOfMenuItem = 0; // or whatever...
MenuItem item = menu.getItem(positionOfMenuItem);
SpannableString s = new SpannableString("My red MenuItem");
s.setSpan(new ForegroundColorSpan(Color.RED), 0, s.length(), 0);
item.setTitle(s);
}
If you are using the new Toolbar, with the theme Theme.AppCompat.Light.NoActionBar, you can style it in the following way.
<style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorPrimary">#color/my_color1</item>
<item name="android:textColorSecondary">#color/my_color2</item>
<item name="android:textColor">#color/my_color3</item>
</style>`
According to the results I got,
android:textColorPrimary is the text color displaying the name of your activity, which is the primary text of the toolbar.
android:textColorSecondary is the text color for subtitle and more options (3 dot) button. (Yes, it changed its color according to this property!)
android:textColor is the color for all other text including the menu.
Finally set the theme to the Toolbar
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/ToolbarTheme"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"/>
I went about it programmatically like this:
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.changeip_card_menu, menu);
for(int i = 0; i < menu.size(); i++) {
MenuItem item = menu.getItem(i);
SpannableString spanString = new SpannableString(menu.getItem(i).getTitle().toString());
spanString.setSpan(new ForegroundColorSpan(Color.BLACK), 0, spanString.length(), 0); //fix the color to white
item.setTitle(spanString);
}
return true;
}
If you are using menu as <android.support.design.widget.NavigationView /> then just add below line in NavigationView :
app:itemTextColor="your color"
Also available colorTint for icon, it will override color for your icon as well. For that you have to add below line:
app:itemIconTint="your color"
Example:
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemTextColor="#color/color_white"
app:itemIconTint="#color/color_white"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"/>
Hope it will help you.
in Kotlin I wrote these extensions:
fun MenuItem.setTitleColor(color: Int) {
val hexColor = Integer.toHexString(color).toUpperCase().substring(2)
val html = "<font color='#$hexColor'>$title</font>"
this.title = html.parseAsHtml()
}
#Suppress("DEPRECATION")
fun String.parseAsHtml(): Spanned {
return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
Html.fromHtml(this, Html.FROM_HTML_MODE_LEGACY)
} else {
Html.fromHtml(this)
}
}
and used like this:
menu.findItem(R.id.main_settings).setTitleColor(Color.RED)
as you can see in this question you should:
<item name="android:textColorPrimary">yourColor</item>
Above code changes the text color of the menu action items for API >= v21.
<item name="actionMenuTextColor">#android:color/holo_green_light</item>
Above is the code for API < v21
I used the html tag to change a single item's text colour when the menu item is inflated. Hope it would be helpful.
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
menu.findItem(R.id.main_settings).setTitle(Html.fromHtml("<font color='#ff3824'>Settings</font>"));
return true;
}
SIMPLEST way to make custom menu color for single toolbar, not for AppTheme
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay.MenuBlue">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</android.support.design.widget.AppBarLayout>
usual toolbar on styles.xml
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
our custom toolbar style
<style name="AppTheme.AppBarOverlay.MenuBlue">
<item name="actionMenuTextColor">#color/blue</item>
</style>
I was using Material design and when the toolbar was on a small screen clicking the more options would show a blank white drop down box. To fix this I think added this to the main AppTheme:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:itemTextAppearance">#style/menuItem</item>
</style>
And then created a style where you set the textColor for the menu items to your desired colour.
<style name="menuItem" parent="Widget.AppCompat.TextView.SpinnerItem">
<item name="android:textColor">#color/black</item>
</style>
The parent name Widget.AppCompat.TextView.SpinnerItem I don't think that matters too much, it should still work.
to change menu item text color use below code
<style name="AppToolbar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:itemTextAppearance">#style/menu_item_color</item>
</style>
where
<style name="menu_item_color">
<item name="android:textColor">#color/app_font_color</item>
</style>
The short answer is YES. lucky you!
To do so, you need to override some styles of the Android default styles :
First, look at the definition of the themes in Android :
<style name="Theme.IconMenu">
<!-- Menu/item attributes -->
<item name="android:itemTextAppearance">#android:style/TextAppearance.Widget.IconMenu.Item</item>
<item name="android:itemBackground">#android:drawable/menu_selector</item>
<item name="android:itemIconDisabledAlpha">?android:attr/disabledAlpha</item>
<item name="android:horizontalDivider">#android:drawable/divider_horizontal_bright</item>
<item name="android:verticalDivider">#android:drawable/divider_vertical_bright</item>
<item name="android:windowAnimationStyle">#android:style/Animation.OptionsPanel</item>
<item name="android:moreIcon">#android:drawable/ic_menu_more</item>
<item name="android:background">#null</item>
</style>
So, the appearance of the text in the menu is in #android:style/TextAppearance.Widget.IconMenu.Item
Now, in the definition of the styles :
<style name="TextAppearance.Widget.IconMenu.Item" parent="TextAppearance.Small">
<item name="android:textColor">?textColorPrimaryInverse</item>
</style>
So now we have the name of the color in question, if you look in the color folder of the resources of the system :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:color="#android:color/bright_foreground_light_disabled" />
<item android:state_window_focused="false" android:color="#android:color/bright_foreground_light" />
<item android:state_pressed="true" android:color="#android:color/bright_foreground_light" />
<item android:state_selected="true" android:color="#android:color/bright_foreground_light" />
<item android:color="#android:color/bright_foreground_light" />
<!-- not selected -->
</selector>
Finally, here is what you need to do :
Override "TextAppearance.Widget.IconMenu.Item" and create your own style. Then link it to your own selector to make it the way you want.
Hope this helps you.
Good luck!
Options menu in android can be customized to set the background or change the text appearance. The background and text color in the menu couldn’t be changed using themes and styles. The android source code (data\res\layout\icon_menu_item_layout.xml)uses a custom item of class “com.android.internal.view.menu.IconMenuItem”View for the menu layout. We can make changes in the above class to customize the menu. To achieve the same, use LayoutInflater factory class and set the background and text color for the view.
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.my_menu, menu);
getLayoutInflater().setFactory(new Factory() {
#Override
public View onCreateView(String name, Context context, AttributeSet attrs) {
if (name .equalsIgnoreCase(“com.android.internal.view.menu.IconMenuItemView”)) {
try{
LayoutInflater f = getLayoutInflater();
final View view = f.createView(name, null, attrs);
new Handler().post(new Runnable() {
public void run() {
// set the background drawable
view .setBackgroundResource(R.drawable.my_ac_menu_background);
// set the text color
((TextView) view).setTextColor(Color.WHITE);
}
});
return view;
} catch (InflateException e) {
} catch (ClassNotFoundException e) {}
}
return null;
}
});
return super.onCreateOptionsMenu(menu);
}
Thanks for the code example.
I had to modify it go get it to work with a context menu.
This is my solution.
static final Class<?>[] constructorSignature = new Class[] {Context.class, AttributeSet.class};
class MenuColorFix implements LayoutInflater.Factory {
public View onCreateView(String name, Context context, AttributeSet attrs) {
if (name.equalsIgnoreCase("com.android.internal.view.menu.ListMenuItemView")) {
try {
Class<? extends ViewGroup> clazz = context.getClassLoader().loadClass(name).asSubclass(ViewGroup.class);
Constructor<? extends ViewGroup> constructor = clazz.getConstructor(constructorSignature);
final ViewGroup view = constructor.newInstance(new Object[]{context,attrs});
new Handler().post(new Runnable() {
public void run() {
try {
view.setBackgroundColor(Color.BLACK);
List<View> children = getAllChildren(view);
for(int i = 0; i< children.size(); i++) {
View child = children.get(i);
if ( child instanceof TextView ) {
((TextView)child).setTextColor(Color.WHITE);
}
}
}
catch (Exception e) {
Log.i(TAG, "Caught Exception!",e);
}
}
});
return view;
}
catch (Exception e) {
Log.i(TAG, "Caught Exception!",e);
}
}
return null;
}
}
public List<View> getAllChildren(ViewGroup vg) {
ArrayList<View> result = new ArrayList<View>();
for ( int i = 0; i < vg.getChildCount(); i++ ) {
View child = vg.getChildAt(i);
if ( child instanceof ViewGroup) {
result.addAll(getAllChildren((ViewGroup)child));
}
else {
result.add(child);
}
}
return result;
}
#Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {
LayoutInflater lInflater = getLayoutInflater();
if ( lInflater.getFactory() == null ) {
lInflater.setFactory(new MenuColorFix());
}
super.onCreateContextMenu(menu, v, menuInfo);
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.myMenu, menu);
}
For me this works with Android 1.6, 2.03 and 4.03.
i found it Eureka !!
in your app theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/ActionBarTheme</item>
<!-- backward compatibility -->
<item name="actionBarStyle">#style/ActionBarTheme</item>
</style>
here is your action bar theme:
<style name="ActionBarTheme" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/actionbar_bg_color</item>
<item name="popupTheme">#style/ActionBarPopupTheme</item
<!-- backward compatibility -->
<item name="background">#color/actionbar_bg_color</item>
</style>
and here is your popup theme:
<style name="ActionBarPopupTheme">
<item name="android:textColor">#color/menu_text_color</item>
<item name="android:background">#color/menu_bg_color</item>
</style>
Cheers ;)
Simply add this to your theme
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:itemTextAppearance">#style/AppTheme.ItemTextStyle</item>
</style>
<style name="AppTheme.ItemTextStyle" parent="#android:style/TextAppearance.Widget.IconMenu.Item">
<item name="android:textColor">#color/orange_500</item>
</style>
Tested on API 21
Thanks to max.musterman, this is the solution I got to work in level 22:
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
MenuItem searchMenuItem = menu.findItem(R.id.search);
SearchView searchView = (SearchView) searchMenuItem.getActionView();
searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
searchView.setSubmitButtonEnabled(true);
searchView.setOnQueryTextListener(this);
setMenuTextColor(menu, R.id.displaySummary, R.string.show_summary);
setMenuTextColor(menu, R.id.about, R.string.text_about);
setMenuTextColor(menu, R.id.importExport, R.string.import_export);
setMenuTextColor(menu, R.id.preferences, R.string.settings);
return true;
}
private void setMenuTextColor(Menu menu, int menuResource, int menuTextResource) {
MenuItem item = menu.findItem(menuResource);
SpannableString s = new SpannableString(getString(menuTextResource));
s.setSpan(new ForegroundColorSpan(Color.BLACK), 0, s.length(), 0);
item.setTitle(s);
}
The hardcoded Color.BLACK could become an additional parameter to the setMenuTextColor method. Also, I only used this for menu items which were android:showAsAction="never".
Adding this into my styles.xml worked for me
<item name="android:textColorPrimary">?android:attr/textColorPrimaryInverse</item>
You can set color programmatically.
private static void setMenuTextColor(final Context context, final Toolbar toolbar, final int menuResId, final int colorRes) {
toolbar.post(new Runnable() {
#Override
public void run() {
View settingsMenuItem = toolbar.findViewById(menuResId);
if (settingsMenuItem instanceof TextView) {
if (DEBUG) {
Log.i(TAG, "setMenuTextColor textview");
}
TextView tv = (TextView) settingsMenuItem;
tv.setTextColor(ContextCompat.getColor(context, colorRes));
} else { // you can ignore this branch, because usually there is not the situation
Menu menu = toolbar.getMenu();
MenuItem item = menu.findItem(menuResId);
SpannableString s = new SpannableString(item.getTitle());
s.setSpan(new ForegroundColorSpan(ContextCompat.getColor(context, colorRes)), 0, s.length(), 0);
item.setTitle(s);
}
}
});
}
If you want to set color for an individual menu item, customizing a toolbar theme is not the right solution. To achieve this, you can make use of android:actionLayout and an action view for the menu item.
First create an XML layout file for the action view. In this example we use a button as an action view:
menu_button.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/menuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Done"
android:textColor="?android:attr/colorAccent"
style="?android:attr/buttonBarButtonStyle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
In the code snippet above, we use android:textColor="?android:attr/colorAccent" to customize button text color.
Then in your XML layout file for the menu, include app:actionLayout="#layout/menu_button" as shown below:
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/menuItem"
android:title=""
app:actionLayout="#layout/menu_button"
app:showAsAction="always"/>
</menu>
Last override the onCreateOptionsMenu() method in your activity:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu, menu);
MenuItem item = menu.findItem(R.id.menuItem);
Button saveButton = item.getActionView().findViewById(R.id.menuButton);
saveButton.setOnClickListener(view -> {
// Do something
});
return true;
}
...or fragment:
#Override
public void onCreateOptionsMenu(#NonNull Menu menu, #NonNull MenuInflater inflater){
inflater.inflate(R.menu.main_menu, menu);
MenuItem item = menu.findItem(R.id.menuItem);
Button saveButton = item.getActionView().findViewById(R.id.menuButton);
button.setOnClickListener(view -> {
// Do something
});
}
For more details on action views, see the Android developer guide.
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
inflater.inflate(R.menu.search, menu);
MenuItem myActionMenuItem = menu.findItem( R.id.action_search);
SearchView searchView = (SearchView) myActionMenuItem.getActionView();
EditText searchEditText = (EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchEditText.setTextColor(Color.WHITE); //You color here
My situation was settings text color in the options menu (main app menu showed on menu button press).
Tested in API 16 with appcompat-v7-27.0.2 library, AppCompatActivity for MainActivity and AppCompat theme for the application in AndroidManifest.xml.
styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarPopupTheme">#style/PopupTheme</item>
</style>
<style name="PopupTheme" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="android:textColorSecondary">#f00</item>
</style>
Don't know if that textColorSecondary affects other elements but it controls the menu text color.
I searched some examples on the topic but all ready-to-use snippets didn't work.
So I wanted to investigate it with the source code for the appcompat-v7 library (specifically with the res folder of the .aar package).
Though in my case I used Eclipse with exploded .aar dependencies. So I could change the default styles and check the results. Don't know how to explode the libraries to use with Gradle or Android Studio directly. It deserves another thread of investigation.
So my purpose was so find which color in the res/values/values.xml file is used for the menu text (I was almost sure the color was there).
I opened that file, then duplicated all colors, put them below the default ones to override them and assigned #f00 value to all of them.
Start the app.
Many elements had red background or text color. And the menu items too. That was what I needed.
Removing my added colors by blocks of 5-10 lines I ended with the secondary_text_default_material_light color item.
Searching that name in the files within the res folder (or better within res/colors) I found only one occurrence in the color/abc_secondary_text_material_light.xml file (I used Sublime Text for these operations so it's easier to find thing I need).
Back to the values.xml 8 usages were found for the #color/abc_secondary_text_material_light.
It was a Light theme so 4 left in 2 themes: Base.ThemeOverlay.AppCompat.Light and Platform.AppCompat.Light.
The first theme was a child of the second one so there were only 2 attributes with that color resource: android:textColorSecondary and android:textColorTertiaryin the Base.ThemeOverlay.AppCompat.Light.
Changing their values directly in the values.xml and running the app I found that the final correct attribute was android:textColorSecondary.
Next I needed a theme or another attribute so I could change it in my app's style.xml (because my theme had as the parent the Theme.AppCompat.Light and not the ThemeOverlay.AppCompat.Light).
I searched in the same file for the Base.ThemeOverlay.AppCompat.Light. It had a child ThemeOverlay.AppCompat.Light.
Searching for the ThemeOverlay.AppCompat.Light I found its usage in the Base.Theme.AppCompat.Light.DarkActionBar theme as the actionBarPopupTheme attribute value.
My app's theme Theme.AppCompat.Light.DarkActionBar was a child of the found Base.Theme.AppCompat.Light.DarkActionBar so I could use that attribute in my styles.xml without problems.
As it's seen in the example code above I created a child theme from the mentioned ThemeOverlay.AppCompat.Light and changed the android:textColorSecondary attribute.
Sephy's solution doesn't work. It's possible to override the options menu item text appearance using the method described above, but not the item or menu. To do that there are essentially 3 ways:
How to change the background color of the options menu?
Write your own view to display and override onCreateOptionsMenu and onPrepareOptionsMenu to get the results you want. I state this generally because you can generally do whatever you want in these methods, but you probably won't want to call into super().
Copy code from the open-source SDK and customize for your behavior. The default menu implementation used by Activity will no longer apply.
See Issue 4441: Custom Options Menu Theme for more clues.
try this code....
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.my_menu, menu);
getLayoutInflater().setFactory(new Factory() {
#Override
public View onCreateView(String name, Context context,
AttributeSet attrs) {
if (name.equalsIgnoreCase("com.android.internal.view.menu.IconMenuItemView")) {
try {
LayoutInflater f = getLayoutInflater();
final View view = f.createView(name, null, attrs);
new Handler().post(new Runnable() {
public void run() {
// set the background drawable
view.setBackgroundResource(R.drawable.my_ac_menu_background);
// set the text color
((TextView) view).setTextColor(Color.WHITE);
}
});
return view;
} catch (InflateException e) {
} catch (ClassNotFoundException e) {
}
}
return null;
}
});
return super.onCreateOptionsMenu(menu);
}
Add textColor as below
<style name="MyTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColor">#color/radio_color_gray</item>
</style>
and use it in Toolbar in xml file
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/MyTheme.PopupOverlay" />
This is how you can color a specific menu item with color, works for all API levels:
public static void setToolbarMenuItemTextColor(final Toolbar toolbar,
final #ColorRes int color,
#IdRes final int resId) {
if (toolbar != null) {
for (int i = 0; i < toolbar.getChildCount(); i++) {
final View view = toolbar.getChildAt(i);
if (view instanceof ActionMenuView) {
final ActionMenuView actionMenuView = (ActionMenuView) view;
// view children are accessible only after layout-ing
actionMenuView.post(new Runnable() {
#Override
public void run() {
for (int j = 0; j < actionMenuView.getChildCount(); j++) {
final View innerView = actionMenuView.getChildAt(j);
if (innerView instanceof ActionMenuItemView) {
final ActionMenuItemView itemView = (ActionMenuItemView) innerView;
if (resId == itemView.getId()) {
itemView.setTextColor(ContextCompat.getColor(toolbar.getContext(), color));
}
}
}
}
});
}
}
}
}
By doing that you loose the background selector effect, so here is the code to apply a custom background selector to all of the menu item children.
public static void setToolbarMenuItemsBackgroundSelector(final Context context,
final Toolbar toolbar) {
if (toolbar != null) {
for (int i = 0; i < toolbar.getChildCount(); i++) {
final View view = toolbar.getChildAt(i);
if (view instanceof ImageButton) {
// left toolbar icon (navigation, hamburger, ...)
UiHelper.setViewBackgroundSelector(context, view);
} else if (view instanceof ActionMenuView) {
final ActionMenuView actionMenuView = (ActionMenuView) view;
// view children are accessible only after layout-ing
actionMenuView.post(new Runnable() {
#Override
public void run() {
for (int j = 0; j < actionMenuView.getChildCount(); j++) {
final View innerView = actionMenuView.getChildAt(j);
if (innerView instanceof ActionMenuItemView) {
// text item views
final ActionMenuItemView itemView = (ActionMenuItemView) innerView;
UiHelper.setViewBackgroundSelector(context, itemView);
// icon item views
for (int k = 0; k < itemView.getCompoundDrawables().length; k++) {
if (itemView.getCompoundDrawables()[k] != null) {
UiHelper.setViewBackgroundSelector(context, itemView);
}
}
}
}
}
});
}
}
}
}
Here is the helper function also:
public static void setViewBackgroundSelector(#NonNull Context context, #NonNull View itemView) {
int[] attrs = new int[]{R.attr.selectableItemBackgroundBorderless};
TypedArray ta = context.obtainStyledAttributes(attrs);
Drawable drawable = ta.getDrawable(0);
ta.recycle();
ViewCompat.setBackground(itemView, drawable);
}
For changing the text color, you can just set a custom view for the MenuItem, and then you can define the color for the text.
Sample Code : MenuItem.setActionView()
Simply just go to
Values - styles and inside styles and type
your color

Categories

Resources