2

Switch iOS

Switch Android

As seen above when the switch toggle in iOS is disabled and toggled has color, but in the android doesnt. Is possible to do the same effect in android?

Phill
  • 407
  • 1
  • 8
  • 30

2 Answers2

5

If you just want to change the thumb color to match the iOS UISwitch track green color (#41D150), you can change the colorSwitchThumbNormal in the Resources/values/style.xml file (in your Xamarin.Android project):

Add:

<item name="colorSwitchThumbNormal">#41D150</item>

Forms running on API 19 - API 26:

enter image description here

when the switch is disabled and is toggled, I want less opacity

If you want to change the track color, you can use a very simple renderer that changes all the Forms' Switch on Android:

[assembly: ExportRenderer(typeof(Switch), typeof(StyleBasedSwitchRenderer))]
namespace Forms_PCL_XAML.Droid
{
    public class StyleBasedSwitchRenderer : SwitchRenderer
    {
        protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Switch> e)
        {
            base.OnElementChanged(e);
            Control?.SetTrackResource(Resource.Drawable.form_switch_track_mtrl_alpha);
        }
    }
}

The Resource.Drawable.form_switch_track_mtrl_alpha is a 9Patch image. the normal theme uses abc_switch_track_mtrl_alpha.9.png in the AppCompat library.

So if you add a similar 9Patch but change the color:

enter image description here

You end up with:

enter image description here

Or use a drawable-based selector and two 9Patch images to maintain the same default colors of the thumbs:

Renderer becomes:

Control?.SetTrackResource(Resource.Drawable.form_switch_selector);

Selector (form_switch_selector.xml) in the Resource.Drawable folder:

<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true" android:drawable="@drawable/form_switch_track_selected" /> 
     <item android:drawable="@drawable/form_switch_track_mtrl_alpha" /> 
 </selector>

The two 9Patch files:

enter image description here enter image description here

Results in:

enter image description here

SushiHangover
  • 73,120
  • 10
  • 106
  • 165
  • What i want is: when the switch is disabled and is toggled, I want less opacity , not grey. – Phill Sep 11 '17 at 16:17
  • @Phill `I want less opacity , not grey` ? Less opacity, so you want it lighter? i.e. a lighter shade of grey – SushiHangover Sep 11 '17 at 18:35
  • Yes, I want ligther color, I want the same colors but with less opacity, on default in android, when is disabled turns to grey, i dont want that, – Phill Sep 12 '17 at 08:53
1

If you want to change the default colours for the Switch control in Xamarin forms, you could use our Effect that we created in the Forms Community Toolkit...

The actual code can be use too if you want, it's available here

https://github.com/FormsCommunityToolkit/FormsCommunityToolkit/blob/dev/src/Effects/Effects.Android/Effects/Switch/SwitchChangeColor.cs

But best is to use it as done in our Samples app https://github.com/FormsCommunityToolkit/FormsCommunityToolkit/blob/dev/Samples/Samples/Samples/Views/EffectsSwitchChangeColorPage.xaml#L16

So what it does under the covers is hook into the actual Android native control and change the colours of it with the ones you provide in the XAML. Native code for setting the colour is like this:

((SwitchCompat)Control).ThumbDrawable.SetColorFilter(...
Depechie
  • 6,102
  • 24
  • 46