how to implement a Revolut like tabLayout behavior?

Question

In the app that I want to build I use a tabLayout view with viewPager 2. I am having difficulties in obtaining the same behavior that the Revolut tab navigation bar has:

• starting tab to be aligned with the content
• when scrolling left the indentation disappears
• when last tab is visible, it's end is aligned with the content (padding is added)
• same behavior for over-scroll

attached a picture of revolut navigation bar. revolut's tab navigation bar

this is my working xml file:

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Toolbar -->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/header"
            ... >
           ...

        </androidx.constraintlayout.widget.ConstraintLayout>


        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="@dimen/tab_layout_height"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/header"
            android:paddingStart="16dp"
            android:background="@color/transparent"
            app:tabIndicator="@drawable/indicator"
            app:tabIndicatorHeight="4dp"
            app:tabMode="scrollable"
            app:tabIndicatorAnimationMode="linear"
            app:tabMaxWidth="@dimen/tabs_width"/>

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tabLayout"
            app:layout_constraintBottom_toBottomOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

I have tried using viewTreeObserver.addOnScrollChangedListener {}, to remove the padding on scroll left and apply it again after scrolling back, but it's not the desired outcome.

Can anyone give me some pointers on how to achieve revolut's tab layout behavior? 10x :)