[Kotlin][Android] 툴바(toolbar) 및 메뉴버튼 만들기

오늘은 코틀린을 이용해서 툴바와 메뉴 버튼을 구현해보도록 하겠습니다.

툴바란?

애플리케이션 콘텐츠 내에서 사용하기위한 표준 도구 모음입니다. 아래 사진 처럼 모바일 앱에서 상단에 구성되어 있는 것이 툴바라고 보시면 됩니다.  

 

 

안드로이드 Toolbar 공식 문서

developer.android.com/reference/kotlin/android/widget/Toolbar

Toolbar  |  Android 개발자  |  Android Developers

개발 순서는 다음과 같습니다.

 

개발 순서

1. Resource파일 수정 및 추가

   1-1) 기존의 ActionBar 제거하기

   1-2) menu Resource 생성하기

   1-3) activity_toolbar.xml 생성하기

2. Activity 구현(Toolbar.kt)

 

개발  

1. Resource파일 수정 및 추가

1-1) 기존의 ActionBar 제거하기

커스텀 툴바를 사용하기 위해 기존의 ActionBar를 제거하겠습니다.  

안드로이드 프로젝트의 res/values/styles.xml 파일을 열어 Style태그의 parent속성 값을 Theme.AppCompat.Light.NoActionBar 로 바꿔 줍니다.

styles.xml 

<resources>
    <!-- Base application theme. -->
    <!-- 변경된 소스 -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

1-2) menu Resource 생성하기

/res 경로에 menu라는 Android resource directory를 만들어 줍니다. 여기서 이 디렉토리명은 반드시 menu로 지정해 줘야 합니다. menu 디렉토리 안에  toolbar_menu.xml 파일을 생성해 줍니다.

toolbar_menu.xml로 ToolBar에 들어갈 항목(메뉴)의 레이아웃을 정의합니다. item태그에 icon은 안드로이드 스튜디오에서 제공하는 asset image나 svg를 사용했습니다.

toolbar_menu.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/action_search"
        android:title="검색"
        android:icon="@android:drawable/ic_menu_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_share"
        android:title="공유"
        android:icon="@android:drawable/ic_menu_share"
        app:showAsAction="ifRoom" />
</menu>

1-3) activity_toolbar.xml 생성하기

toolbar를 넣고자 하는 화면에 View Toolbar를 넣어줍니다.

activity_toolbar.xml

<?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=".Toolbar">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:titleTextColor="@color/colorWhite"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </androidx.appcompat.widget.Toolbar>


</androidx.constraintlayout.widget.ConstraintLayout>

Toolbar를 넣은 화면

2. Activity 구현(Toolbar.kt)

툴바에 제목을 설정하고 메뉴 설정 및 클릭 이벤트를 구현해보겠습니다. 저는 스틱코드를 이용해서 쉽게 구현했습니다.

스틱코드를 이용하여 toolbar menu 관련 기능 추가

stickode.com/detail.html?no=2067

스틱코드

package com.example.stickcodekotlin

import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_toolbar.*

class Toolbar : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_toolbar)

        setSupportActionBar(toolbar) //커스텀한 toolbar를 액션바로 사용
        supportActionBar?.setDisplayShowTitleEnabled(false) //액션바에 표시되는 제목의 표시유무를 설정합니다. false로 해야 custom한 툴바의 이름이 화면에 보이게 됩니다.
        toolbar.title = "툴바 타이블"
    }

    //액션버튼 메뉴 액션바에 집어 넣기
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.toolbar_menu, menu)
        return true
    }

    //액션버튼 클릭 했을 때
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item?.itemId){
            R.id.action_search -> {
                //검색 버튼 눌렀을 때
                Toast.makeText(applicationContext, "검색 이벤트 실행", Toast.LENGTH_LONG).show()
                return super.onOptionsItemSelected(item)
            }
            R.id.action_share -> {
                //공유 버튼 눌렀을 때
                Toast.makeText(applicationContext, "공유 이벤트 실행", Toast.LENGTH_LONG).show()
                return super.onOptionsItemSelected(item)
            }
            else -> return super.onOptionsItemSelected(item)
        }
    }
}

 

구현 결과 입니다.