question

6666666 avatar image
0 Votes"
6666666 asked LeonLu-MSFT commented

How to add a border in bottom menu in xamarin.forms shell?

I set the bottom menu tab bar to #ffffff. and can add a border in it?

dotnet-xamarinforms
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

Do you want to achieve the result like following screenshot?

132285-image.png

If so, you can create a custom renderer for Shell. Here is a similar thread:

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace ShellDemo.Droid
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new CustomBottomNavView();
        }
    }

    public class CustomBottomNavView : IShellBottomNavViewAppearanceTracker
    {
        public void Dispose()
        {

        }

        public void ResetAppearance(BottomNavigationView bottomView)
        {

        }

        public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            bottomView.SetBackgroundColor(Android.Graphics.Color.White);
        }
    }
}


Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (4.3 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@6666666 If you want to achieve this kind of border

132346-image.png


You can use bottomView.SetBackgroundDrawable(Android.App.Application.Context.GetDrawable( Resource.Drawable.myBackgroundBottomDrawer)); in SetAppearance method,

Then create a xml in Drawable folder. solid is fill color, stroke is border

<?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="@color/launcher_background"></solid>
      <stroke android:width="6dp" android:color="@color/colorPrimaryDark" />
    </shape>
  </item>
 
</layer-list>



0 Votes 0 ·
image.png (48.6 KiB)