How to display tablayout over ViewPager

Question

How to display the Tablayout over my ViewPager. I have tried many things but nothing worked out. Please have a look over the screenshot of how its displaying:

Screenshot

Here is my code snippet :

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

     <androidx.viewpager.widget.ViewPager
         android:id="@+id/main_header"
         android:layout_width="match_parent"
         android:layout_height="220dp"
         android:clipToPadding="false"
         android:overScrollMode="ifContentScrolls">
     <com.google.android.material.tabs.TabLayout
         android:id="@+id/tab_layout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:gravity="bottom"
         app:tabBackground="@drawable/tab_selector"
         app:tabGravity="center"
         app:tabIndicatorHeight="0dp"
         app:tabMode="fixed"
         app:tabPaddingBottom="20dp"
         app:tabRippleColor="@color/black" />
   </androidx.viewpager.widget.ViewPager>

</LinearLayout>

Any suggestion will be great help!! Thanks

Answer 1

Try with this layout

<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" 
    android:orientation="vertical"
    android:layout_height="wrap_content">
<androidx.viewpager.widget.ViewPager
        android:id="@+id/main_header"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:clipToPadding="false"
        android:overScrollMode="ifContentScrolls"/>

    <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="bottom"
            app:tabGravity="center"
            app:tabBackground="@drawable/tab_selector"
            app:tabIndicatorHeight="0dp"
            app:tabMode="fixed"
            app:tabPaddingBottom="20dp"
            app:tabRippleColor="#000000" /></RelativeLayout>