Text color unselect tabs

[pepobit]

The text color in the unselected tabs is the same color as the tabbar background color and it doesn't look like. How to fix it?

[AlexanderMelchers]

Hi @pepobit,

Unfortunately, I haven't found an easy way to do this, as you'll need to implement a custom renderer with a custom "drawing" method that will update the Android-views associated with the tabs both on initialization (i.e. OnElementChanged) and whenever a new tab has become selected (i.e. the renderer's Element's OnCurrentPageChanged). The Android-version of the tabs, which you'll want to update can be accessed as the direct children of the bottom bar's ItemContainer, which, however, requires you to access the BottomBar-object through reflection first (see my post here: https://github.com/thrive-now/BottomNavigationBarXF/issues/51). In addition, as you'll be modifying the native views frequently, it's probably smart to both cache the tabs you've discovered, as well as wrap them in wrapper-objects to facilitate easier changes to their core properties.

All in all, it's a bit of work, but can be done. Unfortunately, however, I can't, at present, help you more than by just giving pointers...

Good luck!

Best regards, Alexander.

[IosDeveloperHarsh]

Hi Alexander,

In FixedMode = true; I need to change the FixedInactiveIconColor and ActiveTabColor but giving error System.InvalidOperationException: This BottomBar already has items! You must call SetFixedInactiveIconColor() before setting any items.

I have got the ItemContainer container object in rendrer how should i processed further.

Thanks in Advance, Harsh

[AlexanderMelchers]

Hi @IosDeveloperHarsh,

My OnElementChanged event handler starts like this:

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(Color.White.ToAndroid());
this.BottomBar.SetActiveTabColor(this.ColorTabSelected);

Observe first of all that I set FixedMode before allowing the native control to be instantiated by a call to the base-method. Secondly, I set the active tab colour directly on the bottom bar control itself, which is, unfortunately, not accessible from the NuGet-version of the BottomNavigationBarXF without making use of reflection (see my #51). Setting the active tab colour following the above method is not actually needed and is more of a formality, however, since I believe I also found FixedInactiveColor not to be working. Hence, I just fall back to updating the tab icon and caption colours on the native Android controls myself: set them to the active colour once a tab becomes active and likewise resetting the colour of the inactive tabs/the previously active tab. Tab changes can be detected using the Element's CurrentPageChanged-event, which seems perfectly suitable timing to update the tab colours. As explained in my previous post, however, you'll need to do some work to get to the native Android controls used to render the tab icons and captions...

Unfortunately, I can't help you any further than this, but hope you've got enough pointers from this to get started ;)

All the best, Alexander.

[IosDeveloperHarsh]

Hello Alexander,

Thanks for the help i was able to change the SetActiveTabColor.

I do not understand how to get native Android controls used to render the tab icons and captions.

Just by which method i get those and change the color of them.

[AlexanderMelchers]

Hi Harsh,

The native tab controls are simply child views of the bottom bar's ItemContainer already mentioned above. So if you first get the bottom bar control itself using reflection, you could then access its ItemContainer to iterate over the child views using the ChildCount and GetChildAt methods. These child views are actually ViewGroups, therefore contain further controls - namely the icon and label. These have the following resource IDs - BottomNavigationBar.Resource.Id.bb_bottom_bar_icon and BottomNavigationBar.Resource.Id.bb_bottom_bar_title - and can thus be retrieved using FindViewById (one's an ImageView the other a TextView). Make sure to use AppCompat to enhance what you can do with these controls...

Most of this information can be gathered from the source code of the Bottom Navigation Bar project itself, as well as from debugging with/inspecting the Android layout using the Android device monitor's interactive screenshot tool.

Good luck!

Alexander.