TabLayout - Animated round indicator (changes to pill shape)

Question

How to implement a dot indicated tab layout that changes shape to pill when scrolling view pager.

This is the result I'm having right now, the bubble simply going from one to another.

This is the result I'm looking for, the bubble should convert to a pill.

My code for the round shape

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:innerRadius="0dp" android:shape="ring" android:thickness="4dp" android:useLevel="false">
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

My tab layout

   <com.google.android.material.tabs.TabLayout
      android:id="@+id/tab_layout"
      android:layout_width="45dp"
      android:layout_height="15dp"
      app:tabBackground="@xml/tab_default_dot"
      app:tabGravity="center"
      app:tabIndicatorColor="@color/white"
      app:tabIndicator="@xml/tab_default_dot"
      app:tabIndicatorGravity="stretch" />

Answer 1

Use this lib or look how author implement it