ScrollView與HorizontalScrollView都是可以滾動的布局容器，兩者差別在於布局方向的配置，如其名HorizontalScrollView是水平配置。當內容大於布局容器本身時，會自動添加拖拉條。

ScrollView

於activity_main.xml中加入ScrollView布局容器：

<ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            
        </LinearLayout>
</ScrollView>

scrollbarStyle 滑動樣式設定

於ScrollView下加入屬性scrollbarStyle：

    android:scrollbarStyle="insideInset"

提供以下四種供使用：

• insideOverlay
• insideInset
• outsideOverlay
• outsideInset

分別來看可以拆成：

1. inside ：滾動條出現在padding區域內
2. outside：滾動條出現在padding區域外
3. overlay：滾動條以覆蓋的方式置於右邊緣
4. inset ：滾動條以插入的方式置於右邊緣

在ScrollView中加入元件

這邊方便介紹加入ImageView元件。
於drawable資料夾下加入XML圖片檔(250dp x 250dp)，如下：

<ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbarStyle="insideInset"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_24" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_25" />

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_24" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_25" />

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_24" />

            <ImageView
                android:id="@+id/imageView6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_25" />

            <ImageView
                android:id="@+id/imageView7"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_24" />

            <ImageView
                android:id="@+id/imageView8"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_25" />

            <ImageView
                android:id="@+id/imageView9"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_24" />

            <ImageView
                android:id="@+id/imageView10"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_25" />
        </LinearLayout>
</ScrollView>

HorizontalScrollView

於activity_main.xml中加入HorizontalScrollView布局容器：

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal" >

            
        </LinearLayout>

    </HorizontalScrollView>

在HorizontalScrollView中加入元件

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_24" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_25" />
            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_24" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_25" />

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_24" />

            <ImageView
                android:id="@+id/imageView6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_25" />

            <ImageView
                android:id="@+id/imageView7"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_24" />

            <ImageView
                android:id="@+id/imageView8"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_25" />

            <ImageView
                android:id="@+id/imageView9"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_24" />

            <ImageView
                android:id="@+id/imageView10"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_baseline_account_circle_25" />
        </LinearLayout>

    </HorizontalScrollView>

ScrollView與HorizontalScrollView結合達成水平垂直滑動

在ScrollView布局容器中加入HorizontalScrollView布局容器：

<ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:orientation="vertical" >
                    
                </LinearLayout>
            </HorizontalScrollView>
        </LinearLayout>
    </ScrollView>
                    

加入元件：

<ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent">

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

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

                        <ImageView
                            android:id="@+id/imageView"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            app:srcCompat="@drawable/ic_baseline_account_circle_24" />

                        <ImageView
                            android:id="@+id/imageView2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            app:srcCompat="@drawable/ic_baseline_account_circle_25" />
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/imageView3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            app:srcCompat="@drawable/ic_baseline_account_circle_24" />

                        <ImageView
                            android:id="@+id/imageView4"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            app:srcCompat="@drawable/ic_baseline_account_circle_25" />
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/imageView5"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            app:srcCompat="@drawable/ic_baseline_account_circle_24" />

                        <ImageView
                            android:id="@+id/imageView6"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            app:srcCompat="@drawable/ic_baseline_account_circle_25" />
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/imageView7"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            app:srcCompat="@drawable/ic_baseline_account_circle_24" />

                        <ImageView
                            android:id="@+id/imageView8"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            app:srcCompat="@drawable/ic_baseline_account_circle_25" />
                    </LinearLayout>
                </LinearLayout>
            </HorizontalScrollView>
        </LinearLayout>
    </ScrollView>