Change Paddin from TabbedPage's NavigationBar

Question

Im building an app and I want to change the padding of the navigationbar of my TabbedPage. I'm writing it in Xamarin (C#). I want the navigationbar to have a distance of e.g 20pixels to all sides of the display. How do I achieve that? (image shows what I mean)

There must be a way to do this using a `TabbedPageRenderer` custom renderer — Cfun, Oct 14 '20 at 22:57

Lia · Answer 1 · 2020-10-21T08:55:41.773

From the image you provided, I believe what you're asking is to add Margin instead of padding to the Tab bar. And here is how we can achieve it by leveraging Custom Renderer:

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
namespace TabbedPageDemo.Droid
{
    class CustomTabbedPageRenderer: TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            TabLayout tabLayout = (TabLayout)ViewGroup.GetChildAt(1);
            int tabCount = tabLayout.TabCount;
            for (int i = 0; i < tabCount; i++)
            {
                Android.Views.View tab = ((ViewGroup)tabLayout.GetChildAt(0)).GetChildAt(i);
                ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams)tab.LayoutParameters;
                if (i == 0)
                {
                    p.SetMargins(50, 50, 0, 0); // set left + top margin for the first tabbar item
                }
                else if (i == tabCount - 1)
                {
                    p.SetMargins(0, 50, 50, 0); // set top + right margin for the last tabbar item
                }
                else {
                    p.SetMargins(0, 50, 0, 0); // set top margin for the rest tabbar item
                }
                tab.RequestLayout();
                tab.SetBackgroundColor(Android.Graphics.Color.LightGray);//add background color to highlight the tabbar area
            }
        }
    }
}

Use the CustomTabbedPage in your xaml and you'll get something like the screenshot:

Could you explain or provide a link to xf source code to understand how the layout is defined? Hierarchy/Children order..etc purpose of `RequestLayout()`?. it may help me with to achieve: https://stackoverflow.com/q/64397674/5228202 — Cfun, Oct 21 '20 at 10:17
@Cfun for the Hierarchy/Children order, I'm afraid the only way is to dig into the XF source code. Xamarin has a doc that elaborates the custom renderer and native controls for different Forms items, you can find more details in custom renderers in XF github repo. E.g. for TabbedPage, you can search for TabbedPageRenderer to help understand it's structure in Android native. — Lia, Oct 22 '20 at 03:04
here is the custom renderer and native control doc: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/renderers — Lia, Oct 22 '20 at 03:10
And for Shell, it's a bit different since it does not have a native control directly, Xamarin did a lot of customization to have shell layout in each platforms. I understand that there's little documentation about the details, what you want to achieve may not be easy and needs more investigation, you can turn to the custom renderer for shell in github repo for more information: https://github.com/xamarin/Xamarin.Forms/blob/5.0.0/Xamarin.Forms.Platform.Android/Renderers/ShellRenderer.cs — Lia, Oct 22 '20 at 03:19

Change Paddin from TabbedPage's NavigationBar

1 Answers1