TabLayout

• TabLayout을 이용해 상단 탭 만들기

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/TabTheme"
        app:layout_constraintTop_toBottomOf="@+id/et_search"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorHeight="5dp">

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

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

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

TabItem을 이용하여 탭의 항목을 추가한다.

 

• values/styles.xml

<style name="TabTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#A18CD1</item>
        <item name="android:textColorPrimary">#000000</item>
        <item name="android:textColorSecondary">@android:color/darker_gray</item>
        <item name="colorAccent">#A18CD1</item>
    </style>

styles.xml에서 indicator와 텍스트의 색상을 변경할 수 있다.

app:tabIndicatorFullWidth="false"를 추가해주면 indicator의 넓이를 텍스트의 길이에 맞게 조절할 수 있다.

 

 

굿