[Android] 툴바(앱바) 사용하기

Android Studio 4.2.2
Android SDK 28
Kotlin 1.5.21

 

 

툴바

상단의 있는 바 형태의 액티비티의 제목이나 각종 메뉴를 선택할 수 있는 뷰.

출처: android developer

 

툴바 표시하기

따로 설정하지 않으면 툴바는 기본적으로 표시된다. 기본 툴바를 커스텀하거나 따로 툴바를 만드는 방법은 다음과 같이 세가지가 있다.

manifest 설정하기

기본적으로 표시되는 툴바의 제목(title)을 manifest의 label 속성으로 설정할 수 있다. 설정하지 않은 경우, application 태그의 label 값(앱 이름)으로 표시된다.

<application>
    <activity
        android:name=".MainActivity"
        android:label="툴바 제목" />
</application>

 

레이아웃으로 구현하기

툴바 요소를 사용해 커스텀한 툴바를 만든다.

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"/>

 

코드로 구현하기

툴바를 세팅하는 메소드 setToolbar()를 사용해 기본 툴바를 커스텀하거나, 레이아웃에 만든 Toolbar로 기본 툴바를 대체할 수 있다.

fun setToolbar() {
    supportActionBar?.setDisplayHomeAsUpEnabled(true)
}

fun setToolbar(title: String = "", subtitle: String = "", hasHome: Boolean = false) {
    supportActionBar?.apply {
        if (hasHome) setToolbar()
        if (title.isNotBlank()) this.title = title
        if (subtitle.isNotBlank()) this.subtitle = subtitle
    }
}

fun setToolbar(icon: Int) {
    supportActionBar?.apply {
        setToolbar()
        setHomeAsUpIndicator(icon)
    }
}

fun setToolbar(title: String = "", subtitle: String = "", icon: Int) {
    supportActionBar?.apply {
        setToolbar()
        setHomeAsUpIndicator(icon)
        if (title.isNotBlank()) this.title = title
        if (subtitle.isNotBlank()) this.subtitle = subtitle
    }
}

fun setToolbar(toolbar: androidx.appcompat.widget.Toolbar) {
    setSupportActionBar(toolbar)
    supportActionBar?.setDisplayShowTitleEnabled(false)
}

위 메소드에서의 icon은 툴바 왼쪽 아이콘으로 기본 아이콘은 아래와 같은 뒤로가기 아이콘이다.

아이콘의 클릭 콜백은 onOptionsItemSelected() 메소드를 오버라이드하여 구현하면 된다. 아이콘의 id는 android.R.id.home이다.

 

툴바 옵션 메뉴

툴바의 오른쪽의 여러 아이콘 또는 점 세 개 아이콘으로 표시되는 메뉴로 위 툴바 이미지의 클립, 달력, 점 세 개 아이콘에 해당한다. 다음과 같은 순서로 옵션 메뉴를 만들고 표시할 수 있다.

메뉴 만들기

res>menu 폴더에 메뉴 xml 파일을 만든다.

toolbar.xml

<?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/toolbar_search"
        android:icon="?android:attr/actionModeWebSearchDrawable"
        android:title="검색"
        app:showAsAction="always" />
    <item
        android:id="@+id/toolbar_share"
        android:title="공유" />
</menu>

icon: 표시될 아이콘

title: 옵션 제목

showAsAction: 옵션 표시 설정 (never, always, collapseActionView, ifRoom, withText)

메뉴 생성하기

액티비티에서 아래의 메소드를 오버라이딩해, 원하는 메뉴를 툴바에 표시한다.

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

클릭 시 동작 정의하기

액티비티에서 아래의 메소드를 오버라이딩해, 각 옵션을 클릭했을 때의 동작을 정의한다.

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    when (item.itemId) {
        android.R.id.home -> onBackPressed() // 툴바 맨 왼쪽의 홈 아이콘
        R.id.toolbar_search -> Log.d(TAG, "검색")
        R.id.toolbar_share -> Log.d(TAG, "공유")
    }

    return super.onOptionsItemSelected(item)
}

 

툴바 숨기기

툴바를 표시하고 싶지 않다면 다음과 같이 두가지 방법이 있다.

테마 생성해 설정하기

툴바를 숨기는 테마를 만든 뒤, manifest에서 해당 액티비티에 테마를 설정해주는 방법이다.

테마

<style name="NoActionBarTheme">
    <item name="windowNoTitle">true</item>
</style>

manifest

<application>
    <activity
        android:name=".MainActivity"
        android:label="툴바 제목"
        android:theme="@style/NoActionBarTheme" />
</application>

 

코드로 구현하기

fun hideToolbar() {
    supportActionBar?.hide()
}