안드로이드에서 갤러리처럼 좌우로 스크롤되는 HorizontalScrollView 구현하기

HorizontalScrollView란 무엇인가?

예제를 살펴보기 전에 HorizontalScrollView에 대해 먼저 알아보겠습니다. HorizontalScrollView는 android.widget.HorizontalScrollView 클래스에서 제공하는 위젯으로, 자식 뷰들을 가로(수평) 방향으로 스크롤할 수 있게 해줍니다. 안드로이드의 기본 갤러리 앱처럼 이미지를 좌우로 넘겨가며 볼 수 있는 UI를 만들 때 유용하게 사용됩니다.

이번 예제에서는 HorizontalScrollView를 활용해 여러 개의 이미지를 가로 방향으로 스크롤하는 화면을 구현해 보겠습니다.

1단계: 새 프로젝트 생성

Android Studio에서 File ⇒ New Project를 선택하고, 새 프로젝트를 만드는 데 필요한 모든 정보를 입력하여 프로젝트를 생성합니다.

2단계: 레이아웃 파일 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/layout"
    android:layout_height="match_parent">
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="300dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="300dp"
                android:background="#c1c1c1"
                android:layout_height="match_parent"
                android:src="@drawable/a"/>
            <ImageView
                android:layout_width="300dp"
                android:background="#c1c1c1"
                android:layout_height="match_parent"
                android:layout_marginLeft="30dp"
                android:src="@drawable/b"/>
            <ImageView
                android:layout_width="300dp"
                android:background="#c1c1c1"
                android:layout_height="match_parent"
                android:layout_marginLeft="30dp"
                android:src="@drawable/c"/>
            <ImageView
                android:layout_width="300dp"
                android:background="#c1c1c1"
                android:layout_height="match_parent"
                android:layout_marginLeft="30dp"
                android:src="@drawable/d"/>
            <ImageView
                android:layout_width="300dp"
                android:background="#c1c1c1"
                android:layout_height="match_parent"
                android:layout_marginLeft="30dp"
                android:src="@drawable/e"/>
        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

코드 설명

위 코드에서는 최상위 부모로 LinearLayout을 선언하고 그 안에 HorizontalScrollView를 배치했습니다. HorizontalScrollView는 자식 뷰를 가로 방향으로 스크롤하는 역할을 하기 때문에, 내부에 LinearLayout을 자식으로 두고 그 LinearLayout 안에 스크롤할 ImageView들을 나열했습니다.

여기서는 총 5개의 ImageView를 추가했으며, 각 이미지 사이에는 30dp의 여백(margin)을 주어 시각적으로 구분되도록 했습니다. 참고로 HorizontalScrollView는 직접적인 자식으로 하나의 뷰만 가질 수 있으므로, 여러 개의 뷰를 담으려면 반드시 LinearLayout 같은 컨테이너 뷰로 감싸야 합니다.

3단계: 매니페스트 및 액티비티 수정

이 예제는 레이아웃만으로 동작을 확인할 수 있으므로 manifest.xml과 액티비티 코드는 별도로 수정할 필요가 없습니다.

실행 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결한 상태라고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바에서 실행(Run) 아이콘 을 클릭합니다. 목록에서 본인의 모바일 기기를 선택하면 기기 화면에 아래와 같은 초기 화면이 표시됩니다.

앱을 실행하면 첫 번째 이미지가 보이는 초기 화면이 나타납니다. 이 상태에서 화면을 가로 방향으로 드래그하면 아래 이미지처럼 스크롤됩니다.

위 결과에서 확인할 수 있듯이, 이미지 뷰들이 가로 방향으로 부드럽게 스크롤되는 것을 볼 수 있습니다.

스크롤을 계속하면 마지막에 위 이미지와 같이 HorizontalScrollView의 끝 위치에 도달하게 됩니다.

마무리 및 추가 팁

이렇게 HorizontalScrollView를 사용하면 갤러리 앱과 비슷하게 이미지를 좌우로 넘겨 보는 UI를 손쉽게 구현할 수 있습니다. 다만 이미지 개수가 많아지거나 동적으로 데이터를 불러와야 하는 경우에는 RecyclerView + LinearLayoutManager(가로 방향) 조합을 사용하는 것이 성능 면에서 더 효율적입니다. 또한 스냅(Snap) 효과를 원한다면 PagerSnapHelper나 ViewPager2를 함께 고려해 보시기 바랍니다.