Xamarin BottomNavigationBar

Question

Xamarin BottomNavigationBar

Bujdy 1

Hi, i want to create navigation bar that will look like this

    <TabBar>  
        <ShellContent Title="Home" Icon="home.png" Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" />  
        <ShellContent Title="Books" Icon="book.png" ContentTemplate="{DataTemplate local:BooksPage}" />  
        <ShellContent Title="Reminder" Icon="reminder.png" ContentTemplate="{DataTemplate local:HomePage}" />  
        <ShellContent Title="User" Icon="user.png" ContentTemplate="{DataTemplate local:UserPage}" />  
    </TabBar>

This is how my code looks like, only thing missing is that i dont know how to implement that green circle to know which page i am currently on.

JarvanZhang 23,971

only thing missing is that i dont know how to implement that green circle to know which page i am currently on

Hi, Bujdy. Try creating a custom Shell renderer to achieve on each platform. For example, the tabbar of the shell on native Android is BottomNavigationView, you could get the bottomView control to add the fuction.

namespace AppShell.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 SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            //perform the work with the bottomView
        }
    }
}

James Montemagno 1 Reputation point

2021-05-04T22:08:33.837+00:00

I would recommend using the Xamarin Community Toolkit TabView if you don't want the default behavior -> https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/tabview