Saturday, February 17, 2018

Membuat TabLayout di Android


Depok- 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.

1. 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'
2. Membuat Fragment
 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.

3. 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>
4. Ubah source code pada file Frag1_Kontak.java, menjadi seperti berikut ini:

package gawegadget.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.activity_frag1__kontak, container, false);
        return view_frag1;
    }
}

5.  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="gawegadgetd.eveloper.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>

6. Buka file Frag2_Pesan.java, masukan source code berikut ini:

package gawegadget.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.activity_frag2__pesan, container, false);
        return frag2_pesan;
    }
}

7.  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 gawegadget.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;
    }
}

8. 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.

WildanTechnoArt-TabLayout%2BIcon%2BChat

9.  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="gawegadget.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:

Screenshot_tabLayout%2BExample

10. Buka ActivityMain,java, pada source code berikut ini, kita akan menambahkan Toolbar, TabLayout dan ViewPager pada activity:

package gawegadget.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. (ar/arif)
Disqus Comments