I am attempting to match a design like this..

[![enter image description here](https://i.stack.imgur.com/pKGWf.png)](https://i.stack.imgur.com/pKGWf.png)

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](https://i.stack.imgur.com/9NKfh.png)](https://i.stack.imgur.com/9NKfh.png)

(Selected)

[![enter image description here](https://i.stack.imgur.com/rJR2f.png)](https://i.stack.imgur.com/rJR2f.png)

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](https://stackoverflow.com/users/1341538/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](https://i.stack.imgur.com/zwXZ6.png)](https://i.stack.imgur.com/zwXZ6.png)

**Selected center icon**

[![enter image description here](https://i.stack.imgur.com/TiVut.png)](https://i.stack.imgur.com/TiVut.png)

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.