Search code examples
androidxamarinxamarin.formsxamarin.androidbottomnavigationview

Android BottomNavigationView One tab with different unselected/selected colors

I am attempting to match a design like this..

enter image description here

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)

enter image description here

(Selected)

enter image description here

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

enter image description here

Selected center icon

enter image description here

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.

Solution

  • 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.