AndroidTabLayoutの水平スクロールインジケーターを追加する方法

Question

AndroidTabLayoutの水平スクロールビューを追加しようとしています。

TabLayoutには複数のタブがあり、スクロール可能です。複数のタブがあるため、一部のタブは一見表示されません。ユーザーはスクロールして右端のタブ（通常は非表示）に移動する必要があるため、これらのタブはユーザーの注意を引くことはありません。

ユーザーがスクロールしてタブを見つけて使用できるように、右側にさらにタブがあることを示す水平スクロールインジケーターまたは矢印を表示することをお勧めします。

設計のアイデアは、scrollIndicatorを使用し、tabIndicatorを使用しないことです。アイデアに近いGoogleの次の画像を見つけました。

前もって感謝します、

Answer 1

このように水平スクロールビュー内にタブレイアウトをカプセル化することで、目的を達成できます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="8dp"
        android:scrollbars="horizontal">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            app:tabGravity="center"
            app:tabIndicator="@color/white"
            app:tabMode="fixed">

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 1"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 2"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 3"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 4"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 5"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 6"/>


            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 7"/>



            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 8"/>



            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 9"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 10"/>
        </com.google.android.material.tabs.TabLayout>

    </HorizontalScrollView>

</LinearLayout>

こんな感じになります……

Answer 2

こんにちは、app：tabMode = "scroll"を追加できます

例では、次のように使用します

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scroll"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>