코딩하는 두꺼비

참고한 블로그: kiwinam.com/posts/25/android-toolbar-add-button/

그전 자바로 프로젝트를 할 때 팀원이 이미 액션바 xml등 모든 세팅을 다 해줬기 때문에 혼자서 개발을 해보았다.

어떻게 해야하는 지 막막했는데 위의 블로그를 보고 쉽게 이해할  수 있었다.

1. 기존 액션바를 지우고(보통 기본 설정) 액션바를 적용하고자 하는 레이아웃에 툴바를 넣어준다.

res/values/styles.xml의 style태그를 아래와 같이 수정해 기본 액션바를 설정해준다.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

res/layout루트 아래 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=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        tools:ignore="MissingConstraints" />

</androidx.constraintlayout.widget.ConstraintLayout>

블로그에서는 android.support.v7.widget.Toolbar로 태그 설정이 되어 있었는데 구버전이라 그런 것 같아 나는 신버전인 androidx로 다시 설정해주었다.

2. Menu.xml을 만들어 액션바 틀을 만들어준다.

res/menu에 mainmenu.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/menu_search"
        android:title="search"
        android:icon="@drawable/baseline_search_white_24dp"
        app:showAsAction="always"
        />
    <group>
        <item
            android:id="@+id/menu_account"
            android:title="account"
            />
        <item
            android:id="@+id/menu_logout"
            android:title="logout"
            />
    </group>
</menu>

각 icon들은 머티리얼 사이트에서 가져오거나 이미 가지고 있는 파일을 활용하면 된다.

3. 액티비티에서 툴바를 설정해준다.

package com.example.desktop.mymo

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.view.View
import com.google.android.material.snackbar.Snackbar
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        setSupportActionBar(toolbar)	//툴바 사용 설정

        supportActionBar!!.setDisplayHomeAsUpEnabled(true)	//왼쪽 버튼 사용설정(기본은 뒤로가기)
        supportActionBar!!.setHomeAsUpIndicator(R.drawable.baseline_menu_white_24dp)	//왼쪽 버튼 메뉴로 아이콘 변경
        supportActionBar!!.setDisplayShowTitleEnabled(true)		//타이틀 보이게 설정
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.mainmenu, menu)		//작성한 메뉴파일 설정
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {

        when(item!!.itemId){
            android.R.id.home->{	//각 버튼 마다 스낵바 메세지로 기능 구현
                Snackbar.make(toolbar,"Menu pressed",Snackbar.LENGTH_SHORT).show()
            }
            R.id.menu_search->{
                Snackbar.make(toolbar,"Search Menu pressed",Snackbar.LENGTH_SHORT).show()
            }
            R.id.menu_account->{
                Snackbar.make(toolbar,"Account Menu pressed",Snackbar.LENGTH_SHORT).show()
            }
            R.id.menu_logout->{
                Snackbar.make(toolbar,"Logout Menu pressed",Snackbar.LENGTH_SHORT).show()
            }
        }

        return super.onOptionsItemSelected(item)
    }

}

마지막으로 툴바를 사용할 액티비티에 위와 같이 코드를 구성해주면 된다.

FAB 기능과 필요없는 코드들은 걷어내고 추가해야할 부분만 코드를 업로드함