[Android Kotlin] Toolbar 만들기

1. 기본 Actionbar 없애기

안드로이드 프로젝트를 처음 시작하면 기본 Actionbar가 적용되어 있다. 이 상태를 NoActionBar 로 바꿔야한다.

내 경우는 이미 프로젝트가 어느정도 진행된 상태라 전체를 바꾸는데에는 시간이 걸려서 일부 Activity 또는 Fragment에 적용하는 방식으로 했다.

프로젝트 전체 Actionbar 없애기

• Manifest application에 직접 적용하기

<application
        android:theme="@style/Theme.AppCompat.Light.NoActionBar"
        />

• Manifest application에 적용된 style로 가서 parent를 NoActionBar로 변경해서 적용하기

일부 Activity에만 적용하는 경우

1. 적용할 style를 따로 하나 만든다.

내가 쓴 형태

• style - parent에 적용한 경우

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@color/white</item>
</style>

• item에 적용한 경우

<style name="Theme.IntoDig.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
</style>

예제(Actionbar 없는 Fullscreen)

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">false</item>
    </style>

</resources>

2. Manifest로 가서 적용할 activity에 theme 추가

<activity
            android:name=".ui.chatting.ChattingActivity"
            android:exported="false"
            android:theme="@style/Theme.IntoDig.NoActionBar"
            android:windowSoftInputMode="adjustUnspecified" />

2. Toolbar를 넣을 Activity의 xml파일로 가서 toolbar 추가

AppBarLayout :  Toolbar를 포함하여 Toolbar 이외에 액티비티 상단을 조금 더 넓게 구성하거나 이미지를 포함하는 등 다양하게 구성할 수 있음.

<com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.IntoDig.AppBarOverlay"
        app:elevation="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

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

3. Toolbar가 있는 Activity의 Kotlin코드로 가서 Toolbar 선언

• 나는 toolbar만 있는 layout 파일을 따로 만들어서 include를 해서 진행
• Viewbinding 사용

		//appbar(Toolbar)
        val toolbarBodyTemplate = binding.bodyToolbar.toolbar
        setSupportActionBar(toolbarBodyTemplate)
        supportActionBar?.setDisplayHomeAsUpEnabled(true) // 뒤로가기 버튼 활성화 (화살표)
        supportActionBar?.setDisplayShowTitleEnabled(false) //액션바에 표시되는 제목의 표시유무를 설정합니다. false로 해야 custom한 툴바의 이름이 화면에 보이게 됩니다.
        toolbarBodyTemplate.title = "신체 템플릿"

4. Toolbar menu 연결

• menu 생성

res>menu>template_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/toolbar_info"
        app:showAsAction="always"
        android:icon="@drawable/ic_information_white_30"
        android:title="@string/title_addchat" />
</menu>

• Kotlin코드로 가서 onCreateOptionsMenu 메소드 추가해 메뉴 연결

// 툴바 메뉴 버튼을 설정- menu에 있는 item을 연결하는 부분
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(
            R.menu.template_toolbar_menu,
            menu
        )       // main_menu 메뉴를 toolbar 메뉴 버튼으로 설정
        return true
    }

5. Toolbar menu 클릭 이벤트 설정

onOptionsItemSelected 메소드 추가

//Toolbar 메뉴 클릭 이벤트
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            android.R.id.home -> { //뒤로 가기 버튼
                finish()

            }
            R.id.toolbar_info -> {// 툴팁
                val view = findViewById<View>(R.id.toolbar_info) //툴팁을 띄우기 위해서는 view가 필요함
                balloon.showAlignBottom(view)
            }
        }
        return super.onOptionsItemSelected(item)
    }

 

결과