Xamarin Forms: How to change text color of selected tab using TabbedPageRenderer

Question

I am developing Tabs using TabbedPageRenderer. I am not able to change text color of selected tab(Only getting change selected tab icon color). Below is MyTabbedPageRenderer.cs class

public class MyTabbedPageRenderer : TabbedPageRenderer
{
    bool setup;
    ViewPager pager;
    TabLayout layout;

    public MyTabbedPageRenderer(Context context) : base(context)
    { }

    protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
    {
        base.SetTabIcon(tab, icon);
        tab.SetCustomView(Resource.Layout.Custom_tab_layou);
        var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);
        var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);
        tv.SetText(tab.Text, TextView.BufferType.Normal);
        imageview.SetBackgroundDrawable(tab.Icon);  
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        if (setup)
            return;
        if (e.PropertyName == "Renderer")
        {
            pager = (ViewPager)ViewGroup.GetChildAt(0);
            layout = (TabLayout)ViewGroup.GetChildAt(1);

            setup = true;
            ColorStateList colors = null;

            //using xml file
            if ((int)Build.VERSION.SdkInt >= 23)
                colors = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
            else
                colors = Resources.GetColorStateList(Resource.Color.icon_tab);

            for (int i = 0; i < layout.TabCount; i++)
            {
                var tab = layout.GetTabAt(i);
                var icon = tab.Icon;

                Android.Views.View view = GetChildAt(i);
                if (view is TabLayout)
                    layout = (TabLayout)view;

                if (icon != null)
                {
                    icon = Android.Support.V4.Graphics.Drawable.DrawableCompat.Wrap(icon);
                    Android.Support.V4.Graphics.Drawable.DrawableCompat.SetTintList(icon, colors);
                }
            }
        }
    }
}

This xml file applied for changing selected tab & text color

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:color="#E2725B" 
          android:state_selected="true" />
    <item android:color="#FFFFFF" />
    <item app:tabSelectedTextColor="#F3E5AB" />
</selector>

styles using for MainActivity

  <style name="MainTheme" parent="MainTheme.Base">
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

style using for splashActivity

<style name="MyTheme.Splash" parent 
   ="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:windowBackground">@drawable/splash</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
  </style>

Tabbar.axml file below

   <android.support.design.widget.TabLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    app:tabIndicatorColor="#BF94E4"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabSelectedTextColor="#DFFF00"
    app:tabGravity="fill"
    app:tabMode="fixed" />

Below screenshot of output where only icon color getting changed

Answer 1

Xamarin Forms: How to change text color of selected tab using TabbedPageRenderer

There is no need to use TabbedPageRenderer to change the selected tab text color, you can change it directly Via XML attributes.

In your Resource\layout\Tabbar.axml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:tabMode="fixed"
        app:tabGravity="fill"

        app:tabTextColor="@color/your_unselected_text_color"
        app:tabSelectedTextColor="@color/your_selected_text_color"
        app:tabIndicatorColor="@color/your_indicator_color"
     />

Update:

Give your TextView a ColorStateList will solve this issue. In your MyTabbedPageRenderer SetTabIcon method:

protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
{
    base.SetTabIcon(tab, icon);
    tab.SetCustomView(Resource.Layout.Custom_tab_layou);

    var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);
    var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);

    tv.SetText(tab.Text, TextView.BufferType.Normal);
    imageview.SetBackgroundDrawable(tab.Icon);

    ColorStateList colors2 = null;

    if ((int)Build.VERSION.SdkInt >= 23)
        colors2 = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
    else
        colors2 = Resources.GetColorStateList(Resource.Color.icon_tab);
    tv.SetTextColor(colors2);
}

Effect.

Answer 2

See if this might helpful to you How to change selected Tab text color

you can use TabLayout instead like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

  <android.support.design.widget.TabLayout
   android:layout_height="wrap_content"
   android:layout_width="match_parent"
   android:id="@+id/tablayout"
   app:tabTextColor="@color/colorPrimary"
   app:tabSelectedTextColor="@color/colorAccent"
   app:tabIndicatorColor="@android:color/holo_orange_light">

  <android.support.design.widget.TabItem
      android:text="tab 1"/>
  <android.support.design.widget.TabItem
      android:text="tab 2"/>
  <android.support.design.widget.TabItem
      android:text="tab 3"/>

 </android.support.design.widget.TabLayout>

</LinearLayout>