Forum Xamarin.Forms

TabbedPage height and title

Hi,

  1. I have put a TabbedPage so the buttons/tabbuttons are on the top of my screen. How can I set the height of them? I wand to add padding to it so its a little bit larger(in height) than default.

  2. How can I remove all the titles (text) and padding of the tab buttons? I want to see only the icons. And ideally (if possible) to show the title only of the current selected tab. How can I achieve that? If I set Title="" I get an ugly spacing below all icons in the tabbar.

Thank you in advance

Answers

  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited February 2020

    Try to create a TabbedPage custom renderer to achieve the requirement on each platform.

    [assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(NavigationPageRendererDroid))]
    namespace App1.Droid
    {
        public class CustomTabbedPageRcenderer : TabbedPageRenderer
        {
            public CustomTabbedPageRcenderer(Context context) : base(context)
            {
            }
    
            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Page> e)
            {
                base.OnElementChanged(e);
                //add the function code
            }
        }
    }
    

    Tutorial:
    https://xamgirl.com/extending-tabbedpage-in-xamarin-forms/

  • arturmullerarturmuller Member ✭✭✭

    That does not answer the question. I do not see how they actually remove the title nor setting the height. They are doing something else (removing some animation present earlier, that I actually would like to have).

  • arturmullerarturmuller Member ✭✭✭

    Seems like what I am looking for is a BottomNavigationBar in Material Design style in Xamarin 4.

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    How can I set the height of them? I wand to add padding to it so its a little bit larger(in height) than default.

    For Android, add android:minHeight in Tabbar.xml

    <android.support.design.widget.TabLayout 
        ...
        android:minHeight="80dp"
        />
    

    or add the code in MainActivity class

    Android.Support.Design.Widget.TabLayout tabBar = FindViewById<Android.Support.Design.Widget.TabLayout>(Resource.Id.sliding_tabs);
    tabBar.SetMinimumHeight(300);
    

    For ios, use a custom renderer.

    Check the link:
    https://stackoverflow.com/questions/54561493/how-to-customize-the-size-of-the-bar-in-a-tabbedpage-xamarin-forms

  • arturmullerarturmuller Member ✭✭✭

    I can't manage to get rid of the titles with a custom renderer. Anyone can provide and example or alternative solution? Seems like some time ago that was the standard to not have titles.

Sign In or Register to comment.