Xamarin Forms: How to reduce height of Tabs using TabbedPageRenderer

Question

I am developing Tabs using custom TabbedPageRenderer. I need to reduce the height of Tabs. Tabs are showing huge margin at bottom & top side. See below my code MyTabbedPageRenderer.cs

    [assembly: ExportRenderer(typeof(MyTabbedPage), typeof(MyTabbedPageRenderer))]
namespace TabbedApp.Droid
{
    public class MyTabbedPageRenderer : TabbedPageRenderer
    {
        protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
        {
            base.SetTabIcon(tab, icon);
            tab.SetCustomView(Resource.Layout.CustomTabLayout);           
            var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);
            var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);
            tv.SetText(tab.Text, TextView.BufferType.Normal);
            imageview.SetBackgroundDrawable(tab.Icon);

        }
    }
}

CustomTabLayout.axml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="45dp"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp" />
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="hello"
        android:gravity="center"
        android:textSize="13dp" />
</LinearLayout>

MainPage & MyTabbedPage

public partial class MainPage : MyTabbedPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

public class MyTabbedPage : TabbedPage
    {

    }

Main.xaml

 <MyTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="TabbedApp.MainPage"        
                 xmlns:local="clr-namespace:TabbedApp">
         <local:DairyTabPage  Icon="dairy" HeightRequest="10" WidthRequest="10" ></local:DairyTabPage>
         <local:MykidTab   Icon="kid" ></local:MykidTab>
         <local:Events   Icon="events"></local:Events>
         <local:About  Icon="about"></local:About>
    </MyTabbedPage>

Answer 1

try this for layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:background="@color/colorPrimary"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_margin="8dp"
        android:layout_gravity="center_vertical" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center"
        android:text="hello" />
</LinearLayout>

Programmatically you can try this

    protected override void OnCreate(Bundle bundle)
    {
        FormsAppCompatActivity.TabLayoutResource = Resource.Layout.tabs;
        base.OnCreate(bundle);
        global::Xamarin.Forms.Forms.Init(this, bundle);
        RegisterIoC();
        LoadApplication(new App());
        setupTabIcons();
    }

    private void setupTabIcons() 
    {
        var tabLayout = (TabLayout) FindViewById(Resource.Id.tabs);
        if(tabLayout != null)
        {
            TextView tabOne = (TextView)LayoutInflater.From(this).Inflate(Resource.Layout.tab, null);
            tabOne.Text = "ONE";
            tabOne.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.ic_tab_todo, 0, 0);
            tabLayout.GetTabAt(0).SetCustomView(tabOne);

            TextView tabTwo = (TextView)LayoutInflater.From(this).Inflate(Resource.Layout.tab, null);
            tabTwo.Text = "TWO";
            tabTwo.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.ic_tab_pending, 0, 0);
            tabLayout.GetTabAt(1).SetCustomView(tabTwo);

            TextView tabThree = (TextView)LayoutInflater.From(this).Inflate(Resource.Layout.tab, null);
            tabThree.Text = "THREE";
            tabThree.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.ic_tab_done, 0, 0);
            tabLayout.GetTabAt(2).SetCustomView(tabThree);
        }