[Android] AppBar 사용하기

AppBar

AppBar는 현재 화면의 정보와 작업을 표시하기 위해 앱 창 상단에 위치해있는 바를 뜻합니다.

하단에 위치한 AppBar도 있지만 일반적으로 쓰이지는 않습니다.

출처 : http://batmask.net/index.php/2021/08/07/1148/

1. Container
2. Navigation icon (optional)
3. Title (optional)
4. Action items (optional)
5. Overflow menu (optional)

 

ActionBar과 Toolbar

ActionBar는 API Level 11에 Activity에 붙은 형태로 등장하여 계속 사용되다가 API Level 21부터 Toolbar widget을 이용하여 ActionBar를 사용할 수 있게 되었습니다.

 

ActionBar는 Activity에 종속적인 문제와 함께 안드로이드 버전에 따라 다르게 동작할 여지가 있었습니다. 그러나 Toolbar는 Activity 종속성도 없지만 Support Library를 통해 지원이 시작되어 버전 간 호환성 문제도 없었습니다.

 

AppBar로서 ActionBar도 여전히 유효한 형태이고 Toolbar을 통해 예전 버전 호환성도 유지해야 하기 때문에 현재는 다음의 두 가지 방법으로 사용되고 있습니다.

1. ActionBar 형태를 사용하되, 구현은 Toolbar로 하는 방법
2. ActionBar를 사용하지 않도록 설정하고 Toolbar만을 사용하는 방법

 

Toolbar를 이용한 ActionBar 형태의 App bar 구현

먼저 build.gradle에 Toolbar를 사용하기 위한 라이브러리가 추가되어 있어야 합니다.

implementation 'androidx.appcompat:appcompat:1.6.1'

AppBar을 바로 사용하기 위해서는 build.gradle에 Material Library가 추가되어 있어야 합니다.

implementation 'com.google.android.material:material:1.9.0'

 

다음과 같이 NoActionBar 테마를 사용하여 ActionBar를 사용하지 않도록 설정합니다.

<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
      ...
  </style>
</resources>

 

그 다음 Toolbar widget을 구현합니다.

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary" />

 

setSupportActionBar()에서 인자로 Toolbar를 넘겨주면 ActionBar로 만들어 사용할 수 있습니다.

• supportActionBar?.setDisplayHomeAsUpEnabled() : true를 인자로 넘겨주면 뒤로가기 버튼이 활성화됩니다.
• supportActionBar?.setDisplayShowTitleEnabled() : false를 인자로 넘겨주면 Toolbar title을 커스텀하여 사용할 수 있습니다.

binding.toolbar.apply {
    title = "Hello Toolbar"
    setSupportActionBar(this)
}

// 뒤로가기 버튼 활성화 (화살표)
supportActionBar?.setDisplayHomeAsUpEnabled(true) 

// ActionBar에 표시되는 제목 표시 유무 설정
// false -> custom한 Toolbar title 표시
supportActionBar?.setDisplayShowTitleEnabled(false)
binding.toolbar.title = "Hello Toolbar"

 

Toolbar에 menu 연결

먼저 menu를 생성합니다.

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_add"
        android:title="추가하기"
        app:showAsAction="always"
        android:icon="@drawable/ic_baseline_add_24"/>
</menu>

 

onCreateOptionsMenu()를 통해 Toolbar와 menu를 연결합니다.

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

 

onOptionsItemSelected()를 통해 menu 클릭 이벤트를 설정합니다.

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when(item.itemId) {
        android.R.id.home -> { // 뒤로가기
            finish()
            true
        }
        R.id.action_add -> { // 추가하기 
            checkPermission()
            true
        }
        else -> {
            super.onOptionsItemSelected(item)
        }
    }
}