Belajar AppBarLayout dan CoordinatorLayout pada Android Material Design

Last Updated on 9 years by Mas Herdi

Halo, melanjutkan dari series saya tentang Android Material Design dan Design Support Library, kali ini saya akan menjelaskan bagaimana mengimplementasikan AppBar dan CoordinatLayout pada aplikasi Android buatan kalian. AppBarLayout dan CoordinatorLayout merupkan dua buah elemen yang berbeda namun dalam implementasinya kedua elemen tersebut berhubungan satu sama lain.

Bagi yang baru pernah mendengar istilah AppBarLayout, AppBarLayout adalah suatu layout wrapper yang memungkinkan ToolBar dan views didekatnya (biasanya TabLayout) untuk bereaksi ketika ada event scroll pada halaman tersebut. Contoh gampangnya adalah seperti pada aplikasi Google Play Store, dimana saat kita scroll kebawah maka Toolbar-nya akan menghilang, namun element TabLayout-nya masih tetap kelihatan.

Sedangkan CoordinatorLayout berfungsi untuk mengontrol interaksi antar elements pada layout saat terjadi click events. Contohnya pada tutorial SnackBar berikut, dimana saat FloatingActionButton diklik maka SnackBar akan muncul dan menutupi sebagian dari FAB tersebut. Namun dengan CoordinatorLayout, FAB itu akan otomatis naik ke atas saat SnackBar muncul sehingga tidak ada bagian dari FAB yang terhalangi. CoordinatorLayout juga membuat SnackBar bisa dihilangkan dengan cara di-swipe (geser ke samping).

Membuat AppBarLayout dan CoordinatorLayout pada Android

Pada tutorial kali ini kita akan mengimplementasikan dua fungsi di atas sekaligus belajar tentang AppBarLayout dan CoordinatorLayout. Ada baiknya sebelum melanjutkan postingan ini kalian membaca dulu postingan-postingan di bawah ini :

Pre-Requisites

• Mengenal Android Material Design
• Membuat Project Hello World dengan Android Studio
• Membuat Color Resources untuk Material Design Theme
• Membuat TabLayot pada Android
• Membuat ToolBar pada Android

Dan seperti biasa setelah kalian membuat project baru di Android Studio, import dependency seperti berikut

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

Setelah itu, kita akan membuat layout utama dengan nama main_layout.xml yang mempunya struktur sebagai berikut :
main_layout.xml

<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/coor_Layout"
    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="wrap_content"
        android:layout_alignParentTop="true"
        android:fitsSystemWindows="true">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/twoh_primary"
            android:scrollbars="horizontal"
            app:tabGravity="center"
            app:tabMode="scrollable" />
    </android.support.design.widget.AppBarLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:src="@drawable/ic_add_white"
        app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>

Susunan xml layout di atas secara garis besar adalah, CoordinatorLayout menjadi parent layout yang membungkus semua views di dalamnya. Sedangkan AppBarLayout akan menjadi wrapper untuk view ToolBar dan TabLayout. Sisanya adalah elemen body pada layout yang berupa list CardViews dan satu buah FloatingActionButton. Untuk elemen CardViews kalian bisa mendownload source code-nya di GitHub saya. Begitupun untuk source code elemen Toolbar kalian juga bisa download dari GitHub saya.

AppBarLayout bisa bereaksi ketika terdeteksi scroll event pada halaman dengan cara mendeteksi scrollFlags pada children element. Dalam hal ini pada Toolbar kita akan tambahkan atribut berikut :

    app:layout_scrollFlags="scroll|enterAlways"

Scroll flags berfungsi untuk menghandle event scrolling, sehingga Toolbar bisa bereaksi saat halaman tersebut di-scroll. Saat layout di-scroll, maka Toolbar akan menghilang, namun elemen TabLayout akan tetap menempel pada bagian atas layar.

Sedangkan untuk interaksi animasi antara FAB dan SnackBar, kita tidak perlu menambahkan apa-apa, cukup dengan membuat CoordinatorLayout sebagai parent view pada layout tersebut.

Pada kode java-nya tidak banyak yang bisa diimplementasikan, sebagian besar berisi cara untuk membuat TabLayout seperti pada tutorial sebelumnya, kita beri nama AppContainerTabActivity.java. Keseluruhan kodenya bisa kalian lihat di bawah ini :

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

/**
 * Created by Hafizh Herdi on 7/2/2015 www.twoh.co
 */
public class AppContainerTabActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private FloatingActionButton fab;

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

        setupToolbar();

        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
        tabLayout.addTab(tabLayout.newTab().setText("Home"));
        tabLayout.addTab(tabLayout.newTab().setText("Profile"));
        tabLayout.addTab(tabLayout.newTab().setText("Settings"));
        tabLayout.addTab(tabLayout.newTab().setText("More"));
        tabLayout.addTab(tabLayout.newTab().setText("About"));
        tabLayout.addTab(tabLayout.newTab().setText("Help"));
        tabLayout.addTab(tabLayout.newTab().setText("Friends"));

        fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(findViewById(R.id.coor_Layout), "Contoh sebuah Snackbar", Snackbar.LENGTH_LONG).setAction("Click me!", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {

                    }
                }).show();
            }
        });
    }

    private void setupToolbar(){
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        final ActionBar ab = getSupportActionBar();
        ab.setHomeAsUpIndicator(R.drawable.ic_menu);
        ab.setDisplayHomeAsUpEnabled(true);
    }

}

Inilah gambaran ketika kita jalankan aplikasi tersebut.

Demo

Untuk fungsi CoordinatorLayout untuk mengatur interaksi FAB dan SnackBar bisa dilihat pada gambar di bawah

FAB naik ke atas ketika SnackBar muncul

Snackbar bisa dihilangkan dengan cara di-swipe

Untuk implementasi AppBarLayout bisa dilihat pada gambar di bawah

Tampilan normal AppBarLayout

Ketika discroll Toolbar hilang namun TabLayout menempel di atas

That’s all. Kalian bisa download source code nya di GitHub saya, jangan lupa untuk follow dan star projectnya ya ?Bagi yang kurang jelas silahkan tanya di bagian komentar.