TabbedPage height and title

arturmuller

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

Yelinzh

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/

arturmuller

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).

arturmuller

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

Yelinzh

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

arturmuller

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.