Cara Membuat AppBarLayout dan CoordinatorLayout di Android Material Design


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.

Belum ada Komentar untuk "Cara Membuat AppBarLayout dan CoordinatorLayout di Android Material Design"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Daftar Situs Idn Poker Online di 18Dewa dan juga Poker Qiu atau di sebut Pokerqiu adalah situs ceme online terpercaya sama dengan 18Dewapoker dan situs poker pkv yang terkenal adalah Masterdomino88 atau nama lain Domino88 bersaing di dunia game online poker Bandar389 dan poker idn lainnya yang memberikan kemenangan tinggi yaitu Big Poker88 baru lagi agen poker bernama Rekan Poker yang punya banyak peluang besar.