How to set background color of selected tab in xamarin.forms for android?

Question

I am working in xamarin.forms. I have implemented bottom tabbed page in android like below code

<TabbedPage 
                xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Inika.Views.BottomBar.BottomBarPages"
                xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
                BarBackgroundColor="White"
                android:TabbedPage.ToolbarPlacement="Bottom"
                android:TabbedPage.BarItemColor="#A9A9A9"
                android:TabbedPage.BarSelectedItemColor="Black">
</TabbedPage>

I am using new feature of xamarin.form 3.1 as below link

https://blog.xamarin.com/xamarin-forms-3-1-improvments/

According to my current code my output is like below image

but I want to set background color of selected tab. "BarBackgroundColor" property set the color in whole Bar. I did not found any property who set the color in only selected tab.

I need output like this

Please suggest work around through custom render or any but I don't want to use any custom plugin.

Answer 1

This question have already been answered on SO. Nevertheless try the following.

If you are using FormsAppCompatActivity, you can use

app:tabIndicatorColor="#FF3300" <!-- Set indicator color here, sets it to red-->

EDIT

You'll need to create a custom renderer.

Check this sample on github.

Answer 2

Xamarin Android have 2 type of Bars: TabLayout and BottomNavigationView. Styles for TabLayout don't work for BottomNavigationView. I could not find good ansver. But I could make custom render. tab.SetBackgroundColor can set any color.

using System.ComponentModel;
using Android.Content;
using Android.Views;
using Droid.Renderers;
using Google.Android.Material.BottomNavigation;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
using Color = Android.Graphics.Color;

using BottomNavigationView = Google.Android.Material.BottomNavigation.BottomNavigationView;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedRenderer))]
namespace Droid.Renderers
{
    public sealed class MyTabbedRenderer : TabbedPageRenderer
    {
        private int tIndex = 0;

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


        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            tIndex = (sender as TabbedPage).Children.IndexOf((sender as TabbedPage).CurrentPage);
            GetBottomNavigationView(this.ViewGroup);
        }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement == null) return;
            GetBottomNavigationView(ViewGroup);
        }

        private void GetBottomNavigationView(ViewGroup viewGroup)
        {
            for (int i = 0; i < viewGroup.ChildCount; i++)
            {
                Android.Views.View childView = viewGroup.GetChildAt(i);
                if (childView is ViewGroup)
                {
                    ViewGroup childViewGroup = (ViewGroup)childView;
                    for (int j = 0; j < childViewGroup.ChildCount; j++)
                    {
                        var bottomNavigationView = childViewGroup.GetChildAt(j);
                        if (bottomNavigationView is BottomNavigationView)
                        {
                            BottomNavigationMenuView bnMenuViev = ((BottomNavigationView)bottomNavigationView).MenuView as BottomNavigationMenuView;
                            for (int n = 0; n < bnMenuViev.ChildCount; n++)
                            {
                                var tab = bnMenuViev.GetChildAt(n);
                                if (tIndex == n)
                                {
                                    tab.SetBackgroundColor(Color.Yellow);
                                }
                                else
                                {
                                    tab.SetBackgroundColor(Color.Black);

                                }
                            }
                        }
                    }
                }
            }
        }
    }
}