Controls color not getting changed

Question

I have created a Xamarin.Forms project with one template. I changed the colors of Android in the files styles.xml and colors.xml, but some controls did not change their color: TableView.Title control and custom nugets control.

colors.xml file: Primary color is dark blue and Accent color is orange

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <color name="primaryColor">#344955</color>
    <color name="primaryDarkColor">#232F34</color>
    <color name="primaryLightColor">#4A6572</color>

    <color name="accentColor">#F9AA33</color>
    <color name="accentDarkColor">#c17b00</color>
    <color name="accentLightColor">#ffdc65</color>

    <color name="primaryTextColor">#000000</color>
    <color name="secondaryTextColor">#ffffff</color>
</resources>

styles.xml file

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <!-- Base theme applied regardless of API level -->
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryDarkColor</item>
        <item name="colorAccent">@color/accentColor</item>
        <item name="colorControlNormal">@color/primaryColor</item>
        <item name="colorControlActivated">@color/accentColor</item>
        <item name="colorControlHighlight">@color/accentColor</item>
        <item name="windowActionModeOverlay">false</item>
    </style>

    <!-- Default App theme applied if no resource style overrides for specific API level -->
    <style name="AppTheme" parent="AppTheme.Base">
    </style>

    <!-- App Splash Screen Theme -->
    <style name="AppTheme.Splash.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>
</resources>

The color was cyan, I changed it to orange, but as you can see in the screenshot, in some elements the color didn't change, but cyan remained Here is an example:

You can also download example app: GitHub

Answer 1

You need to use a CustomRenderer.

public partial class ColoredTableView : TableView
   {
       public static BindableProperty GroupHeaderColorProperty = BindableProperty.Create("GroupHeaderColor", typeof(Color), typeof(ColoredTableView), Color.White);
       public Color GroupHeaderColor
       {
           get
           {
               return (Color)GetValue(GroupHeaderColorProperty);
           }
           set
           {
               SetValue(GroupHeaderColorProperty, value);
           }
       }

       public ColoredTableView()
       {
           InitializeComponent();
       }
   }

And, in Android:

[assembly: ExportRenderer(typeof(ColoredTableView), typeof(ColoredTableViewRenderer))]
namespace YOUR_ANDROID_NAMESPACE
{
    public class ColoredTableViewRenderer : TableViewRenderer
    {

        protected override TableViewModelRenderer GetModelRenderer(Android.Widget.ListView listView, TableView view)
        {
            return new CustomHeaderTableViewModelRenderer(Context, listView, view);
        }

        private class CustomHeaderTableViewModelRenderer : TableViewModelRenderer
        {
            private readonly ColoredTableView _coloredTableView;

            public CustomHeaderTableViewModelRenderer(Context context, Android.Widget.ListView listView, TableView view) : base(context, listView, view)
            {
                _coloredTableView = view as ColoredTableView;
            }

            public override Android.Views.View GetView(int position, Android.Views.View convertView, ViewGroup parent)
            {
                var view = base.GetView(position, convertView, parent);

                var element = GetCellForPosition(position);

                // section header will be a TextCell
                if (element.GetType() == typeof(TextCell))
                {
                    try
                    {
                        // Get the textView of the actual layout
                        var textView = ((((view as LinearLayout).GetChildAt(0) as LinearLayout).GetChildAt(1) as LinearLayout).GetChildAt(0) as TextView);

                        // get the divider below the header
                        var divider = (view as LinearLayout).GetChildAt(1);

                        // Set the color
                        textView.SetTextColor(_coloredTableView.GroupHeaderColor.ToAndroid());
                        textView.TextAlignment = Android.Views.TextAlignment.Center;
                        textView.Gravity = GravityFlags.CenterHorizontal;
                        divider.SetBackgroundColor(_coloredTableView.GroupHeaderColor.ToAndroid());
                    }
                    catch (Exception) { }
                }

                return view;
            }
        }
    }
}