[Android] CoordinatorLayout을 이용한 ToolBar 만들기

ToolBar를 이용하여 AppBar를 구현하던 중, 안드로이드에서 기본적으로 제공하는 ToolBar 소스를 발견하게 되었다.

 

먼저 안드로이드 스튜디오(Android Studio)를 실행한 뒤 새 프로젝트를 생성해준다.

만약 프로젝트가 열려있는 상태라면 File → New → New Project를 클릭한다.

 

미리보기 사진에서 AppBar가 있는 Activity 중 아무거나 선택하면 되지만, 나는 지금 NavigationView, DrawerLayout 등을 구현하고 있는 상태이기 때문에 Navigation Drawer Activity를 선택했다. Google Play가 연상되는 안드로이드의 가장 기본적인 형태인 것 같다.

 

 

액티비티를 선택하고 Next → Finish 버튼을 순차적으로 클릭하면 약간의 빌드 시간을 거쳐 소스 코드가 열리는데, 툴바가 포함된 xml(app_bar_main.xml)을 열어보면 다음과 같다.

 

 

app_bar_main.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=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.DrawerLayout.AppBarOverlay">

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

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

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

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="@dimen/fab_margin"
        android:layout_marginBottom="16dp"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

 

XML의 전체 구조를 보면 CoordinatorLayout이 가장 바깥에서 모든 Layout을 감싸고 있고, 그 속에 AppBarLayout, 가장 안쪽에 Toolbar가 위치하고 있다.

• Toolbar : 앱바를 구성하는 애플리케이션의 최상단바.
• include content_main : fragment로 구성된 중앙 콘텐츠 영역.
• FloatingActionButton : 우측 하단 액션 버튼. (현재 코드에서는 구현되지 않음)

 

 

 

content_main.xml

app_bar_main.xml에서 include하는 중앙 콘텐츠 영역의 코드이다.

중앙 콘텐츠 영역을 fragment로 구현하여 여러 화면을 보여줄 수 있도록 구현된 모습이다.

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">

    <fragment
        android:id="@+id/nav_host_fragment_content_main"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

activity_main.xml

생성한 위 두 코드를 한 곳으로 모아줄 메인 XML이다.

activity_main.xml → app_bar_main.xml → content_main.xml 순서로 include한다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        android:id="@+id/app_bar_main"
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>

 

 

실행 화면

애플리케이션 상단에 툴바가 생성된 모습을 확인할 수 있다.