Android BottomNavigationView One tab with different unselected/selected colors

Question

I am attempting to match a design like this..

Notice that the "selected tab color tint" is a blue, but the center tab's icon should always be the green circle with the white clock in the middle.

I've tried a number of things. First trying to do it programmatically by using a layer-list XML resource that had the green circle and clock PNG resource, which didn't work at all. Then I just got the designer to give me the full icon(clock and green circle), but now I'm running into this issue..

(Unselected)

(Selected)

I'm failing at finding the correct terms to search for on Google to fix this.

In the end, I need the selected tab color to be blue, but I need the center tab icon to always be the actual icon with no additional coloring(essentially it needs to look exactly like the .png).

PS: I am using Xamarin.Forms, FreshMvvm, and the FreshTabbedFONavigationContainer. However, through the Renderer, I have direct access to the BottomNavigationView and all of the other native Android components. So the solution does not have to be a Xamarin solution. A java/kotlin solution would work also and I can just convert it to Xamarin.

======================

EDITED:

======================

So I have gotten a lot further using Andres Castro code below, but I'm still having the same issue as before. Using Andres' code below, I switched back to using FontAwesome for the icons(which works great), but in doing so means I needed to use a LayerDrawable to create the circle/icon center tab icon.

So this is what I have so far..

Unselected center icon

Selected center icon

As you can see, the center icon is still gray when unselected and blue when selected(the proper selected/unselected colors of the other 4 icons).

Here is the code I have so far pertaining to the center icon..

UpdateTabbedIcons

private void UpdateTabbedIcons()
{
    for (var i = 0; i < Element.Children.Count; i++) {
        var tab = _bottomNavigationView.Menu.GetItem(i);

        var element = Element.Children[i];
        if (element is NavigationPage navigationPage) {
            //if the child page is a navigation page get its root page
            element = navigationPage.RootPage;
        }

        UpdateTabIcon(tab, element);
    }
}

UpdateTabIcon

public void UpdateTabIcon(IMenuItem menuItem, Page page)
{
    var icon = page?.Icon;
    if (icon == null) return;

    var drawable = new IconDrawable(Context, icon, "fa-regular-pro-400.ttf");

    var element = Element.CurrentPage;
    if (element is NavigationPage navigationPage) {
        //if the child page is a navigation page get its root page
        element = navigationPage.RootPage;
    }

    if (page is DoNowTabPage) { //Page for center icon
        drawable.Color(Helpers.Resources.White.ToAndroid());
        var finalDrawable = GetCombinedDrawable(drawable);
        menuItem.SetIcon(finalDrawable);
        return;
    } else if (element == page) {
        drawable.Color(BarSelectedItemColor.ToAndroid());
    } else {
        drawable.Color(BarItemColor.ToAndroid());
    }

    menuItem.SetIcon(drawable);
}

GetCombinedDrawable

private Drawable GetCombinedDrawable(IconDrawable iconDrawable)
{
    var displayMetrics = Resources.DisplayMetrics;

    GradientDrawable circleDrawable = new GradientDrawable();
    circleDrawable.SetColor(Helpers.Resources.Green.ToAndroid());
    circleDrawable.SetShape(ShapeType.Oval);
    circleDrawable.SetSize((int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 500, displayMetrics), (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 500, displayMetrics));
    circleDrawable.Alpha = 1;

    var inset = (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 140, displayMetrics);
    var bottomInset = (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 40, displayMetrics);
    LayerDrawable finalDrawable = new LayerDrawable(new Drawable[] { circleDrawable, iconDrawable });
    finalDrawable.SetLayerHeight(1, iconDrawable.IntrinsicHeight);
    finalDrawable.SetLayerWidth(1, iconDrawable.IntrinsicWidth);
    finalDrawable.SetLayerInset(1, inset, inset, inset, inset + bottomInset);
    finalDrawable.SetLayerInsetBottom(0, bottomInset);
    finalDrawable.ClearColorFilter();

    return finalDrawable;
}

As you can see in the GradientDrawable that I'm creating for the circle, I am setting it's color to my Green color(I have a custom class called Resources..that's not the Android Resources class).

So that's where I'm stuck. I am setting the circle drawable to having a green color, but once in the BottomNavigationView, it's color always matches the unselected/selected colors of the other icons.

Hoping to get past this final issue. Thanks for any help.

Answer 1

Since you have access to the bottom navigation view, you can just "redraw" your bottom toolbar every time you switch pages. We did something similar and didn't notice any performance issues.

You will first want to monitor page changes by subscribing to page change inside OnElementChanged

Element.CurrentPageChanged += ElementOnCurrentPageChanged;

Then inside ElementOnCurrentPageChanged you can traverse each page and get the menu item for that page

private void UpdateTabbedIcons()
{
    for (var i = 0; i < Element.Children.Count; i++)
    {
        var tab = _bottomNavigationView.Menu.GetItem(i);

        var element = Element.Children[i];
        if (element is NavigationPage navigationPage)
        {
            //if the child page is a navigation page get its root page
            element = navigationPage.RootPage;
        }

        UpdateTabIcon(tab, element);
    }
}

In our case we used font icons so we drew the icons and set the colors every time.

public void UpdateTabIcon(IMenuItem menuItem, Page page)
{
    var icon = page?.Icon?.File;
    if (icon == null) return;

    var drawable = new IconDrawable(Context, "FontAwesome.ttf", icon).SizeDp(20);

    var element = Element.CurrentPage;
    if (element is NavigationPage navigationPage)
    {
        //if the child page is a navigation page get its root page
        element = navigationPage.RootPage;
    }

    if (element == page)
    {
        drawable.Color(BarSelectedItemColor.ToAndroid());
    }
    else
    {
        drawable.Color(BarItemColor.ToAndroid());
    }

    menuItem.SetIcon(drawable);
}

We also had to override OnAttachedToWindow to make sure the icons were redraw when returning to the app from different states.

protected override void OnAttachedToWindow()
{
    UpdateTabbedIcons();

    base.OnAttachedToWindow();
}

You will have to modify this some to fit your use case but I think this method should accomplish what you are looking for.

Answer 2

BottomNavigationView is painfully more difficult than its iOS implementation. I did some research to see if what you were asking was possible, and then when I saw it in Android native, I started thinking of ways to make it happen.

To implement your last challenge, you would have to programmatically change the selected tint/color every time depending on the index of the bottom navigation view.

Answer 3

you can use SVG images & make your own color attribute and make a drawable selector for center icon as well as other bottom navigation view icon some how like below:

in colors.xml file

    <color name="color_bottom_selected">#44C8F5</color>
 <color name="color_bottom_unselected">#c0c0c0</color>

in attrs.xml file

   <attr name="color_bottom_unselected" format="color" />
    <attr name="color_bottom_selected" format="color" />

in SVG image file

replace hardcoded color value with your attribute

android:fillColor="#fff" to android:fillColor="?attr/color_bottom_unselected"

and don't forget to make selector drawable

Answer 4

Try to use tint mode DST, which will simply ignore the tint.

Add this line into your method GetCombinedDrawable()

circleDrawable.setTintMode(PorterDuff.Mode.DST);

If this won't work, try this:

finalDrawable.ClearColorFilter();
finalDrawable.setTintMode(PorterDuff.Mode.DST);