Heights of tabs in TabLayout does not change properly after navigation

Question

I have a problem with heights of LinearLayouts of a TabLayout. When I change between tabs and navigate to other pages from bottom navigation bar and come back to the page with tabs, height of the passive tab (the tab was not open when we navigate between pages) is set as the active tab’s height. How can I fix this? Example screenshots are below:

Expected version of tab 1

Expected version of tab 2

What happens when we navigate to other pages from tab 2 and come back and switch to tab 1

Main screen:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".homepage.UsageFragment"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_header_2"
        android:padding="16dp">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/menu_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:minWidth="0dp"
            android:padding="0dp"
            app:icon="@drawable/ic_icon_menu"
            app:iconPadding="0dp"
            app:rippleColor="#00FFFFFF" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/notifications_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:background="@android:color/transparent"
            android:minWidth="0dp"
            android:padding="0dp"
            app:icon="@drawable/ic_baseline_notifications_24"
            app:iconPadding="0dp"
            app:iconSize="30dp"
            app:rippleColor="#00FFFFFF"
            tools:ignore="RelativeOverlap" />

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="20dp">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:tabSelectedTextColor="@color/white"
            app:tabTextColor="@color/imece_black"
            android:background="@drawable/tab_background"
            app:tabBackground="@drawable/tab_selector"
            app:tabIndicator="@null"
            app:tabTextAppearance="@style/tabFontStyle"
            android:fillViewport="true"
            app:tabGravity="fill"
            >

        </com.google.android.material.tabs.TabLayout>

        <View
            android:layout_width="0dp"
            android:layout_height="12dp"/>

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" >

        </androidx.viewpager2.widget.ViewPager2>

    </LinearLayout>

</LinearLayout>