Toolbar: Android 애플리케이션의 도구 모음

저자: IT Sectr 게시일: 2026-02-23 읽는 시간: 12 분

Toolbar(도구 모음)는 ActionBar를 대체한 Android 컴포넌트로, 화면 제목, 탐색 요소 및 작업을 표시합니다. Toolbar는 Material Design Library의 일부이며 표준 제목부터 사용자 정의 뷰 및 애니메이션 아이콘까지 완전히 사용자 정의할 수 있습니다. 컴포넌트에 대한 자세한 내용은 Material Design 3 사양을 참조하세요.

핵심 내용

  • Toolbar — 사용자 정의 가능한 Android 도구 모음, Material Design의 ActionBar 후속
  • ActionBar — Android 5.0 이전에 존재했던 시스템 바, Toolbar로 대체됨
  • Material 3 — Top App Bar의 네 가지 변형: Small, Center-aligned, Medium, Large
  • Menu — action items이 포함된 XML 메뉴, onCreateOptionsMenu를 통해 Toolbar에 통합
  • 사용자 정의 — 제목, 로고, 탐색 아이콘, 사용자 정의 뷰 및 애니메이션

Toolbar란?

Toolbar는 Material Design 라이브러리(androidx.appcompat.widget.Toolbar)의 Android 컴포넌트로, 앱 화면에 유연한 도구 모음을 제공합니다. Toolbar는 구형 ActionBar를 대체하여 개발자에게 모양과 동작에 대한 완전한 제어권을 제공합니다. 레이아웃의 어디에나 배치할 수 있고, 사용자 정의 하위 뷰, 애니메이션을 가질 수 있으며 다양한 화면 크기에 적응할 수 있습니다.

Material Design 3(2026)는 Top App Bar — Toolbar의 진화형 — 을 네 가지 변형으로 정의합니다: Small(컴팩트, 48dp), Center-aligned(중앙 정렬 제목), Medium(확대 제목, 112dp), Large(대형 제목, 168dp). 각 변형에는 고유한 스크롤 동작이 있습니다: Small은 고정, Medium과 Large는 콘텐츠를 위로 스크롤하면 Small로 축소됩니다.

Toolbar는 세 가지 주요 영역을 표시합니다: 탐색 아이콘(왼쪽, 일반적으로 햄버거 메뉴 또는 뒤로 가기 화살표), 화면 제목(중앙 또는 왼쪽), action items(오른쪽 — 작업 아이콘, 오버플로 메뉴). Toolbar에는 로고, 부제목, 사용자 정의 뷰(검색 뷰, 스위치) 및 CoordinatorLayout과 결합된 애니메이션 CollapsingToolbarLayout이 포함될 수 있습니다.

ActionBar: 역사와 진화

ActionBar는 Android 3.0(API 11)에서 구형 Title Bar를 대체하기 위해 등장한 시스템 Android 바입니다. ActionBar는 Activity에 강하게 결합되어 있었고, 화면 상단에 고정된 위치와 제한된 사용자 정의 옵션이 있었습니다. Android 5.0(Lollipop, 2014)과 AppCompat 라이브러리의 출시와 함께 Google은 Toolbar를 유연한 대안으로 도입했습니다.

ActionBar의 주요 단점 중 Toolbar가 해결한 것: 고정 위치(상단만), 애니메이션 불가능, 사용자 정의 뷰의 어려움, CoordinatorLayout 및 CollapsingToolbarLayout과의 문제. Google은 2015년에 ActionBar를 공식적으로 지원 중단(deprecated)으로 선언했으며 모든 새 프로젝트에 Toolbar를 권장합니다. Android 12(2021)부터 ActionBar는 새로운 Material 3 테마에서 기본적으로 비활성화됩니다.

특징ActionBarToolbar
위치상단 고정레이아웃 내 어디든
사용자 정의제한적(색상, 배경)완전(뷰, 스타일, 애니메이션)
축소지원 안 함CollapsingToolbarLayout
애니메이션시스템만모두(ObjectAnimator, Transition)
Material 3지원 안 함Small / Medium / Large App Bar

Android에서 Toolbar 설정

Toolbar를 사용하려면: (1) ActionBar가 없는 테마를 설정하고(Theme.Material3.NoActionBar 또는 Theme.AppCompat.NoActionBar), (2) XML 레이아웃에 Toolbar를 추가하고, (3) setSupportActionBar를 통해 ActionBar로 설정합니다. 그 후 Toolbar는 ActionBar의 모든 기능(메뉴 처리, 탐색 아이콘, AndroidManifest의 제목)을 얻습니다.

xml
<!-- Toolbar가 포함된 activity_main.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        app:titleTextColor="@android:color/white"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar = findViewById<Toolbar>(R.id.toolbar)
        setSupportActionBar(toolbar)

        // 탐색 아이콘 설정
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // 사용자 정의 제목
        supportActionBar?.title = "홈"
        supportActionBar?.subtitle = "안녕하세요, 사용자님!"
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.toolbar_menu, menu)
        return true
    }
}

Toolbar에 메뉴 통합

Toolbar는 onCreateOptionsMenu 및 onOptionsItemSelected 콜백을 통해 Android 메뉴 시스템과 통합됩니다. 메뉴는 action items — Toolbar 오른쪽에 표시되는 작업 아이콘을 정의합니다. action items가 맞지 않으면 자동으로 오버플로 메뉴(세 점)로 이동합니다. 개발자는 app:showAsAction 속성(always, ifRoom, never)을 통해 이를 제어합니다.

xml
<!-- res/menu/toolbar_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="검색"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="알림"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="설정"
        app:showAsAction="never" />
</menu>
kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            Toast.makeText(this, "검색", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_notifications -> {
            openNotifications()
            true
        }
        R.id.action_settings -> {
            openSettings()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Material 3: Center 및 Large Top App Bar

Material 3는 Top App Bar의 네 가지 변형을 도입합니다: Small(컴팩트, 48dp), Center-aligned(중앙 정렬 제목), Medium(확대 제목 포함 112dp), Large(대형 제목 포함 168dp). Medium 및 Large App Bar는 축소 가능한 동작을 지원합니다 — 콘텐츠를 위로 스크롤하면 부드럽게 Small로 축소됩니다. 애니메이션은 CoordinatorLayout과 AppBarLayout을 통해 제어됩니다.

Center-aligned Top App Bar는 제목이 바 중앙에 배치되는 새로운 Material 3 변형입니다. 이 스타일은 Google 앱(Play Store, YouTube)에서 자주 사용되며 action items가 최소인 화면에 권장됩니다. Small Top App Bar는 클래식 Toolbar로, 이전 Android 버전과 호환됩니다. Medium과 Large는 제목이 핵심 요소인 화면(프로필, 홈페이지)에 적합합니다.

xml
<!-- CollapsingToolbarLayout이 포함된 Material 3 Large Top App Bar -->
<CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="168dp"
            app:contentScrim="?attr/colorPrimary"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="화면 콘텐츠..." />
    </NestedScrollView>
</CoordinatorLayout>

Toolbar 고급 사용자 정의

Toolbar는 완전한 사용자 정의를 지원합니다: 높이 변경, 표시/숨김 애니메이션, 사용자 정의 하위 뷰, 로고, 탐색 아이콘, PopupMenu 및 CoordinatorLayout과의 통합. 스크롤 시 숨김 애니메이션을 위해 scroll, enterAlways, snap 플래그와 함께 AppBarLayout이 사용됩니다. Toolbar 아래 이미지의 시차(parallax) 효과를 위해 — mode parallax와 함께 CollapsingToolbarLayout이 사용됩니다.

로고와 부제목은 setLogo 및 setSubtitle 메서드를 통해 설정됩니다. 탐색 아이콘은 setNavigationIcon 및 setNavigationOnClickListener를 통해 구성됩니다. 사용자 정의 뷰는 addView를 통해 Toolbar에 직접 추가됩니다. SearchView의 경우 actionViewClass와 함께 MenuItem을 사용합니다. 어두운 테마의 경우 Material 3 속성의 색상이 자동으로 적용됩니다.

kotlin
// Toolbar 고급 사용자 정의
with (toolbar) {
    // 로고 및 제목
    setLogo(R.drawable.ic_logo)
    setTitle("내 앱")
    setSubtitle("버전 2.0")

    // 핸들러가 있는 탐색 아이콘
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // 사용자 정의 뷰 — 테마용 Switch
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

    // 사용자 정의 PopupMenu
    setOnMenuItemClickListener { item ->
        Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
        true
    }
}

자주 묻는 질문

Toolbar와 ActionBar의 차이점은 무엇인가요?

ActionBar는 Android 3.0–4.4의 시스템 바로, 사용자 정의가 제한적입니다. Toolbar는 레이아웃 어디에나 배치 가능하고, 애니메이션 및 사용자 정의 뷰로 채울 수 있는 유연한 Material Design 컴포넌트입니다. Toolbar는 setSupportActionBar를 통해 ActionBar를 완전히 대체합니다.

스크롤 시 Toolbar를 어떻게 숨기나요?

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout을 사용하세요. layout_scrollBehavior에서 Toolbar에 scroll 플래그를 설정합니다. 아래로 스크롤하면 Toolbar가 숨겨지고, 위로 스크롤하면 애니메이션과 함께 나타납니다. Material 3에서 Medium/Large Top App Bar는 Small로 축소됩니다.

Toolbar에 몇 개의 action items를 배치할 수 있나요?

제한은 화면의 물리적 너비입니다. 2~4개의 action items(아이콘)이 권장됩니다. 나머지는 오버플로 메뉴(세 점)로 이동합니다. app:showAsAction을 통해 구성: always(항상 표시), ifRoom(공간이 있을 경우), never(오버플로).

Toolbar에 SearchView를 어떻게 추가하나요?

SearchView는 메뉴에서 action view로 추가됩니다. XML 메뉴: app:actionViewClass="androidx.appcompat.widget.SearchView"입니다. SearchView는 자동으로 검색 아이콘으로 축소되고 탭하면 확장됩니다. SearchRecentSuggestionsProvider를 통한 음성 검색 및 자동 완성을 지원합니다.

CollapsingToolbarLayout이란?

CollapsingToolbarLayout은 콘텐츠를 스크롤할 때 애니메이션과 함께 축소되는 Toolbar용 컨테이너입니다. CoordinatorLayout 및 AppBarLayout과 함께 사용됩니다. 모드: pin(고정), parallax(시차 효과)를 지원합니다. 헤더 이미지가 있는 화면(프로필, 상세 페이지)에 이상적입니다.

요약

  • Toolbar는 ActionBar를 대체하고 Material Design과 완전히 통합된 유연한 Android 도구 모음
  • Material 3 Top App Bar — 네 가지 변형: Small, Center-aligned, Medium, Large(각각 다른 스크롤 동작)
  • ActionBar는 지원 중단된 시스템 바로, 사용자 정의 및 애니메이션이 제한적
  • 메뉴 및 action items — always/ifRoom/never 플래그가 있는 XML 메뉴를 통한 통합
  • CollapsingToolbarLayout — 헤더 이미지가 있는 화면에서 스크롤 시 Toolbar의 애니메이션 축소
  • 사용자 정의 — 로고, 부제목, 사용자 정의 뷰, SearchView, PopupMenu 및 Material 3 색상
  • SearchView — 음성 입력 및 자동 완성을 지원하는 내장 action view

턴키 방식의 모바일 애플리케이션을 개발해 드립니다

IT Sectr는 2017년부터 스타트업과 기업을 위한 iOS 및 Android 애플리케이션을 만듭니다. 저희가 상담해 드리고 최적의 솔루션을 제안하겠습니다.

프로젝트 논의

더 읽어보기