CODEWITHSUNDEEP
androidcolorsxamarin.forms
iamsophia
iamsophia

Reputation: 796

How to change selected and unselected color for Tabbed pages Title in Android: Xamarin Forms

I have a Xamarin Forms Tabbed Page with 5 children:

enter image description here

As the picture shows, the icon color for the selected and unselected tab are different. I want the same thing to happen on the each tabs Title. Is this possible?

Edit: This feature is working perfectly in iOS. Im looking for a renderer specific for Android.

Below is the Android renderer code responsible for changing the color of the selected and unselected icon of the children:

public class MyTabbedPageRenderer: TabbedPageRenderer
{
   bool setup;
   ViewPager viewPager;
   TabLayout tabLayout;

   protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
   {
      base.OnElementPropertyChanged(sender, e);

      if (setup)
         return;

      if (e.PropertyName == "Renderer")
      {
         viewPager = (ViewPager)ViewGroup.GetChildAt(0);
         tabLayout = (TabLayout)ViewGroup.GetChildAt(1);
         setup = true;

         ColorStateList colors = null;
         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 < tabLayout.TabCount; i++)
         {
            var tab = tabLayout.GetTabAt(i);
            var icon = tab.Icon;
            if (icon != null)
            {
               icon = Android.Support.V4.Graphics.Drawable.DrawableCompat.Wrap(icon);
  Android.Support.V4.Graphics.Drawable.DrawableCompat.SetTintList(icon, colors);
             }
         }
      }
   }
 }

In Resources - > Color folder I have the following xml file:

<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#2196F3"  android:state_selected="true" />
    <item android:color="#b2b2b2" />
</selector>

Upvotes: 3

Views: 1219

Answers (2)

Mcfer
Mcfer

Reputation: 304

Go to your Project.Droid, folder Resources, layout, and Click with the wright button, Open with, XML Editor. And in the file, edit:

app:tabSelectedTextColor="#ffffff

Change the #ffffff for your code color. I Hope it works.

You also can change app:tabTextColor="#80ffffff" to the same color as the Icon

Upvotes: 1

Jorge Ram&#237;rez
Jorge Ram&#237;rez

Reputation: 1

Try using the OnAppearing() and OnDisappearing() Overrides on each tab / page to change the color or image for the icons.

Upvotes: 0

Related Questions