UI 디자인(AppBarLayout, CollapsingToolbarLayout, MaterialToolbar, style 변경)

Material AppBarLayout, CollapsingToolbarLayout, MaterialToolbar 를 이용해 Toolbar가 CollaspsingToolbarLayout의 하단에 위치하여 드래그하면 MaterialToolbar를 감싸는 CollaspsingToolbarLayout가 접히는 기능

 

1. CollaspsingToolbarLayout

1. 속성 살펴보기

1-1. app:contentScrim="?attr/colorPrimary" : Toolbar가 최소화 되었을 때 툴바의 색상을 변경

1-2. app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" 

1. scroll : 스크롤 이벤트에 반응할 모든 view에 반드시 이 플래그를 설정해줘야 합니다.
2. exitUnitlCollapsed : 해당 view에 minHeight를 정의하면, Toolbar가 해당 크기까지만 축소됩니다.
3. snap : 스크롤 시 자동으로 축소, 확장을 합니다.

1-3. app:expandedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Expanded" / app:collapsedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Collapsed" : 축소, 확장 상태에 따라 작성한 스타일을 적용해줍니다.

 

1-4. app:toolbarId="@+id/topAppBar" : CollaspsingToolbarLayout에게 Toolbar의 관계를 명시해주는 것이지만 child에 Toolbar를 추가하여 사용하면 해당 속상을 추가하지 않아도 내부적으로 Toolbar를 찾습니다. (전 일단 추가했습니다.)

 

  <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
                app:expandedTitleMarginBottom="20dp"
                app:expandedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Expanded"
                app:collapsedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Collapsed"
                app:toolbarId="@+id/topAppBar">
                
                
                ...
                
                
 </com.google.android.material.appbar.CollapsingToolbarLayout>

---

 

2. MaterialToolbar

1. 속성 살펴보기

1-1. android:theme="@style/MyThemeOverlay_Toolbar" : Toolbar를 작성한 스타일로 적용합니다. (오버플로 메뉴의 색상 변경을 위해 사용했습니다.)

1-2. app:menu="@menu/arlamtoolbar_menu" : Toolbar의 오버플로 메뉴를 가져옵니다.

1-3. app:title="시간" : 타이틀을 의미합니다.

 

   <com.google.android.material.appbar.MaterialToolbar
                    android:id="@+id/topAppBar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_gravity="bottom"
                    style="@style/Widget.MaterialComponents.Toolbar.Primary"
                    android:theme="@style/MyThemeOverlay_Toolbar"
                    app:menu="@menu/arlamtoolbar_menu"
                    app:title="시간">

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

---

 

 

3. 전체 코드

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/AppbarLayout"
            android:layout_width="match_parent"
            android:layout_height="300dp">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
                app:expandedTitleMarginBottom="20dp"
                app:expandedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Expanded"
                app:collapsedTitleTextAppearance="@style/TextAppearance.App.CollapsingToolbar.Collapsed"
                app:toolbarId="@+id/topAppBar">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginBottom="?attr/actionBarSize"
                    android:gravity="center"
                    android:text="1시간 4분 후에 알람이 울립니다."
                    android:textColor="@color/white"
                    android:textSize="22sp"
                    android:textStyle="bold" />

                <com.google.android.material.appbar.MaterialToolbar
                    android:id="@+id/topAppBar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_gravity="bottom"
                    style="@style/Widget.MaterialComponents.Toolbar.Primary"
                    android:theme="@style/MyThemeOverlay_Toolbar"
                    app:menu="@menu/arlamtoolbar_menu"
                    app:title="시간">

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

            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

 

<resources>
    <style name="TextAppearance.App.CollapsingToolbar.Expanded" parent="TextAppearance.MaterialComponents.Headline6">
        <item name="android:textColor">?attr/colorOnPrimary</item>
    </style>

    <style name="TextAppearance.App.CollapsingToolbar.Collapsed" parent="TextAppearance.MaterialComponents.Headline6">
        <item name="android:textColor">?attr/colorOnPrimary</item>
        <!-- 축소, 확장 상태의 Toolbar Title을 size를 Headline6으로 설정하고, 색상은 colorOnPrimary을 따릅니다. -->
    </style>

    <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
        <item name="colorOnPrimary">@color/white</item>
        <!-- 텍스트 / 아이콘을 그릴 때 접근하는 색상을 의미하며, 이 색상을 white로 적용했습니다. -->
    </style>
</resources>

 

<?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/add_menu_item"
        android:icon="@drawable/ic_add_24"
        android:title="@string/add"
        android:contentDescription="@string/add"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/remove_menu_item"
        android:title="@string/remove"
        	<!-- 아이템의 제목을 의미합니다. -->
        android:contentDescription="@string/remove"
       		<!-- 각 아이템의 콘텐츠에 대한 설명을 의미합니다. -->
        app:showAsAction="never" />
              	<!-- 아이템이 작업 항목으로 표시되는 시기 및 방법을 의미합니다. -->
</menu>