Two tabs in TabbedPage are not taking full width instead they are limited to their text width to the left corner of the tab

Question

I have to populate two tabs in TabbedPage in such a way that two tabs should take equal half widths of the tab.

Here is my code in TabbedPage:

protected override void OnAppearing()
    {
        base.OnAppearing();
        EquipmentGeneralInfoTab = new EquipmentGeneralInfoTab() { Title = "General" };
        EquipmentMaintenanceTab = new EquipmentMaintenanceTab() { Title = "Maintenance" };
        this.Children.Add(EquipmentGeneralInfoTab);
        this.Children.Add(EquipmentMaintenanceTab);
    }

Xaml code:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"  
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
         x:Class="TCRMobile.Pages.EquipmentInfoTabbedPage"
        Title="Equipment">

Tabbar.xaml:

<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/Your.Theme"
app:tabIndicatorColor="@color/tcr_green"
app:tabSelectedTextColor="@color/tcr_green"
app:tabTextColor="@color/black"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabTextAppearance="@style/tab_text"
app:tabMode="scrollable" />

How to accomplish my requirement?

Answer 1

Try to change the following code in Tabbar.xaml

 app:tabMode="scrollable"

To

 app:tabMode="fixed"