이전 단락

안드로이드라면 머티리얼 디자인.
머티리얼 디자인 해시태그 하면 이거예요.

Components - Tabs
https://material.io/guidelines/components/tabs.html#tabs-usage
그나저나 TabLayout을 쓰면 이렇게 돼요.
하지만 세상에도 이런 꼬리표 수요가 있을 것이다.
라벨은 현실 세계의 은유를 사용할 때의 라벨이다.

좋다.탭서류철을 정말 쌓고 싶다.
즉시 실시하다.

이루어지다

아무튼 일단 TabLayout.
layout_Height에서 맞춤형 테이블 위치의 높이를 가리키며 백그라운드에서 배경 색을 지정합니다.
TabLayout에 TabItem 3개를 추가합니다.
main_layout.xml

<LinearLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/notification_tabs"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="#A0F0A0"
        >
        <android.support.design.widget.TabItem
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:layout="@layout/tab1"
            />
        <android.support.design.widget.TabItem
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:layout="@layout/tab2"
            />
        <android.support.design.widget.TabItem
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:layout="@layout/tab3"
            />
    </android.support.design.widget.TabLayout>
    <!--
        The contents area.
    -->
</LinearLayout>

각 TabItem의 android:layout에서 지정한 탭의 레이아웃이 여기에 있습니다.
탭의 원형은 백그라운드에서 지정한drawable를 통해 이루어집니다.
layout/tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/tab_shape_rounded_corner">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="タブ1"
        android:textColor="#000000"
        android:paddingTop="4dp"
        android:textAlignment="center" />

</RelativeLayout>

저기drawable.
두 개의 비슷한 item이 있는데 첫 번째 선택이 있을 때, 다음 선택이 없을 때의 디자인입니다.
xml만으로도 표현할 수 있는 게 좋아요.
drawable/tab_shape_rounded_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <corners android:topLeftRadius="5dp" android:topRightRadius="5dp" />
            <solid android:color="@color/white" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:topLeftRadius="5dp" android:topRightRadius="5dp" />
            <solid android:color="#A0A0A0" />
        </shape>
    </item>
</selector>

만약 이렇다면 라벨 사이의 거리가 너무 멀고 인디언들이 보일 수 있으니 기본 라벨 디자인을 살짝 해 보세요.
values/styles.TabLayout의 항목을 xml에 완전히 추가합니다.
values/styles.xml

.
.
    <style name="Base.Widget.Design.TabLayout" parent="android:Widget">
        <item name="tabMaxWidth">@dimen/design_tab_max_width</item>
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">0dp</item>
        <item name="tabPaddingStart">1dp</item>
        <item name="tabPaddingEnd">1dp</item>
        <item name="tabBackground">?attr/selectableItemBackground</item>
        <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
        <item name="tabSelectedTextColor">?android:textColorPrimary</item>
    </style>
.
.

tabIndicator Height를 0으로 설정하고 tabPaddingStart와 끝에서 탭의 폭을 조정합니다.
이렇게 하면 완성된다.
도움이 된다면