Position ViewPager's (Carousel/Slider) indicators (dots) in bottom using TabLayout android studio

I want to position my dots in bottom.. I dont know why they are in top of my viewPager(image below) any solution ?

my activity_main.xml :

  <androidx.viewpager.widget.ViewPager

    android:foregroundGravity="center"
    android:id="@+id/viewPager"
    android:layout_centerInParent="true"
    android:overScrollMode="never"
    android:clipToPadding="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@drawable/tab_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp"/>
</androidx.viewpager.widget.ViewPager>

Use:

  <androidx.viewpager.widget.ViewPager
   ....>

       <com.google.android.material.tabs.TabLayout
           android:layout_gravity="bottom"
           .../>

  </androidx.viewpager.widget.ViewPager>