[Android, Collapsing Tool bar] Collapsing Tool bar 에서의 status bar

머티리얼 디자인에서 많이 보는 화면으로 위 이미지는 status bar 가 있는 화면입니다.

하지만 위와 같이 status bar를 투명하게 설정하고 스크롤을 올릴시 status bar 와 툴바가 보이도록 설정하는 법에 대해 살펴보겠습니다.

아래는 작업한 깃 허브 주소로 예제 파일로 사용하시면 됩니다.

https://github.com/dlwls5201/MyMaterialDesign

위와 같은 화면의 구조는 

CoordinatorLayout - AppBarLayout - CollapsingToolbarLayout - ImageView, Toolbar

로 구성됩니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/clActivityDetail"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abActivityMaterialDetail"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctlActivityMaterialDetail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimaryDark"
            app:expandedTitleMarginStart="24dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/ivActivityMaterialDetail"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:transitionName="movieWork"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/tbActivityMaterialDetail"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                app:layout_collapseMode="pin"/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nsvActivityMaterialDetail"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        ...

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabActivityMaterialDetail"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="16dp"
        app:layout_anchor="@id/abActivityMaterialDetail"
        app:layout_anchorGravity="bottom|right"/>

</android.support.design.widget.CoordinatorLayout>

- AppBarLayout

theme 를 설정하여 toolbar 의 타이틀 색을 변경해 줄 수 있습니다.

- CollapsingToolbarLayout

layout_scrollFlags 옵션을 통해 app:layout_behavior 를 지정한 스크롤뷰가 스크롤 될 때 반응을 설정할 수 있습니다.

contentScrim 을 통해 툴바의 배경색을 설정할 수 있습니다.

- ImageView

transitionName 을 설정하여 화면 전환 시 이미지의 이동을 줄 수 있습니다.

layout_collapseMode = "parallax" 스크롤 됨에 따라 parallax 효과를 부여합니다.

-  Toolbar

layout_collapseMode = "pin" 스크롤 되는 내용을 타고 올라가다가 화면 최상단까지 오면 고정됩니다.

1. 폴더 values 의 styles.xml 에 추가해 줍니다.

아래 테마는 status bar 의 색을 투명으로 바꿔줍니다.

<style name="NonStatusBar" parent="AppTheme">
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

2, AndroidManifest 에서 styles 에서 설정한 테마를 추가해 줍니다.

<activity android:name=".ui.material.MaterialDetailActivity"
    android:theme="@style/NonStatusBar"/>

3. CoordinatorLayout - AppBarLayout - CollapsingToolbarLayout  - ImageView 이 3개의 뷰에 아래 항목을 추가한다.

(Toolbar 에는 추가하지 않는다.)

android:fitsSystemWindows="true"

위 옵션은 추가하지 않으면 status bar 가 투명이여도 View 가 채워지지 않는다.

짜잔~! 위와 같이 status bar 까지 꽉찬 머티리얼 디자인이 완성됩니다.

번외(layout_scrollFlags)

CollapsingToolbatLayout 의 layout_scrollFlags 속성을 변경하여 다양한 스크롤 효과를 줄 수 있습니다.

1. app:layout_scrollFlags="scroll|exitUntilCollapsed"

위로 스크롤 될 때 반응 하며, Toolbar 의 height 까지 줄어듭니다.

2.app:layout_scrollFlags="scroll|enterAlways"

위로 스크롤 시 툴바가 모두 사라지고 아래로 스크롤 하는 순간 툴바가 나타납니다.

3.app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

위로 스크롤 시 툴바가 모두 사라지고 아래고 스크롤이 다 될 때 툴바가 나타납니다.

아래 링크는 참고했던 자료 입니다.

머티리얼 디자인 예제

http://blog.iamsuleiman.com/toolbar-animation-with-android-design-support-library/

툴바 스크롤

https://code.tutsplus.com/articles/scrolling-techniques-for-material-design--cms-24435

https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout

https://medium.com/@martinomburajr/android-design-coordinator-layout-1-an-introduction-10a1b91ded28