How to use tab background color in FixedMode

[golo98]

In FixedMode the method xf:BottomBarPageExtensions.TabColor="#45b648" not change the tab Color.

[AlexanderMelchers]

There's a work-around for this, if you don't mind delving into the Android-layer a bit more: simply set the background colour on the bottom bar's ItemContainer-property, as in this.BottomBar.ItemContainer.SetBackgroundColor(Color.Red);.

The problem with this, though, is that the bottom bar itself is not currently exposed (at least not in the NuGet-package - see issue 53), which means the above cannot easily be done without using a bit of reflection... You can, however, use below code to obtain a reference to the bottom bar:

Type baseRendererType = typeof(BottomBar.Droid.Renderers.BottomBarPageRenderer);
const string bottomBarFieldName = "_bottomBar";

// Look-up the field the bottom bar should be stored in.
FieldInfo bottomBarField = baseRendererType.GetField(bottomBarFieldName,
    BindingFlags.Instance | BindingFlags.NonPublic);
if (bottomBarField == default(FieldInfo))
{
    throw new MissingFieldException(typeof(BottomBar.Droid.Renderers.BottomBarPageRenderer).Name,
        bottomBarFieldName);
}
if (bottomBarField.FieldType != typeof(BottomNavigationBar.BottomBar))
{
    throw new FormatException(
        $"The type of bottom bar is not that which was expected: {bottomBarField.FieldType.Name}");
}

return bottomBarField.GetValue(this) as BottomNavigationBar.BottomBar;

[Shaboo]

@AlexanderMelchers where should I set the code above? it throws an exception when I set it at mainactivity

[AlexanderMelchers]

Hi @Shaboo,

I use the code posted above in a property-getter method/clause that implements the lazy property instantiation pattern (i.e. if (this.bottomBar == default(BottomNavigationBar.BottomBar) { /* see code above */ this.bottomBar = bottomBarField.GetValue(this) as BottomNavigationBar.BottomBar; } return this.bottomBar; - not using an instance of Lazy<T> as the code references this).

This property is part of my custom BottomBarPageRenderer (hence Xamarin.Forms and not Android native), where I set the ItemContainer's background colour in the OnElementChanged-method, immediately following the call to base.OnElementChanged(e);:

protected override void OnElementChanged(ElementChangedEventArgs<BottomBarPage> e)
{
    if (e.NewElement == default(BottomBarPage))
    {
        base.OnElementChanged(e);
        return;
    }

    // Put the tabs in fixed mode and then create the bottom navigation bar...
    e.NewElement.FixedMode = true;
    base.OnElementChanged(e);

    // Add styling to the bottom navigation bar.
    this.BottomBar.ItemContainer.SetBackgroundColor(ColorProfile.Current.NavigationBar.ToAndroid());
}

Please note that I am using FixedMode = true;, which I believe does not affect this particular setting, but does affect the view hierarchy the BottomBar constructs. However, if you're following my instructions as set out above and still are unsuccessful, make sure to check your value for FixedMode. You may also wish to check whether the BottomBar-property is correctly loaded from reflection, as well as whether the ItemContainer-property is set...

Good luck!