Cara Membuat TabLayout di Android Material Design
Assalamualaikum Warahmatullahi Wabarakatuh.
Pada kesempatan kali ini saya akan memberikan tutorial, cara membuat TabLayout Android Studio, sekarang ini banyak sekali developer yang menggunakan Menu Tab pada project yang mereka buat, TabLayout atau Menu Tab banyak digunakan karena mempermudah user untuk mengakses konten yang apa pada aplikasi tersebut, contohnya seperti Whatsapp dan Line Messenger, kedua aplikasi tersebut menggunakan TabLayout untuk memisahkan konten pada aplikasi mereka, kita bisa menggesernya ke kiri dan kekanan tanpa harus berpindah activity.
Supaya TabLayout berfungsi dengan baik, kita membutuhkan sebuah Fragment sebagai pembungkus konten yang terdapat pada Menu Tab, fragment merupakan bagian dari activity dan hanya menduduki sebagian layar pada activity.
Tutorial Membuat TabLayout Material Design
1) Sebelum membuat TabLayout, disini saya sudah membuat Toolbarnya terlebih dahulu, jika kalian ingin atau belum membuatnya, kalian bisa melihat tutorialnya Disini.
2) Buka file build.gradle(app-level), lalu masukan kedua library berikut ini, pada dependencies.
compile 'com.android.support:appcompat-v7:26.0.2'
compile 'com.android.support:design:26.0.2'
compile 'com.android.support:support-v4:26.1.0'
Membuat Fragment
3) Selanjutnya kita akan membuat 2 buah Fragment, disini kita akan membuat fragmentnya secara manual, caranya kalian buat activity baru beserta class.javanya lalu berinama kedua fragment tersebut dengan nama Frag1_Kontak & Frag2_Pesan.
4) Pada activity_frag1_kontak.xml, saya akan menambahkan 1 buah TextView, yang berisi tulisan Kontak, ini bermaksud sabagai penanda saja, bahwa kita sedang berada pada fragment kontak, tapi kalian bisa mengeditnya sesuka hati.
<?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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="Kontak"
android:textColor="@android:color/darker_gray"
android:textSize="24sp"
android:textStyle="bold" />
</RelativeLayout>
Ubah source code pada file Frag1_Kontak.java, menjadi seperti berikut ini:
package cianjur.developer.net.toolbar;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Frag1_Kontak extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view_frag1 = inflater.inflate(R.layout.fragment_frag1_kontak, container, false);
return view_frag1;
}
}
Jangan lupa, saat mengextends Fragment, kalian harus memilih Fragment (android.support.v4.app.Fragment)
5) Selanjutnya kita edit layout pada fragment yang kedua, yaitu activity_frag2_pesan, kodenya hampir sama seperti pada fragment yang pertama, hanya isi TextViewnya saja yang berbeda.
<?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.Frag2_Pesan">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="Pesan"
android:textColor="@android:color/darker_gray"
android:textSize="24sp"
android:textStyle="bold" />
</RelativeLayout>
Buka file Frag2_Pesan.java, masukan source code berikut ini:
package cianjur.developer.net.toolbar;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Frag2_Pesan extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View frag2_pesan = inflater.inflate(R.layout.fragment_frag2_pesan, container, false);
return frag2_pesan;
}
}
Membuat PagerAdapter
6) Selanjutnya kita akan membuat class PagerAdapter, class ini digunakan untuk mengatur halaman fragment yang sudah kita buat, untuk kita terapkan pada TabLayout, buat class java bernama PagerAdapter, Source Codenya seperti berikut ini:
package cianjur.developer.net.toolbar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
public class PagerAdapter extends FragmentStatePagerAdapter{
private int number_tabs;
public PagerAdapter(FragmentManager fm, int number_tabs) {
super(fm);
this.number_tabs = number_tabs;
}
//Mengembalikan Fragment yang terkait dengan posisi tertentu
@Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new Frag1_Kontak();
case 1:
return new Frag2_Pesan();
default:
return null;
}
}
//Mengembalikan jumlah tampilan yang tersedia.
@Override
public int getCount() {
return number_tabs;
}
}
Membuat TabLayout dan Menerapkan ViewPager
7) Selanjutnya kita akan menbuat iconnya terlebuh dahulu, disini saya sudah membuat 2 buah icon, kalian bisa membuatnya sesuai kebutuhan, caranya klik kanan pada direktori res > new > Image Asset.
Baca Juga:
8) Buka activity_main.xml kalian, sebelumnya saya sudah menambahkan Toolbar pada activity tersebut, selanjutnya kita akan menambahkan TabLayout beserta ViewPager.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
tools:context="cianjur.developer.net.toolbar.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:minHeight="?attr/actionBarSize">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="@style/AppTheme"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!-- Menerapkan TabLayout dan ViewPager -->
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tab_layout"
android:layout_below="@id/appBar"
android:background="@color/colorPrimary"
app:tabTextColor="#FFFFFF"
app:tabMode="fixed"
app:tabSelectedTextColor="#FFFFFF">
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/tab_kontak"
android:text="Kontak"
android:icon="@drawable/ic_kontak"/>
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/tab_pesan"
android:text="Pesan"
android:icon="@drawable/ic_pesan"/>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/pager"
android:layout_below="@id/tab_layout">
</android.support.v4.view.ViewPager>
</RelativeLayout>
Jika kita lihat gambaran dari layout tersebut akan seperti berikut ini:
9) Buka ActivityMain,java, pada source code berikut ini, kita akan menambahkan Toolbar, TabLayout dan ViewPager pada activity:
package cianjur.developer.net.toolbar;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar); //Inisialisasi dan Implementasi id Toolbar
setSupportActionBar(toolbar); // Memasang Toolbar pada Aplikasi
//Menerapkan TabLayout dan ViewPager pada Activity
final TabLayout tabLayout = findViewById(R.id.tab_layout);
final ViewPager viewPager = findViewById(R.id.pager);
//Memanggil dan Memasukan Value pada Class PagerAdapter(FragmentManager dan JumlahTab)
PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
//Memasang Adapter pada ViewPager
viewPager.setAdapter(pagerAdapter);
/*
Menambahkan Listener yang akan dipanggil kapan pun halaman berubah atau
bergulir secara bertahap, sehingga posisi tab tetap singkron
*/
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
//Callback Interface dipanggil saat status pilihan tab berubah.
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//Dipanggil ketika tab memasuki state/keadaan yang dipilih.
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
//Dipanggil saat tab keluar dari keadaan yang dipilih.
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
//Dipanggil ketika tab yang sudah dipilih, dipilih lagi oleh user.
}
});
}
}
Sekarang kalian jalankan project tersebut, jika ada yang belum paham, silakan tanyakan kepada saya melalui komentar dibawah dan mohon maaf bila ada kesalahan kata atau tutorial yang saya buat kurang jelas, terakhir dari saya.
Wassalamualaikum Warahmatullahi Wabarakatuh.
