Styling TabLayout in Android

Question

I have sample which I should realize in code. Something like pagination. And I chose TabLayout. Mechanically all works as it should be. But it doesn't look right. Picture of sample and my try 😭

Below is a code of what I did. For circles I made simple drawable selector with shape 'oval' and 'state_selected':

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayoutGeneration"
        android:layout_width="match_parent"
        android:layout_height="78sp"
        android:layout_marginTop="10sp"
        app:tabBackground="@drawable/selector_navigation_generator"

        app:tabIndicatorGravity="bottom"
        app:tabMaxWidth="41sp"
        app:tabTextColor="@color/white">

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tabDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tabCity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tabLocation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3" />
    </com.google.android.material.tabs.TabLayout> ```