Develop Reference

Changing the color of the background of an Activity

I am trying to change the color of the background in my android app. At the moment when I press the button it changes the color for that specific activity and not for all the other activities. Is there a way to change it for the whole app?
public class colorPicker extends AppCompatActivity {
View view;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_color_picker);
view = this.getWindow().getDecorView();
}
public void goPink(View v){
view.setBackgroundResource(R.color.Pink);
}
public void goGreen(View v){
view.setBackgroundResource(R.color.Green);
}
public void goYellow(View v){
view.setBackgroundResource(R.color.Yellow);
}
}

create a theme in your styles.xml and add following to that theme
<item name="android:windowBackground">#color/window_background
and set android:theme="#style/YourTheme" in your
<application>
...
</application
in manifest file

In this case, You need to add few changes in your activity.
In on onCreate
if(getIntent().getExtras() != null)
{
int theme = getIntent().getIntExtra("theme", R.style.AppTheme);
setTheme(theme);
getApplication().setTheme(theme);
//recreate();
}
Condition onCLick
if(condition)
getIntent().putExtra("theme", R.style.AppTheme2);
else
getIntent().putExtra("theme", R.style.AppTheme);
and maintain 2 theme
<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary"></item></style>
and the second theme similar to it just change the name as BaseTheme2.
But this is not suggested to change the app theme at runtime.

You could change the window background color of your app theme and don't use a background for activities or you can use a transparent background for activities.

Can't change color of status bar

I am trying to theme my app to follow the material Android look. My project is a Xamarin.Android project, which targets API 23, but the minimum API target is 16. So I have to use the AppCompat library to have the same design on all APIs.
I have followed these guides: Material Theme,Beautiful Material Design with the Android Support Design Library,Android Tips: Hello AppCompatActivity, Goodbye ActionBarActivity and created these files:
Resources/values/styles.xml:
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<style name="MyTheme.Base" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#F44336</item>
<item name="colorPrimaryDark">#D32F2F</item>
<item name="colorAccent">#FF4081</item>
</style>
</resources>
Resources/values-v21/styles.xml
<resources>
<!--
Base application theme for API 21+. This theme replaces
MyTheme from resources/values/styles.xml on API 21+ devices.
-->
<style name="MyTheme" parent="MyTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
</style>
</resources>
MainActivity.cs
using Android.App;
using Android.Widget;
using Android.OS;
using Android.Support.V7.App;
namespace TestThemeApp
{
[Activity(Label = "TestThemeApp", MainLauncher = true, Icon = "#drawable/icon", Theme = "#style/MyTheme")]
public class MainActivity : AppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView (Resource.Layout.Main);
}
}
}
I'm just trying to make the the toolbar red, and the status bar a darker red, but the status bar color won't change. This is what it looks like:
What did I do wrong?

Try this in your style (Resources/values-v21/styles.xml)
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
>
<item name="android:statusBarColor">#color/cobalt_light</item>
I personaly prefer to handle it in the onCreate method of the activity:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(getResources().getColor(R.color.gray_very_dark));
window.setNavigationBarColor(getResources().getColor(R.color.gray_darker));
}

For a simple workaround you can change your primary color to the desired color of your status bar and it will change the color of your status bar automatically.
NOTE: It is a work around till you find the correct answer.

You'll have to add a flag at the top of the MainActivity and set the bar color at the end.
public class MainActivity : AppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
// First check if the current SDK is >= 21. Else it will cause trouble
if ((int)Build.VERSION.SdkInt >= 21)
Window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView (Resource.Layout.Main);
SetBarColor();
}
public void SetBarColor ()
{
if((int)Build.VERSION.SdkInt >= 21)
Window.SetStatusBarColor(Color.ParseColor("#FF0000"));
}
}

Use below code snippet to change statusbar color:
public void setStatusBarColor(Activity context, int color) {
if (Build.VERSION.SDK_INT >= 21) {
Window window = context.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(ContextCompat.getColor(context,color));
}
}

I think that i have found the most elegant solution based on the other answers:
The only thing i changed was added the flag in the OnCreate(Bundle bundle) function:
protected override void OnCreate(Bundle bundle)
{
if ((int)Build.VERSION.SdkInt >= (int)BuildVersionCodes.Lollipop)
Window.AddFlags(Android.Views.WindowManagerFlags.DrawsSystemBarBackgrounds);
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView (Resource.Layout.Main);
}
And that's it! The style files do the rest, and on older version of android, the status bar just won't change.

MediaRouteActionProvider connection dialog theme

I've tried to change theme of the MediaRouteActionProvider connection dialog. I using in my application a Light theme with Dark Actionbar, so the dialog have dark gray content, but the background is dark..
When the app is connected to a device, the other dialogs are ok, they have white background with the correct theme. (For exmaple in VideoMediaRouteControllerDialog and on the disconnect dialog.)
Have you any idea, how can I change the connection dialog's theme?
Thank you very much!
//Screenshot 1: Connection dialog (with the theme issue)
//Screenshot 2: Controller dialog (with the right, needed theme)

Unfortunately that dialog doesn't follow the standard theme (Dialogs in Android are all pretty unfriendly in general but that one is among the hardest to work with). Since that dialog is provided by media router, you can only provide a customized theme if you replace that completely with your own dialog.
You can try subclassing MediaRouteDialogFactory and override onCreateChooserDialogFragment() method and pass your implementation to the ActionProvide:
mediaRouteActionProvider.setDialogFactory(yourDialogFactoryImlementation)
You can take a look at the CCL where I do a similar thing not for the chooser dialog but for the controller.

Right now theming these Dialogs have issue - wrong theme applied to Dialog
You can override themes used in MediaRouterThemeHelper
<style name="Theme.MediaRouter.Light.DarkControlPanel">
<item name="mediaRoutePlayDrawable">#drawable/mr_ic_play_dark</item>
<item name="mediaRoutePauseDrawable">#drawable/mr_ic_pause_dark</item>
<item name="mediaRouteCastDrawable">#drawable/mr_ic_cast_dark</item>
<item name="mediaRouteAudioTrackDrawable">#drawable/ic_audiotrack</item>
<item name="mediaRouteControllerPrimaryTextStyle">#style/Widget.MediaRouter.ControllerText.Primary.Dark</item>
<item name="mediaRouteControllerSecondaryTextStyle">#style/Widget.MediaRouter.ControllerText.Secondary.Dark</item>
</style>
<style name="Theme.MediaRouter.LightControlPanel">
<item name="mediaRoutePlayDrawable">#drawable/mr_ic_play_light</item>
<item name="mediaRoutePauseDrawable">#drawable/mr_ic_pause_light</item>
<item name="mediaRouteCastDrawable">#drawable/mr_ic_cast_light</item>
<item name="mediaRouteAudioTrackDrawable">#drawable/mr_ic_audiotrack_light</item>
<item name="mediaRouteControllerPrimaryTextStyle">#style/Widget.MediaRouter.ControllerText.Primary.Light</item>
<item name="mediaRouteControllerSecondaryTextStyle">#style/Widget.MediaRouter.ControllerText.Secondary.Light</item>
</style>

What I did was pulling the mediarouter appcompat library source from GitHub, then I fixing the theming and rebuilding the whole thing into my own custom mediarouter library.
What you're looking for in the code is MediaRouteChooserDialog, and even there, the constructor that only takes a Context as a parameter, as that's the one being called by onCreateChooserDialog() in MediaRouteChooserDialogFragment.
I was lazy so I simply put android.R.style.Theme_Holo_Light_Dialog instead of the 0 in the constructor, and it worked just fine. But of course you can always look for a more sophisticated solution.

I made it work similar as #Naddaf described it. You need to extend MediaRouteDialogFactory (you can set this to the MediaRouteActionProvider or MediaRouteButton with setDialogFactory() ) and override the method:
#Override
public MediaRouteChooserDialogFragment onCreateChooserDialogFragment(){
return new CustomMediaRouteChooserDialogFragment();
}
Then in your CustomMediaRouteChooserDialogFragment override:
#Override
public CustomMediaRouteChooserDialog onCreateChooserDialog(Context context, Bundle savedInstanceState)
{
return new CustomMediaRouteChooserDialog(context);
}
And in the CustomMediaRouteChooserDialog create a constructor, where you set your holo light theme.
public CustomMediaRouteChooserDialog(Context context)
{
super(context, android.R.style.Theme_Holo_Light_Dialog);
}
Hope this helps!

Based on the other answers, this worked for me:
set a custom action provider in the menu item
<item
android:id="#+id/media_route_menu_item"
android:title="#string/cast_menu_title"
app:actionProviderClass="MediaRouteActionProviderThemeLight"
app:showAsAction="always"/>
this is the custom action provider using a light theme
public class MediaRouteActionProviderThemeLight extends MediaRouteActionProvider {
private static final int THEME_DIALOG = android.support.v7.mediarouter.R.style.Theme_MediaRouter_Light;
/**
* Creates the action provider.
*
* #param context The context.
*/
public MediaRouteActionProviderThemeLight(Context context) {
super(context);
setDialogFactory(new MediaRouteDialogFactoryThemeLight());
}
private static class MediaRouteDialogFactoryThemeLight extends MediaRouteDialogFactory {
#NonNull
#Override
public MediaRouteChooserDialogFragment onCreateChooserDialogFragment() {
return new MediaRouteChooserDialogFragmentThemeLight();
}
#NonNull
#Override
public MediaRouteControllerDialogFragment onCreateControllerDialogFragment() {
return new MediaRouteControllerDialogFragmentThemeLight();
}
}
public static class MediaRouteChooserDialogFragmentThemeLight extends MediaRouteChooserDialogFragment {
#Override
public MediaRouteChooserDialog onCreateChooserDialog(Context context, Bundle savedInstanceState) {
return new MediaRouteChooserDialog(context, THEME_DIALOG);
}
}
public static class MediaRouteControllerDialogFragmentThemeLight extends MediaRouteControllerDialogFragment {
#Override
public MediaRouteControllerDialog onCreateControllerDialog(Context context, Bundle savedInstanceState) {
return new MediaRouteControllerDialog(context, THEME_DIALOG);
}
}
}
take into account the dialog with play/pause buttons and volume control use the material colors from your main theme, colorPrimary as background and textColorPrimary for the title/subtitle. In case your app use dark theme you should overwrite the background using the theme below, and change the THEME_DIALOG constant in the class MediaRouteActionProviderThemeLight:
<style name="CastAppThemeMediaRouter" parent="Theme.MediaRouter.Light">
<item name="colorPrimaryDark">#color/primary_dark_material_light</item>
<item name="colorPrimary">#color/primary_material_light</item>
<item name="colorAccent">#color/accent_material_light</item>
</style>
To use a light theme with dark controls use the following theme. Be sure to set as primaryColor a dark color, the volume bar is set to light/dark automatically based in the primaryColor.
<style name="CastThemeMediaRouter" parent="Theme.MediaRouter.Light.DarkControlPanel">
<item name="colorPrimary">#color/black</item>
</style>

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>

How do I dynamically change the text color of a theme?

I would like the change the text color of all TextViews once the user chooses a different font color.
I can achieve this by linking all associated TextViews and call setTextColor on them.
But I would like to know if this could also be done through customizing Themes?

This is an old question,
but nevertheless,
I seem to have an answer.
In its simplest form.
<style name="BaseTheme" parent="#android:style/Theme.Black">
<item name="android:textColor">#color/white</item>
<item name="android:background">#color/black</item>
</style>
<style name="InvertedTheme" parent="BaseTheme">
<item name="android:textColor">#color/black</item>
<item name="android:background">#color/white</item>
</style>
In your androidmanifest set;
<activity
android:name=".SomeActivity"
android:label="#string/app_name"
android:theme="#style/BaseTheme" />
Then in your SomeActivity.java;
public class SomeActivity extends Activity {
static final String INVERTED_EXTRA = "inverted";
private void invertTheme() {
// to make the theme take effect we need to restart the activity
Intent inverted = new Intent(this, SomeActivity.class);
inverted.putExtra(INVERTED_EXTRA, true);
startActivity(inverted);
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// must be before the setContentView
if (getIntent().getBooleanExtra(INVERTED_EXTRA, false))
setTheme(R.style.InvertedTheme);
}
setContentView(R.layout.some_layout);
...
I tried without starting a new activity,
but it doesn't reset the colors.