设置“材质”选项卡布局的样式

时间:2020-05-20 15:54:47

标签: android kotlin material-design android-tablayout material-components

我正在使用kotlin在我的android应用程序中进行材质设计。我想知道如何设置标签布局的样式,如下图所示。谢谢!

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"
        />

已解决:

<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"
        />

1 个答案:

答案 0 :(得分:1)

只需使用 app:tabIndicatorGravity="stretch" 属性来拉伸指示器以匹配此布局中选项卡项目的高度和宽度。
您也可以使用app:tabIndicatorColor属性设置背景颜色:

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

enter image description here

删除 style="@style/Widget.AppCompat.Light.ActionBar.TabBar"