CollapsingToolbarLayout example

Result

다른 앱들에서 많이 사용하고 있는 CollapsingToolbarLayout 를 이용한 Toolbar 를 예제로 구성해보겠습니다.

 

 

https://developer.android.com/reference/android/support/design/widget/CollapsingToolbarLayout

CollapsingToolbarLayout  |  Android Developers

CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. 

 

layout을 구성하기 위해서 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"
    tools:context=".view.SettingActivity">
    
        <android.support.design.widget.AppBarLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:theme="@style/ThemeOverlay.AppCompat.Light"
          android:fitsSystemWindows="true">
        
        </android.support.design.widget.AppBarLayout>
 </android.support.design.widget.CoordinatorLayout>

Setting 화면을 위한 예제로 구성하였습니다.

Toolbar 를 감싸기 위한 AppBarLayout 을 먼저 넣어주었습니다.

 

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="167dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/CollapsingToolbar.TitleText"
            app:collapsedTitleTextAppearance="@style/Toolbar.TitleText"
            app:contentScrim="#FF6B60"
            app:expandedTitleGravity="center"
            android:fitsSystemWindows="true">
            
       </android.support.design.widget.CollapsingToolbarLayout>

layout_scrollFlags 는 5가지 항목을 제공 하고 있습니다.

 

scroll, expandAlways, expandAlwaysCollapsed, snap,exitUntilCollapsed.

 

위의 동작에 대해서는 아래 블로그에서 상세하게 정의가 되어 있습니다.

 

https://medium.com/martinomburajr/android-design-collapsing-toolbar-scrollflags-e1d8a05dcb02

Android Design — Collapsing Toolbar: ScrollFlags Illustrated

expandedTitleTextAppearance 는 Scroll 되기전 Text 에 대해서 정의를 할 수 있습니다.

 

Styles.xml 파일에서 TextColor 또는 TextSize 를 변경할 수 있습니다.

<style name="CollapsingToolbar.TitleText" parent="TextAppearance.Design.CollapsingToolbar.Expanded">
<item name="android:textColor">#FFFFFF</item>
</style>

collapsedTitleTextAppearance 는 Toolbar 상태에서의 Text 에 대해서 정의할 수 있으며 위와 동일하게 선언할 수 있습니다.

 

contentScrim 항목은 Toolbar 상태일때의 색상을 변경 할 수 있습니다.

expandedTitleGravity 항목은 Title 를 원하는 위치에 배치할 수 있습니다. 현재의 예제는 중앙으로 구성하였습니다.

 

            <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/ThemeOverlay.AppCompat.Light"
                app:navigationIcon="@drawable/common_top_btn_icon_back">

            </android.support.v7.widget.Toolbar>

Scroll이 상단으로 올라갔을때 나오는 Toolbar 를 구성하였습니다.

 

layout_collapseMode none, parallax, pin 3가지 항목이 있습니다.

 

none 일반적인 View처럼 동작합니다.

parallax 는 Toolbar 가 축소되는 동안 동작합니다.

Pin 은 Toolbar 가 상단으로 올라갔을때 고정됩니다.

 

아래 사이트를 잘 정의가 되어 있습니다.

https://freehoon.tistory.com/38

[안드로이드] CoordinatorLayout 활용 (Scrolling Techniques)

마지막으로 남은 부분은 하단의 스크롤 부분입니다.

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        
    </android.support.v4.widget.NestedScrollView>

여기에서 layout_behavior 를 꼭 선언해 주셔야 동작합니다.

String.xml 부분에 선언을 해 주었습니다.

 

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

 

 

최종 모든 소스 부분입니다.

activity_setting.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"
    tools:context=".view.SettingActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Light"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="167dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/CollapsingToolbar.TitleText"
            app:collapsedTitleTextAppearance="@style/Toolbar.TitleText"
            app:contentScrim="#FF6B60"
            app:expandedTitleGravity="center"
            android:fitsSystemWindows="true">

            <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/ThemeOverlay.AppCompat.Light"
                app:navigationIcon="@drawable/common_top_btn_icon_back">

            </android.support.v7.widget.Toolbar>

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:gravity="center"
                android:text="TEST"
                android:textColor="@color/colorPrimary"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:gravity="center"
                android:text="TEST"
                android:textColor="@color/colorPrimary"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:gravity="center"
                android:text="TEST"
                android:textColor="@color/colorPrimary"/>
        </LinearLayout>

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


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

SettingActivity 부분입니다.

package kr.co.unioncomm.ubio_alpeta.view;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.widget.Toolbar;
import android.view.View;

import butterknife.BindView;

public class SettingActivity extends BaseActivity<SettingViewModel, ActivityUsersBinding> {

    @BindView(R.id.toolbar)
    Toolbar toolbar;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setToolbar();
    }

    private void setToolbar() {
        toolbar.setTitle(getString(R.string.menu11));
        setSupportActionBar(toolbar);

        if(getSupportActionBar() != null){
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }
        toolbar.setNavigationOnClickListener(v -> {
            onBackPressed();
        });
    }
    
    ....
}

 

 

 

Result

최종 결과는 맨처음 보신 화면과 동일합니다.