Forum Xamarin Xamarin.Forms

Bottom Tab Bar

Hi
how to change bottom tab bar like this.
other icon is done i want center green icon how to adjust

Best Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    Accepted Answer

    Do you use Shell for your layout?

    If so, you can create a custom renderer for your ShellRenderer.

    [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);
            }
        }
    }
    

    Create a ShellItemRenderer, create a FrameLayout as the parent container and then an additional FrameLayout at the end of the stack which gives you the ViewGroup to add your center green icon in the SetupLargeTab method.

        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;
            }
    
            private async void SetupLargeTab()
            {
                var todoTabBar = (TodoTabBar)ShellItem;
                var layout = new FrameLayout(Context);
    
                var imageHandler = todoTabBar.LargeTab.Icon.GetHandler();
                Bitmap bitmap = await imageHandler.LoadImageAsync(todoTabBar.LargeTab.Icon, Context);
                var image = new ImageView(Context);
                image.SetImageBitmap(bitmap);
    
                layout.AddView(image);
    
                var lp = new FrameLayout.LayoutParams(200, 200);
                _bottomView.Measure((int)MeasureSpecMode.Unspecified, (int)MeasureSpecMode.Unspecified);
                lp.BottomMargin = _bottomView.MeasuredHeight / 2;
    
                layout.LayoutParameters = lp;
    
                _shellOverlay.RemoveAllViews();
                _shellOverlay.AddView(layout);
            }
        }
    }
    

    Here is demo.

  • bhuwancb99bhuwancb99 Member ✭✭
    Accepted Answer

    how to implement same thing on Ios Device.
    you are mention only for android and it's working

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    Accepted Answer

    Do you use Shell for your layout?

    If so, you can create a custom renderer for your ShellRenderer.

    [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);
            }
        }
    }
    

    Create a ShellItemRenderer, create a FrameLayout as the parent container and then an additional FrameLayout at the end of the stack which gives you the ViewGroup to add your center green icon in the SetupLargeTab method.

        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;
            }
    
            private async void SetupLargeTab()
            {
                var todoTabBar = (TodoTabBar)ShellItem;
                var layout = new FrameLayout(Context);
    
                var imageHandler = todoTabBar.LargeTab.Icon.GetHandler();
                Bitmap bitmap = await imageHandler.LoadImageAsync(todoTabBar.LargeTab.Icon, Context);
                var image = new ImageView(Context);
                image.SetImageBitmap(bitmap);
    
                layout.AddView(image);
    
                var lp = new FrameLayout.LayoutParams(200, 200);
                _bottomView.Measure((int)MeasureSpecMode.Unspecified, (int)MeasureSpecMode.Unspecified);
                lp.BottomMargin = _bottomView.MeasuredHeight / 2;
    
                layout.LayoutParameters = lp;
    
                _shellOverlay.RemoveAllViews();
                _shellOverlay.AddView(layout);
            }
        }
    }
    

    Here is demo.

  • bhuwancb99bhuwancb99 Member ✭✭
    Accepted Answer

    how to implement same thing on Ios Device.
    you are mention only for android and it's working

  • bhuwancb99bhuwancb99 Member ✭✭

    i am also facing issue when click plus icon it's not redirected to respective page.

  • bhuwancb99bhuwancb99 Member ✭✭

    if set Shell.TabBarIsVisible="False" then it's display how to hide please suggest.

Sign In or Register to comment.