TabIndicator not displaying with android:TabbedPage.ToolbarPlacement="Bottom" Xamarin Forms

Viewed 50

I am working on a Xamarin forms project and in one Tabbed page I need to use tab bar position at bottom. But when I do that the tab bar indicator not working/ not showing. I cannot use Xamarin community toolkit tabview either cause there is a bug when you use NavigationPage.HasNavigationBar="False" link .

If we remove android:TabbedPage.ToolbarPlacement, then tabindictor shows up.

LifeDueTabbedRM.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            NavigationPage.HasNavigationBar="False"
            android:TabbedPage.ToolbarPlacement="Bottom"
            x:Class="RSMapp.Views.RM.Life.LifeDueTabbedRM">
</TabbedPage>

LifeDueTabbedRM.xaml.cs

    public partial class LifeDueTabbedRM : TabbedPage
    {
        public LifeDueTabbedRM()
        {
            InitializeComponent();
        }

        public LifeDueTabbedRM(string c, string u)
        {
            InitializeComponent();

            this.Children.Add(new InforceDueView(c, u));
            this.Children.Add(new LapsDueView());

            this.UnselectedTabColor = Color.White;
            this.SelectedTabColor = Color.Blue;
            this.BarBackgroundColor = Color.FromHex("#f2b22c");
        }
}

Android project tabbar

<?xml version="1.0" encoding="utf-8"?>
<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/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="#05d1f0"
    app:tabIndicatorGravity="top"
    app:tabIndicatorHeight="1dp"
    app:tabGravity="fill"
    app:tabMode="fixed" />

Tab bar indicator

enter image description here

1 Answers

I have done a sample to test and the TabIndicator can display at the bottom of the TabbedPage.

According to this case, the problem is the Xamarin.Forms doesn't support the version of Xamarin.Google.Android.Material > 1.5.

What I used:

  1. Xamarin Forms 5.0.0.2478 in the share project
  2. Xamarin.Google.Android.Material 1.4.0.2 in the android part
  3. The code in your TabbedPage.xaml and TabbedPage.cs without the Android project tabbar

Update

My Tabbar.xml:

<com.google.android.material.tabs.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="@color/abc_primary_text_material_dark"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#05d1f0"
app:tabIndicatorGravity="top"
app:tabIndicatorHeight="1dp"
app:tabSelectedTextColor="#008000"
app:tabGravity="fill"
app:tabMode="fixed" />

When I deleted the NavigationPage.HasNavigationBar="False", the Tabbar.xml can work in the project, but when I set the NavigationPage.HasNavigationBar="False", the Tabbar.xml will change nothing.

It seems the Tabbar setting in the TabbedPage will cover the Tabbar.xml in the android part.

Related