Shell TabBar rounded corners override default background color (View) behind

Question

I'm applying rounded corner on a Shell TabBar like in Xamarin Forms Shell TabBar Rounded Corner.

My question: is it possible to put the view (background color) behind instead of above (default black color)?

Answer 1

You can set the BackgroundColor of the Parent to either the current ContentPage BackgroundColor or to it Content (probably a Layout) BackgroundColor.

    public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            var currentContentPage = (Shell.Current.CurrentPage as ContentPage);
            if (currentContentPage == null)
            {
                return;
            }

            if (currentContentPage.Content != null && currentContentPage.Content.BackgroundColor != Color.Transparent)
            {
                (bottomView.Parent as LinearLayout)?.SetBackgroundColor(currentContentPage.Content.BackgroundColor.ToAndroid());
            }
            else
            {
                (bottomView.Parent as LinearLayout)?.SetBackgroundColor(currentContentPage.BackgroundColor.ToAndroid());
            }

            bottomView.SetBackgroundResource(Resource.Drawable.bottombackground);
        }

Note

Since it is a follow-up question I just put the relevant code specific for this question, the full code could be found in https://stackoverflow.com/a/65784730

Answer 2

You can define the drawable background as follow:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="#f00" />
            <corners android:topLeftRadius="20dp" android:topRightRadius="20dp" />
        </shape>
    </item>
</layer-list>

In addition, you can set the Elevation property to 0 in order to prevent the shadow:

bottomView.SetBackgroundResource(Resource.Drawable.bottombackground);
bottomView.Elevation = 0;