Xamarin Bottom Custom Tab Bar

Anonymous
2020-11-21T15:10:22.44+00:00

hi i want create tab bar below like that in Android and iOS devices like that but i am not getting any proper solution for that can you please suggest that how i can do that. and also if i set Shell.TabBarIsVisible="False" then below tab bar hide and if set Shell.TabBarIsVisible="True" then visible ![41499-image.png][1] [1]: /api/attachments/41499-image.png?platform=QnA

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,272 questions
{count} votes

Accepted answer
  1. JarvanZhang 23,931 Reputation points
    2020-11-27T05:55:28.447+00:00

    Hello,​

    Welcome to our Microsoft Q&A platform!

    Sorry for the mistake, it unnecessary to add a click event. Just get the instance of the ImageView and change the Visibility property's value.

       HomePage class  
       public partial class HomePage : ContentPage  
       {  
           ...  
           private void Button_Clicked(object sender, EventArgs e)  
           {  
               var value = Shell.GetTabBarIsVisible(this);  
               Shell.SetTabBarIsVisible(this, !value);  
               MessagingCenter.Send<HomePage, bool>(this, "Hi", !value);  
           }  
       }  
       ShellItemRenderer class  
       public class TodoShellItemRenderer : ShellItemRenderer  
       {  
           public TodoShellItemRenderer(IShellContext shellContext) : base(shellContext)  
           {  
               MessagingCenter.Subscribe<ProfilePage, bool>(this, "Hi", (s, arg) =>  
               {  
                   if (arg)  
                   {  
                       image.Visibility = ViewStates.Visible;  
                   }  
                   else  
                   {  
                       image.Visibility = ViewStates.Gone;  
                   }  
               });  
           }  
           ImageView image;  
           private async void SetupLargeTab()  
           {  
               image = new ImageView(Context);  
               ...  
           }  
       }  
    

    Best Regards,

    Jarvan Zhang


    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.

    0 comments No comments

2 additional answers

Sort by: Most helpful
  1. JarvanZhang 23,931 Reputation points
    2020-11-27T04:06:40.873+00:00

    Hello,​

    Welcome to our Microsoft Q&A platform!

    For the function in iOS, override the CreateShellItemRenderer method in the custom ShellRenderer class like on Android. Add the custom btn and the related code about the 'hide and display' function.

    Check the code:

       public class CustomShellRenderer : ShellRenderer  
       {  
           UIButton btn;  
           public CustomShellRenderer()  
           {  
               //use MessagingCenter to hide and show the button  
           }  
           protected override IShellItemRenderer CreateShellItemRenderer(ShellItem item)  
           {  
               var render = base.CreateShellItemRenderer(item);  
               var view = render.ViewController;=  
         
               btn = new UIButton(frame: new CoreGraphics.CGRect(0, 0, 60, 60));  
               this.View.Add(btn);  
         
               //customize button  
               btn.ClipsToBounds = true;  
               btn.Layer.CornerRadius = 30;  
               btn.BackgroundColor = UIColor.Red;  
               btn.AdjustsImageWhenHighlighted = false;  
         
               CGPoint center = new CGPoint();  
               //caculate to get the X and Y value of the button's location  
               center.Y = (view.View.Frame.X + view.View.Frame.Size.Height) - 30 - 22;//30 is half the height of UIButton, 22 is half the height of the tab bar  
               center.X = (view.View.Frame.Size.Width) / 2;  
               btn.Center = center;  
         
               //button click event  
               btn.TouchUpInside += (sender, ex) =>  
               {  
                   //use mssage center to inkove method in Forms project  
               };  
               return render;  
           }  
       }  
    

    Best Regards,

    Jarvan Zhang


    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.

    1 person found this answer helpful.

  2. mkanyo 1 Reputation point
    2021-01-07T12:53:38.287+00:00

    I managed to do something like this - however it won't overlay to the main content like in your screenshot but I thought I'd share:

    54369-2021-01-07-13h52-26.png

    using Android.Content;  
    using Android.Support.Design.Widget;  
    using YourNamespace.MobileApp.Droid.Renderers;  
    using Xamarin.Forms;  
    using Xamarin.Forms.Platform.Android;  
    using Android.Support.Design.Internal;  
    using Android.Views;  
      
    [assembly: ExportRenderer(typeof(YourNamespace.MobileApp.AppShell), typeof(YourNamespaceShellRenderer))]  
    namespace YourNamespace.MobileApp.Droid.Renderers  
    {  
      
        public class YourNamespaceShellRenderer : ShellRenderer  
        {  
            public YourNamespaceShellRenderer(Context context) : base(context)  
            {  
            }  
      
            protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)  
            {  
                return new BottomNavView(this, shellItem);  
            }  
        }  
      
        public class BottomNavView : ShellBottomNavViewAppearanceTracker  
        {  
            public BottomNavView(IShellContext context, ShellItem shellItem) : base(context, shellItem) { }  
      
            private FloatingActionButton floatingActionButton;  
      
            protected override void Dispose(bool disposing)  
            {  
                if (disposing && floatingActionButton != null)  
                {  
                    floatingActionButton.Click -= FloatingActionButton_Click;  
                }  
                base.Dispose(disposing);  
            }  
      
            public override void SetAppearance(Google.Android.Material.BottomNavigation.BottomNavigationView bottomView, IShellAppearanceElement appearance)  
            {  
                base.SetAppearance(bottomView, appearance);  
      
                var metrics = bottomView.Resources.DisplayMetrics;  
                var width = metrics.WidthPixels;  
                floatingActionButton = new FloatingActionButton(bottomView.Context);  
                var layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent);  
                ViewGroup.LayoutParams paramss = new ViewGroup.LayoutParams(  
                    ViewGroup.LayoutParams.WrapContent,  
                    ViewGroup.LayoutParams.WrapContent  
                );  
                ViewGroup.MarginLayoutParams marginLayout = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent);  
                marginLayout.SetMargins((int)(width / 2.3), 20, 0, 40);  
                floatingActionButton.Click += FloatingActionButton_Click;  
      
                floatingActionButton.LayoutParameters = marginLayout;  
                floatingActionButton.SetImageResource(Resource.Drawable.heart);  
                floatingActionButton.SetForegroundGravity(GravityFlags.Center);  
                floatingActionButton.SetExpanded(true);  
                floatingActionButton.Elevation = 6;  
      
                BottomNavigationMenuView bottomNavigationView = bottomView.GetChildAt(0) as BottomNavigationMenuView;  
                bottomView.AddView(floatingActionButton);  
            }  
      
            private void FloatingActionButton_Click(object sender, System.EventArgs e)  
            {  
                // TODO: handle action  
      
                int a = 5;  
            }  
        }  
    }