How to change text color in SwitchCell?

Question

I am using a Xamarin.Forms.SwitchCell with TableVIew on an Android application 's settings page. I decided to use black background for my entire app, but get stuck with setting text color on SwitchCell. I've searched for solution and begin to create custom renderer, because I found how is the problem solved in iOS. I've override the GetCellCore method, but I can't reach text property of the cell, the way it was done in iOS solution I found.

Could you tell me how to achieve the functionality I want?
Thank you in advance.

Answer 1

Hi 88769490,

Welcome to our Microsoft Q&A platform!

If you want to create a custom renderer for SwitchCell, maybe this document: Customizing a ViewCell, which creates custom renderer for ViewCell, can help you.

However, if you want to show a custom SwitchCell in TableView, 'cause SwitchCell is composed of Label and Switch, creating a custom SwitchCell via "ViewCell" will be a much easier way.

First, create a "View Cell" and modify it as follows.
MySwitchCell.xaml

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"   
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
          x:Class="CustomSwitchCellDemo.MySwitchCell"  
          x:Name="MyViewCell">  
    <ViewCell.View>  
        <StackLayout Orientation="Horizontal">  
            <Label Text="{Binding Source={x:Reference MyViewCell}, Path=Text, StringFormat='    {0}'}"   
                   TextColor="{Binding Source={x:Reference MyViewCell}, Path=TextColor}"   
                   VerticalOptions="Center"/>  
  
            <Switch IsToggled="{Binding Source={x:Reference MyViewCell}, Path=IsToggled}"  
                    VerticalOptions="Center"  
                    HorizontalOptions="EndAndExpand"/>  
        </StackLayout>  
    </ViewCell.View>  
</ViewCell>  

Then create extra custom bindable property for the ViewCell.
MySwitchCell.xaml.cs

public partial class MySwitchCell : ViewCell  
{  
    public MySwitchCell()  
    {  
        InitializeComponent();  
    }  
  
    public static readonly BindableProperty TextProperty =  
        BindableProperty.Create("Text", typeof(string), typeof(ViewCell), null,  
            defaultBindingMode: BindingMode.OneWay);  
  
    public string Text  
    {  
        get => GetValue(TextProperty) as string;  
        set => SetValue(TextProperty, value);  
    }  
  
    public static readonly BindableProperty TextColorProperty =  
        BindableProperty.Create("TextColor", typeof(Color), typeof(ViewCell), Color.Black,  
            defaultBindingMode: BindingMode.OneWay);  
  
    public Color TextColor  
    {  
        get => (Color)GetValue(TextColorProperty);  
        set => SetValue(TextColorProperty, value);  
    }  
  
    public static readonly BindableProperty IsToggledProperty =  
        BindableProperty.Create("IsToggled", typeof(bool), typeof(ViewCell), false,  
            defaultBindingMode: BindingMode.TwoWay);  
  
    public bool IsToggled  
    {  
        get => (bool)GetValue(IsToggledProperty);  
        set => SetValue(IsToggledProperty, value);  
    }  
}  

Here is the XAML test page.

<TableView>  
    <TableView.Root>  
        <TableSection Title="Settings">  
            <local:MySwitchCell Text="Dark Mode" TextColor="Blue" IsToggled="True"/>  
            <local:MySwitchCell Text="Dark Mode" TextColor="Green" IsToggled="False"/>  
            <SwitchCell Text="Allow Spamming" />  
        </TableSection>  
        <TableSection Title="Performance">  
            <SwitchCell Text="Run Super-Fast" OnColor="Yellow" On="True" />  
        </TableSection>  
    </TableView.Root>  
</TableView>  

Regards,
Kyle

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

I implemented custom renderer:

[assembly: ExportRenderer(typeof(Xamarin.Forms.SwitchCell), typeof(Samle.Droid.CustomRenderers.SwitchCellColorRenderer))]

namespace Samle.Droid.CustomRenderers
{
    public class SwitchCellColorRenderer : SwitchCellRenderer
    {
        protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, ViewGroup parent, Context context)
        {
            var result = base.GetCellCore(item, convertView, parent, context);
            if (result is SwitchCellView scv)
            {
// set custom color
                var textColor = ThemeHelper.GetThemedColor("textColor");

                scv.SetMainTextColor(textColor);
            }

            return result;
        }
    }