[안드로이드/코틀린] 툴바(Toolbar) 커스텀 방법

 

 

 

1. 기존에 있던 툴바를 사용하지 않기.

경로 -> /res/values/themes/themes.xml

 

<style> 안의

parent="Theme.MaterialComponents.DayNight.DarkActionBar" 를

parent="Theme.MaterialComponents.DayNight.NoActionBar"로 변경.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.@@@" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    	...
    </style>
</resources>

 

 

 

2. res/menu/menu_toolbar.xml

res 폴더 안에 menu 폴더 생성 후 menu_toolbar.xml 생성. (폴더명, 파일명 무관)

<item /> 안에 자신이 툴바 안에 생성하고 싶은 항목들을 추가한다.

 

id -> 다른 곳에서 항목을 참조할 때, 항목을 구분할 수 있는 아이디 (항목 이름)

title -> 항목의 제목

icon -> 항목 아이콘. drawable 폴더 안에 아이콘을 넣어서 참조한다.

 

app:showAsAction="always" : 항상 보이게 표시

app:showAsAction="ifRoom" : 액션바에 공간이 있을 경우에만 표시

<?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/notification_item"
        android:enabled="true"
        android:title="@string/notification"
        android:icon="@drawable/ic_notification"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/previous_item"
        android:enabled="true"
        android:title="@string/previous_items"
        android:icon="@drawable/ic_previous_items"
        app:showAsAction="ifRoom"/>
</menu>

 

 

 

3. toolbar layout 생성 (layout/toolbar.xml)

만약 툴바가 한곳에서만 필요하다면, 따로 xml을 만들지 않고 필요한 액티비티의 xml 파일에 이 내용을 직접 추가해도 된다. (다만 재사용성을 위해 이 방법을 추천!)

 

이때 app:menu를 방금 만들었던 menu_toolbar로 지정한다.

title, titleTextColor, background 속성을 변경할 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    app:title="@string/app_name"
    app:titleTextColor="@color/white"
    android:background="@color/purple_200"
    app:menu="@menu/menu_toolbar">

</androidx.appcompat.widget.Toolbar>

 

 

 

4. toolbar 사용하기

사용할 액티비티에서 방금 만든 toolbar를 include한다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <include layout="@layout/toolbar"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

5. 액티비티 kotlin 코드

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        onInit()

        toolbar = findViewById(R.id.toolbar) // toolbar 가져오기
        setSupportActionBar(toolbar) // 액티비티의 ActionBar로 지정
    }
    
    // 액티비티를 시작할 때 항목을 표시하기 위해 호출된다.
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
    	menuInflater.inflate(R.menu.game_menu, menu)
        
        // 액티비티에 따라 메뉴의 항목을 visible/invisible 하고 싶은 경우 함수의 인자 menu를 통해 설정.
    	menu.findItem(R.id.notification_item).isVisible = false
        menu.findItem(R.id.previous_item).isVisible = ture
        
        return true
	}
    
    // 항목을 선택하면 호출되는 함수
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
    	// item 인자에 있는 id에 따라 클릭 이벤트를 처리
        return when (item.itemId) {
              R.id.notification_item -> { // id가 notification_item인 항목을 클릭했을 때 어떤 작업을 수행할지 작성
                ...
                true
            }
            R.id.previous_item -> {  // id가 previous_item인 항목을 클릭했을 때 어떤 작업을 수행할지 작성
                ...
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }
}

 

만약 툴바에 뒤로 가기 버튼을 생성하고 싶다면 아래와 같은 코드를 추가한다.

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        onInit()

        toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)
        supportActionBar?.setDisplayHomeAsUpEnabled(true) // home 버튼 추가 (default 뒤로가기 아이콘)
    }
    
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            android.R.id.home -> { // home 항목을 클릭했을 때 어떤 작업을 할지 작성
                finish() // 액티비티 끝내기
                true
            }
            ...
            else -> super.onOptionsItemSelected(item)
        }
    }

 

 

 

 

출처

https://developer.android.com/guide/topics/ui/menus?hl=ko 

https://velog.io/@yamamamo/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-ActionBar-ToolBar-%EC%BB%A4%EC%8A%A4%ED%85%80