Forum Xamarin Xamarin.Forms

Can i add an indicator in the Tab bar?

I need implement an indicator in the tab bar shell and the indicator has to change the colo color when the shell item is in Foreground.

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Yes, you can add the indicator in the TabBar of shell. You should achieve it by shell custom renderer.

    You can override the CreateShellItemRenderer method in the shell custom renderer like following code.

     [assembly: ExportRenderer(typeof(Shell), typeof(TodoShellRenderer))]
     namespace TodosSample.Droid.Renderers
     {
        public class TodoShellRenderer : ShellRenderer
        {
        public TodoShellRenderer(Context context) : base(context)
        {
        }
    
        protected override IShellItemRenderer CreateShellItemRenderer(ShellItem shellItem)
        {
            return new TodoShellItemRenderer(this);
        }
       }
     }
    

    Then add the indicator in the OnCreateView method of TodoShellItemRenderer

       public class TodoShellItemRenderer : ShellItemRenderer
    {
        FrameLayout _shellOverlay;
        BottomNavigationView _bottomView;
    
        public TodoShellItemRenderer(IShellContext shellContext) : base(shellContext)
        {
        }
    
        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            var outerlayout = base.OnCreateView(inflater, container, savedInstanceState);
            _bottomView = outerlayout.FindViewById<BottomNavigationView>(Resource.Id.bottomtab_tabbar);
            _shellOverlay = outerlayout.FindViewById<FrameLayout>(Resource.Id.bottomtab_tabbar_container);
    
            if (ShellItem is TodoTabBar todoTabBar && todoTabBar.LargeTab != null)
                SetupLargeTab();
    
            return outerlayout;
        }
      }
    

    You can refer to this link about customizing the TabBar
    https://www.andrewhoefling.com/Blog/Post/xamarin-forms-shell-customizing-the-tabbar-android

    If you want to update the view when contentpage changed, you can use messageCenter to achieve that.

  • Hjuanma1Hjuanma1 Member ✭✭

    Sorry @leonLu, I dont understent how to add the indicator in the current item ... i tried to add a view above of the shell icon bat thats result in a red line above of of all tab bar.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Can you provide more details about your needs? what kind of the indicator? You want to heigh light the current item when you click the item or you want to achieve the indicator like the Carousel View

  • Hjuanma1Hjuanma1 Member ✭✭

    @LeonLu I need a buttom navigation bar with an indicator in the current item, now I have a custom control that simule the tab bar, but the requirement is use Xamarin shell navigation

    Excume for the late response.
    Thanks

Sign In or Register to comment.