Beranda / Android Developer / Android Programming / Layout / Material Design

Cara Membuat AppBarLayout dan CoordinatorLayout di Android Material Design

Oleh Wildan M Athoillah

Assalamualaikum Warahmatullahi Wabarakatuh.

Disini kita akan melanjutkan pembahasan mengenai Material Design, Pada tutorial berikut ini kita akan mempelajari bagaimana cara mengimplementasikan AppBarLayout dan CoordinatorLayout pada Aplikasi Android. AppBarLayout adalah suatu elemen layout wrapper yang memungkinkan ToolBar atau views didekatnya untuk bereaksi ketika ada user yang mengscroll pada suatu halaman/activity. Contohnya seperti pada Aplikasi WhatApp, dimana saat user mengscroll kebawah maka Toolbar nya akan menghilang, namun element TabLayout pada pada aplikasi tersebut masih kelihatan.


CoordinatorLayout digunakan untuk mengontrol interaksi antar elements pada layout saat terjadi click events. Misalnya jika kita menggunakan SnackBar, dimana saat FloatingActionButton diklik maka SnackBar akan muncul dan menutupi sebagian dari FAB tersebut. Namun dengan menggunakan CoordinatorLayout, FAB itu secara otomatis akan naik ke atas saat SnackBar muncul sehingga bagian dari FAB tidak akan tertutup oleh FAB.

Membuat AppBarLayout di Android Material Design

Pada tutorial ini, kita akan mencoba mengimplementasikan AppBarLayout dengan CoordinatorLayout, kedua elemen tersebut mempunyai fungsi yang berbeda namun dalam implementasinya kedua elemen tersebut berhubungan satu sama lain. Jadi untuk melengkapi tutorial berikut ini, kita akan belajar keduanya.

Disini kita akan membuat User Interface yang mirip dengan Aplikasi WhatsApp, dimana saat user mengscroll kebawah maka Toolbar nya akan menghilang, namun element TabLayout pada pada aplikasi tersebut masih kelihatan.

Sebelum melanjutkan tutorial berikut ini, ada beberapa komponen Material Design yang harus kalian buat dan pelajari, seperti:

Jika kalian sudah mempelajari atau membuat keempat komponen Material Design tersebut, Jangan lupa kita harus menambahkan beberapa library berikut ini, pada dependensies, buka file build.grdle yang terdapat pada direktori app:
implementation 'com.android.support:appcompat-v7:27.0.2'
implementation 'com.android.support:design:27.0.2'
implementation 'com.android.support:recyclerview-v7:27.0.2'
implementation 'com.android.support:support-v4:27.0.2'
A. Menyiapkan Toolbar

Disini kita akan membuat Toolbar secara terpisah dengan MainActivity, jadi Toolbar tersebut tidak kita masukan secara langsung pada Activity Utama kita. klik kana pada direktori layout, lalu pilih new Layout resource file, berinama layout tersebut dengan nama "my_toolbar". Kalian buat dan ubah baris kode xml pada Toolbar tersebut menjadi seperti ini:
<?xml version="1.0" encoding="utf-8"?>
<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:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:layout_scrollFlags="scroll|enterAlways|snap"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/AppTheme">

</android.support.v7.widget.Toolbar>
Atribut layout_scrollFlags digunakan untuk menghandle event scrolling, Saat layout discroll kebawah, maka Toolbar akan menghilang, namun elemen TabLayout akan tetap menempel pada bagian atas layar.

B. Menerapkan Masing-Masing Komponen pada Activity Utama

Selanjutnya buka file activity_main.xml pada project kalian, disini kita akan menambahkan CoordinatorLayout, AppBarLayout, Toolbar, TabLayout dan ViewPager. Yang sudah kita buat tadi, jika belum, kalian dapat melihat tutorialnya yang sudah saya berikan tadi.

Pada Activity tersebut, kalian buat dan ubah kode xmlnya menjadi seperti berikut ini:
<?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:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/background_light">

        <!-- Memanggil dan Menerapkan Toolbar pada MainActivity -->

      <include
          android:id="@+id/toolbar"
          layout="@layout/activity_my_toolbar"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:tabMode="fixed"
            app:tabSelectedTextColor="#FFFFFF"
            app:tabTextColor="#FFFFFF">

            <android.support.design.widget.TabItem
                android:id="@+id/tab_kontak"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Teman" />

            <android.support.design.widget.TabItem
                android:id="@+id/tab_pesan"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Pesan" />

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

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

    <!-- Menerapkan TabLayout dan ViewPager -->

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>

    <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/add_teman"
        app:backgroundTint="@color/colorPrimaryDark"
        app:fabSize="normal" />

</android.support.design.widget.CoordinatorLayout>
Jika kita ubah pada mode Design, maka akan terlihat seperti berikut ini:


Penjelasan:

CoordinatorLayout menjadi parent layout yang membungkus semua views di dalam activity. Sedangkan AppBarLayout akan menjadi wrapper untuk view Toolbar dan TabLayout. Lalu elamen body untuk activity tersebut berupa list ViewPager, yang digunakan untuk memanggil halaman/fragment yang terpasang pada TabLayout, didalam ViewPager, kita tambahkan atribut app:layout_behavior="@string/appbar_scrolling_view_behavior", untuk menggambarkan prilaku dari ViewPager, supaya berada dibawah AppBarLayout. Dan komponen terakhir yaitu satu buah FloatingActionButton.

C. Menerapkan RecylerView pada Fragment didalam TabLayout

Pada TabLayout terdapat 2 buh flagment yang sudah kita buat sebelumnya, yaitu frag1_kontak dan frag2_pesan, disini kita akan memasukan source code untuk RecyclerView pada salah satu fragment tersebut, misalnya pada frag1_kontak:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_light"
    tools:context="cianjur.developer.net.toolbar.Frag1_Kontak">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical">

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

</RelativeLayout>
Buka file Frag1_kontak.java, Masukan source code berikut ini:
package cianjur.developer.net.toolbar;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;
import java.util.Arrays;

public class Frag1_Kontak extends Fragment {

    private ArrayList JudulMeme;
    //Daftar Teman
    private String[] Judul = {"Wildan", "Taufan", "Aish", "Ferdi", "Taufik", "Dzaki", "Annisa",
            "Diki","Sinta","Agung","Andita","Dirham","Fadhil","Azis","Mukiidi","Tata"};


    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view_frag1 = inflater.inflate(R.layout.activity_frag1__kontak, container, false);
        JudulMeme = new ArrayList<>();
        RecyclerView recyclerView = view_frag1.findViewById(R.id.recycler);
        DaftarItem();
        //Menggunakan Layout Manager, Dan Membuat List Secara Vertical
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getContext());
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setHasFixedSize(true);
        RecyclerView.Adapter adapter = new RecyclerViewAdapter(JudulMeme);
        //Membuat Underline pada Setiap Item Didalam List
        DividerItemDecoration itemDecoration = new DividerItemDecoration(getContext(), DividerItemDecoration.VERTICAL);
        itemDecoration.setDrawable(ContextCompat.getDrawable(getContext(), R.drawable.line));
        recyclerView.addItemDecoration(itemDecoration);
        //Memasang Adapter pada RecyclerView
        recyclerView.setAdapter(adapter);
        return view_frag1;
    }

    //Mengambil data dari Varibale Gambar dan Judul, lalu memasangnya pada list yang terhubung dengan Class Adapter
    private void DaftarItem(){
        JudulMeme.addAll(Arrays.asList(Judul));
    }
}
D. Demo:



Project tersebut bisa kalian download di Github Saya.

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.