Alan2
Alan2

Reputation: 24552

I can't set the color of an Android switch in Xamarin.Forms with Styles

I am using the following XML to try and change the colors of a switch in my Xamarin forms application. However nothing changes.
Can anyone give me any advice on what I might be doing wrong:

<style name="MyTheme" parent="MyTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">      
    <item name="windowActionBar">false</item>
    <item name="android:actionBarSize">45dp</item>
    <item name="colorPrimaryDark">#1976D2</item>
</style>

<style name="MyTheme.Switch" parent="Widget.AppCompat.CompoundButton.Switch">
    <item name="colorControlActivated">#FF0000</item>
    <item name="colorControlNormal">#FF0000</item>
    <item name="colorControlHighlight">#FF0000</item>
    <item name="colorSwitchThumbNormal">#FF0000</item>
    <item name="colorAccent">#FF0000</item>
 </style>

Here's a clip from MainActivity.cs

 [Activity(Label = "Japanese", Icon = "@drawable/Icon120", Theme = "@style/MyTheme", MainLauncher = true, 
          ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation,
          ScreenOrientation = ScreenOrientation.Portrait)]

As this didn't work I tried some changes but same problem in that it doesn't work:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CustomTheme" parent="@android:style/Theme">
        <item name="segmentedControlOptionStyle">@style/SegmentedControlOption</item>
        <item name="switchStyle">@style/SwitchCompat</item>
    </style>
</resources>

<style name="SwitchCompat" parent="@style/Widget.AppCompat.CompoundButton.Switch">
    <item name="colorPrimary">#FFFF00</item>
    <item name="colorPrimaryDark">#00FFFF</item>
    <item name="colorAccent">#FF00FF</item>
</style>

Upvotes: 1

Views: 2965

Answers (2)

Catarina Ferreira
Catarina Ferreira

Reputation: 1854

In visual studio check your android project and find this file:

Resources -> values -> styles.xaml

There you can change the wanted color in this item:

<item name="colorAccent">#3c94c7</item>

This will change "colorAccent" from your Android theme.

You cant find more about the colorAccent in here

Upvotes: 1

gannaway
gannaway

Reputation: 1882

The MyTheme.Switch style does not automatically get applied to all switches. If the colorAccent is moved inside MyTheme.Base, then it can change the tint color (note colorAccent applies to other widgets as well):

<style name="MyTheme" parent="MyTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">      
    <item name="windowActionBar">false</item>
    <item name="android:actionBarSize">45dp</item>
    <item name="colorPrimaryDark">#1976D2</item>
    <!-- colorAccent is used as the default value for colorControlActivated which is used to tint widgets -->
    <item name="colorAccent">#FF0000</item>
</style>

enter image description here

A custom renderer will allow more control over the styling. The following custom renderer can be used to reference your custom style (note you'll want to replace PanDemo.Droid with your namespace).

[assembly: Xamarin.Forms.ExportRenderer(
    typeof(Xamarin.Forms.Switch), 
    typeof(PanDemo.Droid.CustomSwitchRenderer))]

namespace PanDemo.Droid
{
    public class CustomSwitchRenderer : Xamarin.Forms.Platform.Android.SwitchRenderer
    {
        public CustomSwitchRenderer(Android.Content.Context context)
            : base(context) { }

        protected override Android.Widget.Switch CreateNativeControl()
        {
            return new Android.Widget.Switch(
                new Android.Views.ContextThemeWrapper(
                    this.Context, 
                    Resource.Style.MyTheme_Switch /* <- Custom Switch Style */));
        }
    }
}

Then just modify your custom style as necessary, for example:

<style name="MyTheme.Switch" parent="Widget.AppCompat.CompoundButton.Switch">
    <item name="colorAccent">#008000</item>
</style>

enter image description here

Upvotes: 4

Related Questions