[Android] AppBarLayout 사용하기

AppBarLayout

AppBarLayout은 Toolbar를 포함하여 Toolbar 이외에 액티비티 화면 상단을 다양하게 구성할 수 있는 레이아웃입니다.

Material Design

 

AppBarLayout 구현하기

CoordinatorLayout을 부모 레이아웃으로 하며, AppBarLayout 내에 CollapsingToolbarLayout(툴바 영역)이 들어가고 NestedScrollView가 하단 영역(스크롤 영역)에 들어가게 됩니다. 

<?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"
    android:id="@+id/coordinatorLayout"
    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="wrap_content"
        android:stateListAnimator="@null"
        android:elevation="0dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/white"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            
            ...

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

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

    <androidx.core.widget.NestedScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        
        ...
        
    </androidx.core.widget.NestedScrollView>
        
</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

AppBarLayout에서 기본적으로 지정되어있는 배경색과 스크롤 시 생기는 그림자를 없애기 위해서는 다음의 속성들을 추가하면 해결됩니다.

android:stateListAnimator="@null"
android:elevation="0dp"

 

CollapsingToolbarLayout에서는 다양한 속성을 사용할 수 있습니다.

• contentScrim : AppBarLayout의 구성에서 ImageView가 있을 경우 스크롤이 되다 보면 이미지가 사라지기 시작합니다. 그런데 계속 스크롤 되어서 크기가 줄어 이미지가 정상으로 나오기 힘든 경우, 이미지의 일부분만 보이게 하지 않고 전체 AppBar를 contentScrim에서 지정한 색으로 칠하기 위한 속성입니다.
• layout_scrollFlags : CollapsingToolbarLayout에 포함된 뷰들의 스크롤 여부와 방식을 설정합니다.
  • scroll : 스크롤되게 지정 (기본으로 설정)
  • enterAlways : 스크롤되어 전체가 사라지게 지정 (위로 스크롤할 시 즉시 보임)
  • enterAlwaysCollapsed : 스크롤되어 전체가 사라지게 지정 (위로 스크롤할 시 최상단에 도달해야 보임)
  • exitUntilCollapsed : Toolbar의 minHeight까지만 스크롤되게 지정

scroll | enterAlwaysCollapsed	scroll | exitUntilCollapsed

 

뷰 하단에 들어가는 ScrollView에는 AppBarLayout과 호환할수 있게끔 다음의 속성을 추가해야 합니다.

app:layout_behavior="@string/appbar_scrolling_view_behavior"