CODEWITHSUNDEEP
androidkotlinmaterial-designandroid-tablayoutmaterial-components
Aldor
Aldor

Reputation: 292

style the Material tab layout

I'm working with material design in my android app using kotlin. I wanna know how can I style my tab layout just like the way it's in the image shown below. Thanks!

Tab Layout

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/profileFreelancerTabLayoutCu"
        style="@style/Widget.AppCompat.Light.ActionBar.TabBar"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        app:tabTextColor="@color/colorPrimary"
        android:layout_marginVertical="20dp"
        android:layout_marginHorizontal="40dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/registeredOnValueProfileFreelancerCu"
        />

SOLVED:

<com.google.android.material.tabs.TabLayout
        android:id="@+id/profileFreelancerTabLayoutCu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="@color/colorPrimary"
        android:layout_marginVertical="20dp"
        android:layout_marginHorizontal="60dp"
        app:tabIndicatorGravity="stretch"
        app:tabIndicator="@drawable/tab_indicator_shape"
        android:background="@drawable/thicker_stroke_tab_layout"
        app:tabSelectedTextColor="@color/colorWhite"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginBottom="10dp"
        app:layout_constraintTop_toBottomOf="@+id/registeredOnValueProfileFreelancerCu"
        />

Upvotes: 0

Views: 2516

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363985

Just use the app:tabIndicatorGravity="stretch" attribute to stretch the indicator to match the height and width of a tab item in this layout.
Also you can set the background color using the app:tabIndicatorColor attribute:

  <com.google.android.material.tabs.TabLayout
      app:tabIndicatorGravity="stretch"
      app:tabIndicatorColor="@color/...."
      ...>

enter image description here

Remove the style="@style/Widget.AppCompat.Light.ActionBar.TabBar".

Upvotes: 1

Related Questions