CoordinatorLayout custom toolbar

CoordinatorLayout 은 기본 API가 아닌 Support Design Widget 이다.

 

앱 build.gradle 추가

dependencies {     implementation 'androidx.appcompat:appcompat:1.2.0'     implementation 'androidx.constraintlayout:constraintlayout:2.0.1'     implementation 'com.google.android.material:material:1.1.0' }

 

Layout 구성 형태

 

AppBarLayout
안드로이드에는 원래 ActionBar가 기본적으로 제공되고 있었지만, 액션바는 안드로이드 API 버전마다 다른 기능과 다른 동작을 제공해 개발자가 사용자에게 일관된 UX를 제공하는 데 불편함이 있었다.
이에 대한 해결책으로 google은 material design 패키지에 있는 AppBarLayout과 ToolBar를 제시하고 있다.

 

activity_customer.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    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=".ui.CustomerActivity">
 
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.Base.AppBarOverlay">
 
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/AppTheme.Base.PopupOverlay" />
    </com.google.android.material.appbar.AppBarLayout>
 
    <include layout="@layout/content_customer_detail"/>
 
</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

content_customer_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:padding="@dimen/screen_edge_margin"
    android:background="@color/colorWhite"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".ui.CustomerActivity"
    tools:showIn="@layout/activity_customer" >
 
    <WebView
        android:id="@+id/custHomepageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</LinearLayout>

 

툴바 Home 버튼을 누르면 현재 Activity 를 스택에서 제거하는 코드가 아래 포함되어 있다.

import android.content.Context
import android.content.Intent
import android.os.Bundle
import android.view.MenuItem
import androidx.appcompat.app.AppCompatActivity
 
class CustomerActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_customer)
        context = this@CustomerActivity
 
        setSupportActionBar(toolbar)
        supportActionBar?.let {
            it.setDisplayHomeAsUpEnabled(true)
            it.setDisplayShowHomeEnabled(true)
        }
 
    }
 
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when (item.getItemId()) {
            android.R.id.home -> {
                finish() // toolbar HOME 버튼 누르면 현재 Activity 스택에서 제거
                return true
            }
        }
        return super.onOptionsItemSelected(item)
    }
 
    override fun onBackPressed() {
        finish()
    }
}
 

 

기본 툴바가 아니라 커스텀 툴바로 버튼 아이콘을 추가하고 싶을 때가 있다.

이럴 경우 아래와 같이 수정하면 된다.

 

res/menu/menu_edit.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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".ui.CustomerActivity">
    <item
        android:id="@+id/edit"
        android:icon="@drawable/ic_edit_white_24dp"
        android:title="편집"
        app:showAsAction="always" />
</menu>

 

drawable/ic_edit_white_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:pathData="M14.06,9.02l0.92,0.92L5.92,19L5,19v-0.92l9.06,-9.06M17.66,3c-0.25,0 -0.51,0.1 -0.7,0.29l-1.83,1.83 3.75,3.75 1.83,-1.83c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.2,-0.2 -0.45,-0.29 -0.71,-0.29zM14.06,6.19L3,17.25L3,21h3.75L17.81,9.94l-3.75,-3.75z"
      android:fillColor="#ffffff"/>
</vector>

 

 

import android.content.Context
import android.content.Intent
import android.os.Bundle
import android.view.MenuItem
import androidx.appcompat.app.AppCompatActivity
 
class CustomerActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_customer)
        context = this@CustomerActivity
 
        setSupportActionBar(toolbar)
        supportActionBar?.let {
            it.setDisplayHomeAsUpEnabled(true)
            it.setDisplayShowHomeEnabled(true)
        }
 
    }
 
    // 커스텀 메뉴 추가 목적 (menu 폴더에 있는 xml 파일)
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.menu_edit, menu)
        return true
    }
 
    override fun onOptionsItemSelected(item: MenuItem): Boolean = when(item.itemId) {
        android.R.id.home -> {
            finish() // toolbar HOME 버튼 누르면 현재 Activity 스택에서 제거
            true
        }
        R.id.edit -> {
            finish()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
 
    override fun onBackPressed() {
        finish()
    }
}