Belajar Membuat CollapsingToolbarLayout di Android Material Design

Last Updated on 9 years by Mas Herdi

Melanjutkan postingan-postingan saya tentang library Android Support Design yang memudahkan kita dalam membuat aplikasi yang sesuai dengan standar Material Design. Kali ini kita akan membahas tentang bagaimana membuat CollapsingToolbarLayout pada Android.

Elemen layout yang baru ini contohnya bisa kita temukan pada banyak aplikasi Android populer saat ini, salah satunya pada aplikasi LINE. Ketika kita masuk ke bagian Home seseorang, maka akan nampak cover foto dari orang tersebut, yang ketika kita scroll ke bawah gambarnya akan semakin mengecil(collapse) dan akhirnya menjadi toolbar, elemen itulah yang dinamakan sebagai CollapsingToolbarLayout.

Membuat CollapsingToolbarLayout pada Android

Sebelum membuat CollapsingToolbarLayout, ada beberapa konsep-konsep yang seperti biasa harus kalian pelajari terlebih dahulu, seperti konsep CoordinatorLayout dan AppbarLayout yang bisa kalian baca pada postingan sebelumnya. Lengkapnya kalian bisa baca pada pre-requisites di bawah ini,

Pre Requisites :

• Mengenal Android Material Design
• Membuat Project Hello World dengan Android Studio
• Membuat Color Resources untuk Material Design Theme
• Membuat ToolBar pada Android
• Tutorial Android CoordinatorLayout dan AppbarLayout

Oke, seperti biasa setelah kalian membuat project Android baru di Android Studio, kalian bisa mengimport dependency seperti berikut pada file build.gradle :

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:design:22.2.1'
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.android.support:support-v4:22.2.1'
    compile 'com.android.support:cardview-v7:22.2.1'
    compile 'com.android.support:palette-v7:22.2.1'
}

Pada tutorial CollapsingToolbarLayout kali ini kita hanya akan menggunakan satu buah XML layout yang berisi; CollapsingToolbar itu sendiri, sebuah list yang berisi CardViews dan sebuah FloatingActionButton dan element pelengkap lainnya :D. Untuk layout CardViews, kalian bisa mendownloadnya di sini. Sedangkan untuk main layout kalian bisa membuat sebuah main layout bernama activity_collapse_toolbar.xml yang berisi kode berikut :

<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/appbar"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        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="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/iv_header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/header"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/AppTheme"
                app:layout_scrollFlags="scroll|enterAlways"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:elevation="4dp">

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include
        layout="@layout/view_cardview" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:clickable="true"
        android:src="@drawable/ic_add_white"
        app:layout_anchor="@+id/appbar"
        app:layout_anchorGravity="bottom|right|end" />

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

Pada kode layout di atas, bisa dilihat mempunya parent layout berupa CoordinatorLayout, CoordinatorLayout digunakan karena layout ini mempunyai beberapa element yang nantinya akan berinteraksi satu sama lain. Sedangkan element CollapsingToolbarLayout dibungkus oleh parent view bernama AppbarLayout, bersama dengan element lainnya, sebuah Toolbar dan ImageView. Nantinya ketiga element layout tersebut akan saling berinteraksi pada saat terjadi scroll events.

Ada beberapa atribut tambahan pada element AppBar, Toolbar dan ImageView, yaitu :

                app:layout_scrollFlags="scroll|enterAlways"

berfungsi untuk mendeteksi scrolling event pada layout tersebut. Dan,

                app:layout_collapseMode="pin"
                app:layout_collapseMode="parallax"

ditambahkan supaya Toolbar tetap menempel dan kelihatan pada bagian atas layar saat view-nya tertutup (collapse). Sedangkan, collapseMode parallax ditambahkan pada ImageView untuk memberikan efek parallax saat view-nya ditutup.

Untuk kode class nya sendiri, tidak banyak yang harus kita atur karena sebagian besar sudah dihandle oleh file layout xml di atas.  Buatlah file bernama CollapsingToolbarActivity.java sebagai main class, dan copy pastekan kode di bawah ini :

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;

/**
 * Created by Hafizh Herdi on 8/11/2015 www.twoh.co
 */
public class CollapsingToolbarActivity extends AppCompatActivity {
    CollapsingToolbarLayout collapsingToolbar;
    int mutedColor = R.attr.colorPrimary;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapse_toolbar);

        final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        // pengaturan dan inisialisasi collapsing toolbar
        collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle("TWOH's Engineering");
        collapsingToolbar.setExpandedTitleColor(Color.parseColor("#44ffffff"));

        // inisialisasi ImageView
        ImageView header = (ImageView) findViewById(R.id.iv_header);

        // mengambil gambar bitmap yang digunakan pada image view
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.header);

        // mengekstrak warna dari gambar yang digunakan
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                mutedColor = palette.getMutedColor(R.attr.colorPrimary);
                collapsingToolbar.setContentScrimColor(mutedColor);
            }
        });

    }
}

Beberapa pengaturan yang dilakukan pada kode diatas, seperti memberi title pada CollapsingToolbarLayout. Kita juga bisa memberi warna title pada saat CollapsingToolbar-nya mengembang dan pada saat normal. Saat CollapsingToolbar mengembang, maka ukuran font pada title akan menjadi lebih besar, dan akan kembali menjadi ukuran normal saat CollapsingToolbar-nya tertutup (collapsed). Pada kode di atas kita menggunakan Palette untuk mengekstrak warna yang ada pada gambar, yang nantinya digunakan untuk mewarnai CollapsingToolbar. Jadi warna pada CollapsingToolbar akan berganti-ganti sesuai dengan gambar background-nya.

Jika sudah, maka jika kalian jalankan aplikasinya akan nampak seperti demo di bawah ini :

Demo

Beginilah tampilan saat aplikasi pertama kali dijalankan :

CollapsingToolbarLayout pada saat normal

Saat kita scroll tampilannya ke atas, maka perlahan-lahan gambar akan tertutup

CollapsingToolbarLayout pada saat setengah tertutup

Dan inilah tampilan CollapsingToolbarLayout ketika benar2 tertutup, berganti menjadi hanya Toolbar. View lain seperti gambar(ImageView) dan FloatingActionButton-nya lenyap.

CollapsingToolbarLayout pada saat tertutup

That’s all. Jangan takut untuk mencoba karena kalian bisa download source code lengkap-nya di GitHub saya, jangan lupa untuk follow dan star projectnya ya ?Bagi yang kurang jelas silahkan tanya di bagian komentar.