Android Studio: Cara Membuat Tabs


Selamat pagi semua, pada kali ini balidev akan share tentang cara membuat tabs pada aplikasi android menggunakan Android Studio.
Sebelum lebih lanjut mengenai pembuatan tabs, kalian sudah harus paham mengenai pembuatan fragment dan bagaimana fragment itu bekerja.
1# Buka android studio dan buatlah Empty Activity.
2# Buat 3 buah fragment masing-masing seperti di bawah ini:
buat file baru pada res->layout->dengan nama tabmenu.xml
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * Created by ManInBack on 11/30/2016.
 */
public class tab1 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v =inflater.inflate(R.layout.tabmenu,container,false);

        return v;

    }

}
Selanjutnya buat tab1.java yang akan memakai layout diatas
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * Created by ManInBack on 11/30/2016.
 */

public class tab1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v =inflater.inflate(R.layout.tabmenu,container,false);

        return v;

    }

}
masuk lagi ke layout buat file baru dengan nama tabmenu2.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="Tab 2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView"
        android:textSize="24sp" />
</RelativeLayout>
Selanjutnya buat tab2.java yang akan menggunakan layout tabmenu2
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by ManInBack on 12/2/2016.
 */

public class tab2  extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v =inflater.inflate(R.layout.tabmenu2,container,false);

        return v;

    }
}
sekarang kita akan buat layout yang terakhir dengan nama tabmenu3.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="Tab 3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView2"
        android:textSize="24sp" />
</RelativeLayout>
Buat lagi tab3.java
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by ManInBack on 12/2/2016.
 */

public class tab3 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v =inflater.inflate(R.layout.tabmenu3,container,false);

        return v;

    }

}

Kita sudah membuat 3 buah fragment, sebelum lanjut saya melakukan pemilihan warna terlebih dahulu agar kelihatan lebih bagus tabsnya. Kalian bisa mengikuti silahkan masuk ke res->values->colors
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3498db</color>
    <color name="colorPrimaryDark">#2980b9</color>
    <color name="colorAccent">#FF4081</color>
    <color name="backgroundTab">#ecf0f1</color>
    <color name="tabIndicators">#3498db</color>
</resources>

Selanjutnya kita akan buat PagerAdapter yang berfungsi mengatur fragment-fragment yang sudah kita buat diatas. Buatlah dengan nama PagerAdapter.java dan berikut sintaksnya.
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

/**
 * Created by ManInBack on 11/30/2016.
 */

public class PagerAdapter extends FragmentStatePagerAdapter {
    int mNumOfTabs;

    public PagerAdapter(FragmentManager fm, int NumOfTabs) {
        super(fm);
        this.mNumOfTabs = NumOfTabs;
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                tab1 tab1 = new tab1();
                return tab1;
            case 1:
                tab2 tab2 = new tab2();
                return tab2;
            case 2:
                tab3 tab3 = new tab3();
                return tab3;
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return mNumOfTabs;
    }
}

Sekarang kita akan masuk ke activity_main.xml untuk pembuatan tabsnya, pastikan kalian sudah menambahkan library android design. Caranya masuk ke build.gradle pada dependencies-nya tambahkan compile "com.android.support:design:23.4.0"

Masuk ke activity_main.xml, kita akan buat layoutnya, untuk konfigurasi saya sintaksnya seperti dibawah ini, silahkan sesuaikan dengan punya kalian jangan di copas.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.maninback.tab.MainActivity">

   <android.support.design.widget.TabLayout
       android:id="@+id/tablayout"
       android:clickable="true"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:background="@color/backgroundTab"
       app:tabIndicatorColor="@color/tabIndicators">

       <android.support.design.widget.TabItem
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="@string/tab1"/>
       <android.support.design.widget.TabItem
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="@string/tab2"/>
       <android.support.design.widget.TabItem
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="@string/tab3"/>

   </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tablayout"/>

</RelativeLayout>

Selanjutnya pada MainActivity.java buat sintaksnya seperti di bawah ini:
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;


public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        final PagerAdapter adapter = new PagerAdapter
                (getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

}

Sampai disini coba kalian run projectnya semoga tidak ada error, di handphone saya bekerja dengan bagus di bawah ini Screenshootnya:
 Cara membuat tabs di android studioCara membuat tabs di android studio

Sekian tutorialnya, bagi kalian yang ingin belajar yang dasar silahkan klik menu pemograman pada blog ini, sebelumnya saya sudah share yang dasar-dasar untuk pembuatan aplikasi android.

Baca juga artikel lainnya:

  1. Android Studio : Menampilkan website atau blog kalian di aplikasi android buatan sendiri
  2. Android Studio : Membuat Navbar Drawer dan Fragment
  3. Android Studio: Membuat Form Login Sederhana dan Tutorialnya
  4. Androdi Studio : Cara Membuat Aplikasi SMS yang simple

Artikel Terkait

17 komentar

keren gan, makasih tutor nya :)

gan klo kita kasih recyclerview dengan ceklist, nah ada masalah ketia ku ceklist di tab 1 trus buka ke tab 3, ceklist di tab 1 kok hilang ya, itu gimana ya gan?

soalnya kita sudah implements fragment baru, fragment lama di replace sama yang baru. itu yang bikin hilang

Ane biasa pkek tabhost
Cmn yaa tabhost nggk ada slide kanan kiri :v
Tabhost ringan sih jadi enak"

Ane biasa pkek tabhost
Cmn yaa tabhost nggk ada slide kanan kiri :v
Tabhost ringan sih jadi enak"

basenya tabhost gan, tapi ini saya tambahin slidernya

Om bantuannya dong om, kok ane error diline ini yak?? Errornya constructor cannot be applied gtu.. bantu dong um maaf nubi hehe
final PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());

PagerAdapter.java sudah dibuat belum?

ini kalau kita mau nambahin jumlah tab bagian mana mas yang diubah?

Buat fragment baru, terus tambahkan di menu utama, kalau sudah berhasil yang di atas itu gampang nambahinnya. Saya lagi gak on di pc

gan, layout tab 1 mau dikasih floating action button gimana? terus biar floating action button di klik bisa keluar activity baru gimana?
Tolong pencerahannya

pagi kak, terima kasih banyak tutornya, keren. :)
kak mau tanya ada tidak tutor tabhost seperti app Line? saat sliding tabhost nama pada bar atas berubah sesuai tab?

klo ada bisa berbagi tutornya.. :) untuk tabhost seperti app Line, terimakasih

coba bongkar saja langsung apk line. saya kurang tahu itu murni java apa pakai hybrid app

Itu dulu ane salah extends activitynya om, lupa klo blm import appcompatactivity hehe


EmoticonEmoticon