Android Collapsing ToolbarLayout

Bài đăng này đã không được cập nhật trong 2 năm

Trong bài này mình xin giới thiệu với các bạn về Collapsing ToolbarLayout trong Android.

Collapsing ToolbarLayout là thuộc tính bắt đầu được giới thiệu từ phiên bản Android Lollipop.

Collapsing ToolbarLayout là gì? đó là thuộc tính mà khi người dùng cuộn lên hoặc cuộn xuống màn

hình, nó sẽ cung cấp và điều khiển cho ứng dụng chúng ta hiệu ứng động.

Như các bạn đã biết thì hiện nay có rất nhiều ứng dụng android được thiết kế và sử dụng

Collapsing ToolbarLayout, điển hình như Google play, và hiện tại mình cũng đang làm project với

giao diện sử dụng Collapsing ToolbarLayout. Để sử dụng thuộc tính này chúng ta cần thêm thư viện

trong file build.gradle như sau:

    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'

Trong file activity_main.xnl như sau:

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

ở đây chúng ta sử dụng CoordinatorLayout là main layout chứa các View hoặc ViewGroup.

CoordinatorLayout là mở rộng của FrameLayout, chúng ta xét hành vi cụ thể cho các View con chứa

bên trong CoordinatorLayout và chúng có thể tương tác với nhau theo các hành vi khác nhau.

CoordinatorLayout cho phép xét vị trí các View theo điểm neo trong Layout. Ví dụ khi chúng ta sử

dụng FloatingActionButton, chúng ta xét vị trí cho nó tùy vào điểm neo chúng ta lựa chọn app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom|right|end"

Tiếp theo chúng ta thêm AppBarLayout:

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_layout_height">
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

**AppBarLayout: **

Là LinearLayout có hướng theo chiều thẳng đứng và có các thuộc tính được material design hộ

trợ. Như cử chỉ cuộn, để làm điều này chúng ta sét thuộc tính app:layout_scrollFlags.

AppBarLayout là phần tử con được sử dụng trực tiếp bên trong CoordinatorLayout, nếu sử dụng

AppBarLayout bên trong ViewGroup khác nó sẽ không làm việc.

Tiếp theo chúng ta thêm CollapsingToolbarLayout:

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_layout_height">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_layout_height"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:layout_width="match_parent"
                android:layout_height="@dimen/tool_bar_height"
                android:layout_marginTop="@dimen/margin_for_status_bar"
                android:background="@android:color/transparent"
                android:elevation="@dimen/elevation_dimen"
                android:theme="@style/AppTheme.Base"
                app:layout_collapseMode="pin">
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout:

Là lớp mở rộng của Toolbar, nó thường chứa ảnh trên header của ứng dụg và khi chúng ta cuộn lên

hoặc cuộn xuống thì các ảnh này sẽ bị collapse. Chúng ta sét thuộc tính cờ scrolls cho Toolbar

app:layout_scrollFlags. Ở đây chúng ta có một số cờ cơ bản như sau:

Scroll: cờ này nên được thiết lập cho tất cả các View mà muốn di chuyển ra khỏi màn hình
enterAlways: cờ này đảm bảo rằng bất kỳ View khi cuộn xuống sẽ được nhìn thấy.
enterAlwaysCollapsed: Khi bạn đã xét minheight và bạn sử dụng lá cờ này, View của bạn sẽ bị

Collapse và xuất hiện khi đạt chiều cao tối thiểu của nó.

exitUntilCollapsed: Cờ này sẽ làm cho View bị collapse khi nó đạt đến độ cao tối thiểu của nó.

Tiếp theo chúng ta sét ảnh làm ảnh header của ứng dụng như sau:

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_layout_height">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_layout_height"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/image_banner_app_detail"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:layout_width="match_parent"
                android:layout_height="@dimen/tool_bar_height"
                android:layout_marginTop="@dimen/margin_for_status_bar"
                android:background="@android:color/transparent"
                android:elevation="@dimen/elevation_dimen"
                android:theme="@style/AppTheme.Base"
                app:layout_collapseMode="pin">
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Trong ImageView chúng ta xét thuộc tính collapseMode cho ImageView, ở đây có 2 thuộc tính

collapseMode:

Parallax: Thuộc tính này sẽ ẩn và xuất hiện hình ảnh khi chúng ta cuộn AppBarLayout.
Pin: Thuộc tính này sẽ sẽ ẩn hình ảnh đến khi nó đạt đến vị trí cuối cùng của

CollapsingToolbarLayout.

Tiếp theo mình sẽ thêm vào NestedScrollView và CardView và FloatingActionButton :

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/primary_dark"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/img_header"
                app:layout_collapseMode="parallax"/>

            <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"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardElevation="6dp"
            app:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="20dp"
                    android:gravity="center_horizontal"
                    android:text="@string/title"
                    android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

                <TextView
                    android:id="@+id/description"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="30dp"
                    android:text="@string/description"
                    android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        style="@style/fab"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|right|end"
        app:theme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CoordinatorLayout>

NestedScrollView là giống như scrollview, nhưng nó hỗ trợ hoạt động cho cả ViewGroup và View

lồng nhau. Chúng ta cũng có thể sử dụng RecyclerView bên trong NestedScrollView tùy thuộc vào

thiết kế của từng Layout của ứng dụng.

FloatingActionButton: Là button động, nó được hiển thị trên màn hình tùy vào vị trí mà chúng ta

sắp xếp. Ở đây mình sẽ hiển thị ở bên dưới AppBarLayout.

CardView: Giống như FrameLayout với hình nênf được bo tròn góc và đổ bóng.

Trong MainActivity.java chúng ta làm như sau:

public class MainActivity extends AppCompatActivity {
    CollapsingToolbarLayout collapsingToolbarLayout;
    ImageView image;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        image = (ImageView) findViewById(R.id.image);
        setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbarLayout.setTitle("Collapsing");
        collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.accent));
    }
}