안드로이드 개발자를 위한 AppBar, Toolbar, ActionBar 가이드

목차

• 1장: Android의 AppBar란?
• 2장: Toolbar와 ActionBar의 차이
• 3장: AppBarLayout 이해하기
• 4장: Toolbar와 ActionBar의 권장사항

1장: Android의 AppBar란?

AppBar는 Android 애플리케이션에서 중요한 인터페이스 요소입니다. 사용자가 앱과 상호작용하는 데 필요한 메뉴와 도구를 제공하는 역할을 합니다. AppBar는 주로 화면 상단에 위치하며, 검색 버튼, 설정 메뉴 등 다양한 액션을 포함할 수 있습니다.

AppBar는 <androidx.appcompat.widget.Toolbar> 클래스를 확장하여 만들어집니다. 이 클래스는 레이아웃 파일에서 <Toolbar> 태그로 정의되며, 액티비티에서 setSupportActionBar() 메서드를 통해 사용됩니다.

<androidx.appcompat.widget.Toolbar
    android:id="@+id/my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

목차로 돌아가기

2장: Toolbar와 ActionBar의 차이

Android 개발에서 Toolbar와 ActionBar는 비슷한 역할을 하지만, 사용 방법과 커스터마이징 가능성에서 차이가 있습니다.

Action Bar은 Android 3.0(Honeycomb)부터 도입된 UI 요소로, 애플리케이션의 상태를 나타내고 애플리케이션 또는 화면별 주요 작업을 수행하는 데 사용됩니다. ActionBar는 앱 이름, 네비게이션 메뉴, 검색 등 다양한 요소를 포함할 수 있습니다.

<androidx.appcompat.app.ActionBar actionBar = getSupportActionBar();>
actionBar.setDisplayHomeAsUpEnabled(true);
</androidx.appcompat.app.ActionBar>

Toolbar, 반면에 Android 5.0(Lollipop)에서 도입되었으며 이후로 많은 개발자들 사이에서 선호되고 있습니다. 이유는 더욱 유연하고 커스터마이징하기 쉽기 때문입니다. Toolbar는 기본적으로 ActionBar의 모든 기능을 가지고 있지만 위치나 모양 등을 자유롭게 변경할 수 있다는 점에서 차별화됩니다.

<androidx.appcompat.widget.Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);>
myToolbar.setTitle("My App");
myToolbar.setSubtitle("Welcome");
</androidx.appcompat.widget.Toolbar>

목차로 돌아가기

3장: AppBarLayout 이해하기

AppBarLayout은 Material Design 가이드라인을 따르는 Android 앱에서 자주 사용되는 컴포넌트입니다. AppBarLayout은 Vertical LinearLayout의 특수한 형태로, 자식 뷰(예를 들어, Toolbar)가 서로 상호작용하면서 스크롤되도록 도와줍니다.

AppBarLayout을 사용하면, 앱 바가 스크롤과 함께 확장되거나 축소되는 등의 동작을 구현할 수 있습니다. 이런 동작들은 사용자 경험(UX)를 향상시키는데 큰 역할을 합니다.

<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/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

위 코드에서 볼 수 있듯이, AppBarLayout 내부에 Toolbar를 배치하여 상호 작용하는 UI를 구성할 수 있습니다.

목차로 돌아가기

4장: Toolbar와 ActionBar의 권장사항

Toolbar와 ActionBar는 Android 애플리케이션에서 중요한 인터페이스 요소로, 사용자 경험(UX)을 크게 좌우합니다. 그렇기 때문에 이들을 올바르게 사용하는 것이 중요하며, 아래에 몇 가지 권장 사항을 제시합니다.

1. 적절한 제목 설정

Toolbar 또는 ActionBar에 표시되는 제목은 현재 화면의 기능과 내용을 정확하게 반영해야 합니다. 사용자가 앱 내에서 어디에 있는지를 명확하게 인식할 수 있도록 도와줍니다.

2. 필요한 메뉴만 포함

너무 많은 메뉴 항목이 포함되면 사용자가 원하는 기능을 찾기 어렵습니다. 따라서 가장 중요하거나 자주 사용되는 기능만 AppBar에 포함시키고, 나머지는 오버플로우 메뉴(세 점 버튼) 안에 숨겨 두는 것이 좋습니다.

3. 일관된 위치 유지

Action Bar나 Toolbar의 위치를 앱 전체에서 일관되게 유지해야 합니다. 이것은 사용자가 예상 가능한 UI를 경험하도록 하여 직관적인 조작성을 보장합니다.

4. Material Design 가이드라인 준수

Material Design 가이드라인은 AppBar 디자인과 상호작용 방식 등 다양한 면에서 훌륭한 지침을 제공합니다. 이를 준수하여 고품질의 UX를 제공하세요.

목차로 돌아가기