CollapsingToolbarLayout을 이용한 머터리얼 디자인 적용

앱개발중에 머터리얼 디자인을 적용하여 아래와 같이 구현하고 싶었습니다.

어떻게 구현하는지와 구성된 코드들에 대해서 알아봅니다.

해당 디자인을 적용하기는 어렵지 않습니다.

이제는 기본적으로 안드로이드 샘플에서 제공해주고 있으니까요!

안드로이드 스튜디오에서 상단의 File > New > Activity > Scrolling Activity 메뉴에서 해당 샘플을 확인해 볼 수 있습니다.

ScrollingActivity의 XML레이아웃은 아래와같이 구성되어있습니다.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ScrollingActivity">
 
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">
 
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">
 
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/hello_kitty" />
 
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
 
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
 
    <include layout="@layout/content_scrolling" />
 
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />
 
</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout

✽ 슈퍼파워 FrameLayout으로 앱에서의 최상단을 장식한다.

✽ 하나 이상의 자식뷰와의 특정작용을 위한 컨테이너로 적용

AppBarLayout

✽ AppBarLayout은 머티리얼 디자인 앱 바의 스크롤링 제스처를 구현하는 리니어 레이아웃이다.

✽ 이 레이아웃 안에 들어가는 자식뷰들은 app:layout_scrollFlags 를 구현해야합니다.

✽ 이 레이아웃은 CoordinatorLayout에 크게 의존합니다. 다른 ViewGroup안에서는 대부분의 기능이 작동하지 않는다.

CollapsingToolbarLayout

✽ 축소형 앱 표시줄을 구현하는 래퍼

✽ 여기에서는 이 레이아웃의 차일드로 툴바와 이미지뷰를 구현했습니다.

            app:layout_scrollFlags="scroll|exitUntilCollapsed"

CollapsingToolbarLayout에서는 위와같이 layout_scorollFlags의 선언을 제공합니다.

이 선언에 따라서 하단에 위치한 스크롤뷰의 스크롤에 대한 상호작용이 변경됩니다.

FloatingActionButton

app:layout_anchor="@id/app_bar"

app:layout_anchorGravity="bottom|end"

코디네이터레이아웃안에서 플로팅버튼은 layout_anchor와 layout_anchorGravity를 지정할 수 있습니다.

layout_anchor는 지정된 아이디에 anchor를 건다는 것이고, 

anchorGravity는 해당 레이아웃의 어느지점에 위치시킬것인지 나타냅니다.

샘플액티비티 생성시 기본적으로 bottom|end에 위치하고 있습니다.

NestedScrollView

위의 코드에서 <include layout="@layout/content_scrolling" /> 는 아래와같습니다.

<android.support.v4.widget.NestedScrollView 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:context=".ScrollingActivity"
    tools:showIn="@layout/activity_scrolling">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />
 
</android.support.v4.widget.NestedScrollView>

NestedScrollView를 구현하고 있으며 여기서

app:layout_behavior="@string/appbar_scrolling_view_behavior"

를 주의깊게 보아야합니다.

이 layout_behavior를 지정해 주어서 NestedScrollView는 스크롤시에 AppBarLayout 와 상호작용하여 구동됩니다.

NestedScrollView 대신 RecyclerView를 이용할 수도있습니다.

코드 소스에서

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_scrolling)
        setSupportActionBar(toolbar)
        fab.setOnClickListener { view ->
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show()
        }
    }

코드 상에서 setSupportActionBar를 이용해서 toolbar를 새로 적용해야 합니다.

Style변경

<resources xmlns:tools="http://schemas.android.com/tools">
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowContentTransitions" tools:targetApi="lollipop">true</item>
 
    </style>
 
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
 
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
 
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
 
</resources>
 

스타일에서 <style name="AppTheme.NoActionBar">를 추가해주어야합니다.

그리고 매니페이스에서 해당 스타일을 적용해주어야하죠.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="karrel.com.collapseingtoolbarlayoutsample">
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".ScrollingActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

이렇게 말이죠

샘플

https://github.com/karrel84/CollapseingToolbarLayoutSample