question

$$ANON_USER$$ avatar image
0 Votes"
$$ANON_USER$$ asked $$ANON_USER$$ commented

Xamarin Bottom Custom Tab Bar

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]: /answers/storage/attachments/41499-image.png

dotnet-xamarin
· 14
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.

Hi,Bhuwancb99. For this function, you could create a custom shell renderer to set the style for toolbar on each platform. You could google with the keyword as Xamarin.Forms Shell: Customizing the TabBar (Android) to check the related documentation.

1 Vote 1 ·

Hi @JarvanZhang-MSFT

thanks for this reply. I am implementing this but it's only in Android specific. I want same code on iOS specific also can you share me same code for iOS Devices. and also on android if i set Shell.TabBarIsVisible="False" then below tab is visible false but center custom freen circle image not hide it's display in all pages.

0 Votes 0 ·

Have you tried Xamarin Community Toolkit TabView?

https://www.youtube.com/watch?v=---3P90XHtE

0 Votes 0 ·

yes i tried but i have all contentpage page and inside tabview we are using only contentview page so it's not working for me if possible can we use contentpage inside tabview.

0 Votes 0 ·
JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered

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.


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.

JarvanZhang-MSFT avatar image
1 Vote"
JarvanZhang-MSFT answered JarvanZhang-MSFT edited

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.


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.

mkanyo avatar image
0 Votes"
mkanyo answered $$ANON_USER$$ commented

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



· 4
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.

@mkanyo thanks for the sharing code but my all problem solved by above suggested @JarvanZhang-MSFT code and working both platform Android and iOS perfectlly.

1 Vote 1 ·

Could you please share your solution that got this to work? I would like to try it too.

0 Votes 0 ·

Hi @QuintonViljoen-4082 please find the attached PDP file code for both android and iOS. on Every page onappearing, write below code Constants.IsTabBarVisible = true;[100606-ios.pdf][1] Shell.SetTabBarIsVisible(this, true); Shell.SetNavBarIsVisible(this, true); if (Device.RuntimePlatform == Device.iOS) Xamarin.Forms.MessagingCenter.Send<object, bool>(this, "ShellCustomTabBarClickedEventiOS", Constants.IsTabBarVisible); [1]: /answers/storage/attachments/100606-ios.pdf

0 Votes 0 ·
Show more comments