[Android][Kotlin] TopAppBar, Toolbar, AppBarLayout의 차이점 및 사용법

안드로이드 앱의 상단바는 사용자에게 앱의 이름, 탐색 및 액션 요소를 표시하는 중요한 UI 요소입니다. 이 글에서는 안드로이드에서 사용할 수 있는 세 가지 주요 상단바 컴포넌트인 TopAppBar, Toolbar, AppBarLayout의 차이점과 사용법에 대해 알아보겠습니다.

1. TopAppBar

TopAppBar는 Material Design Components (MDC)에서 제공하는 상단바 컴포넌트입니다. Material Design 가이드라인을 따르는 상단바를 쉽게 구현할 수 있도록 도와줍니다. TopAppBar는 앱바에 제목, 아이콘, 메뉴 등의 요소를 포함할 수 있습니다. 또한, Jetpack Compose에서도 사용할 수 있어 최신 프레임워크를 사용하는 경우 편리합니다.

xml 예제:

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/topAppBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:menu="@menu/top_app_bar"
    app:navigationIcon="@drawable/ic_menu"
    app:title="My App"
    app:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light" />

2. Toolbar

Toolbar는 안드로이드 프레임워크의 일부로 제공되는 유연한 상단바 컴포넌트입니다. Toolbar는 사용자 정의 뷰와 액션을 포함할 수 있으며, 앱바 또는 다른 곳에 사용될 수 있습니다. Material Design 가이드라인을 따르려면 추가 스타일링이 필요할 수 있습니다. 또한, Toolbar를 사용할 때 AppBarLayout과 함께 사용하면 더 많은 기능을 구현할 수 있습니다.

xml 예제:

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:menu="@menu/toolbar_menu"
    app:navigationIcon="@drawable/ic_menu"
    app:title="My App"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

3. AppBarLayout

AppBarLayout은 안드로이드 디자인 라이브러리의 일부로 제공되며, CoordinatorLayout의 확장입니다. AppBarLayout은 Toolbar와 함께 사용되어 스크롤과 상호 작용하는 앱바를 구현할 수 있습니다. 예를 들어, 스크롤 시 앱바가 사라지거나 축소되는 등의 동작을 구현하기 위해 AppBarLayout을 사용할 수 있습니다. AppBarLayout은 주로 Material Design 가이드라인을 따르는 앱에서 사용됩니다.

xml 예제:

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"
        app:menu="@menu/toolbar_menu"
        app:navigationIcon="@drawable/ic_menu"
        app:title="My App" />

</com.google.android.material.appbar.AppBarLayout>

위 코드에서 AppBarLayout은 Toolbar를 감싸고 있으며, app:layout_scrollFlags 속성을 통해 스크롤 동작을 정의합니다. 이 속성은 여러 가지 값을 사용하여 다양한 스크롤 동작을 조합할 수 있습니다.

요약하면, TopAppBar, Toolbar, AppBarLayout은 모두 안드로이드 앱의 상단바를 구현하기 위한 컴포넌트입니다. TopAppBar는 Material Design Components를 사용한 최신 방식의 상단바 구현을 위한 컴포넌트이며, Toolbar는 안드로이드 프레임워크의 기본 상단바 컴포넌트입니다. AppBarLayout은 Toolbar와 함께 사용되어 스크롤과 상호 작용하는 앱바를 만들기 위한 컴포넌트입니다. 프로젝트의 요구 사항과 디자인 가이드라인에 따라 적절한 컴포넌트를 선택하여 사용하시면 됩니다.