Skip to main content
contoh tab layout android

Contoh Tab Layout View Pager Android

Contoh Tab Layout Menggunakan View Pager Android

Salam Sejahtera, berjumpa kembali dalam seri belajar pemrograman Android, kali ini kita masih pembahasan tampian aplikasi, yaitu tentang contoh tab layout menggunakan View Pager aplikasi android. Kita akan mempraktekkan sebuah contoh project menggunaan Android Studio yang menggunakan Tab. Pemahaman kita tentang tampilan Tab, yaitu dalam sebuah aplikasi terdapat ruang yang terpisah. 

Topik Pembahasan Contoh Tab Layout Menggunakan View Pager Android

  • pengenalan Tabs
  • Pembuatan Project Contoh
  • Source Code
  • Video Demo
  • Kesimpulan

Video Demo

Berikut hasil Run Project akhir

Download Source Code

Download Project

Pengenalan Aplikasi Contoh Tab Layout

Awal kita dalam materi contoh tab layout Android. Jika Anda menggunakan aplikasi android terbaru maka kita menyadari bahwa para pengembang aplikasi android kebih banyaj mengikuti pola desain. Desain tampilan menjadi prioritas bagi google selaku pengembang android. Salah satu komponen dari pengembangan desain adalah TabLayout. Sekilas Tampilan Tabs :

contoh tab layout android
contoh tab layout android

Untuk pembahasan materi Contoh Tab Layout Menggunakan View Pager Android, kita akan buat contoh project TablLayout Android. Kita akan coba pelajari tentang cara membuat Tabs dengan mudah. 

Kesimpulan tentang apa itu contoh tab layout android, Yaitu bentuk tampilan yang menyediakan letak Horizontal untuk menampilkan tab. Kita dapat menampilkan lebih layar dalam satu layar menggunakan tab. Pengguna dapat menggesek tab lebih cepat seperti yang pada gambar contoh diatas.

Pembuatan Project Contoh Tabs

Kini kita masuk dalam pembahasan utama tentang contoh tab layout android Menggunakan View Pager Android. Kita buatkan sebuah project menggunakan Android Studio dengan Konfigurasi sebagai berikut :

  • Application Name : App_tabs
  • Min. SDK : API Ice Cream Sandwich
  • Target SDK : API 23
  • Activity Name : Main
  • Layout Name : main

Sekilas gambar pembuatan project:

 

contoh tab layout android
Buat Project Name
contoh tab layout android
Pilihan Layout
contoh tab layout Android
Activity

Tambahkan Design Support Ke Project

kita harus menambahkan design support library melalui dependencies, caranya : Klik Kanan “app” kemudian pilih module settings. Lihat Gambar :

contoh tab layout Android
Module Setting

Kemudian akan tampil seperti berikut, kemudian aktifkan bagian dependecies, kemudian klik tanda “+”, dana akan muncul “Library Dependecies”, Lihat gambar :

contoh tab layout Android
Klik +

Tampilan berikutnya, pilih bagian baris “design” , lihat gambar , kemudian klik OK,

contoh tab layout android
Pilih Library

 

Maka, akan Gradle akan memprosesnya, lihat gambar :

contoh tab layout android
Gradle Process

 

Mudah-mudahan tidak ada kendala sampai tahapan ini. Jika tidak ada error, kalau kita buka “build.gradle” akan ada penambahan baris baru di dalam dependecies ,

contoh tab layout android
Dependecies in Gradle

Pembuatan Layout Untuk Tab Views

Setelah penambahan library design, kini kita akan membuat layout resource untuk tabs. Untuk contoh kita akan buatkan Layout dengan 3 buah Tabs. Caranya, Klik kanan Layout=> Layout Resource File

contoh tab layout android
New Layou

 

Buatkan sebanyak 3 buah Layout dengan cara yang sama, beri nama “tab1″,”tab2” dan “tab3”. Sehingga akan tercipta struktur nya sebagai berikut :

contoh tab layout android
Struktur Class

 

Kemudian, dalam semua tab1.xml, tab2.xml dan tab3.xml, ubah kodenya berikut :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical">

    <TextView 
android:id="@+id/textView" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_centerInParent="true" 
android:text="Ini Tampilan Tab 3" 
android:textAppearance="?android:attr/textAppearanceLarge"/>

</RelativeLayout>

sehingga kini tampilan setiap Layout akan menjadi sebagai berikut :

contoh tab layout android
Tampilan Layout

 

contoh tab layout android
Tabs 2

 

contoh tab layout android
Tampilan Layout

Saya anggap hal tersebut tidak susah untuk dipraktekkan, hanya mengubah kode dalam TextView saja.

Class Java

kini, kita beralih kebagian kode Java. Buatkan 3 buah class Java, beri nama ketiga class tersebut : Tab1.java, Tab2.java dan Tab3.java. Sehingga struktur classs java akan menjadi sebagai berikut:

contoh tab layout android
Class Struktur

 

Tambahkan Fragment

Setelah pembuatan class untuk setiap Tab nya, kini kita ubah source code untuk semua Tab nya. Kita gunakan Fragment (baca : Apa Itu Fragment dan Contoh).  Ubah source code setiap Class Tab1, Tab2 dan Tab3 menjadi :

public class Tab1 extends Fragment {

    //Overriden method onCreateView
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        //Returning the layout file after inflating
        //Change R.layout.tab1 in you classes
        return inflater.inflate(R.layout.tab1, container, false);
    }
}

Tampilan ketiga class Tab akan menjadi sebagai berikut:

contoh tab layout android
Source Code Tab1.java

 

 

contoh tab layout android
Kode Class Tab2
contoh tab layout android
Source Code Tab3

Pembuatan Class Pager Adapter

kita lanjutkan, kini kita buat sebuah class untuk kebutuhab pager adapter untuk model Swipe Views, kalau bisa saya jelaskan untuk hal menggeser setiap Tabs nya. Buat sebuah class beri nama “Pager.java”, kemudian Ubah kode nya menjadi sebagai berikut:

package com.example.ciqwan.app_tab;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

/**
 * Created by windows10 on 29/03/2016.
 */
//Extending FragmentStatePagerAdapter
public class Pager extends FragmentStatePagerAdapter {

    //integer to count number of tabs
    int tabCount;

    //Constructor to the class
    public Pager(FragmentManager fm, int tabCount) {
        super(fm);
        //Initializing tab count
        this.tabCount= tabCount;
    }

    //Overriding method getItem
    @Override
    public Fragment getItem(int position) {
        //Returning the current tabs
        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;
        }
    }

    //Overriden method getCount to get the number of tabs
    @Override
    public int getCount() {
        return tabCount;
    }
}

 

Hapus Actionbar

Satu hal ini jangan lupa, kita harus menghapus acitionbar dan kita gunakan toolbar bawaan. Caranya, masuk ke bagian “Values=> styles.xml” dan ganti app theme menjadi sebagai berikut:

contoh tab layout android
NoActionBar

 

Buatkan TabLayout dan ViewPager

Kini selanjutnya kita buatkan TabLayout, caranya ubah kode layout : main.xml menjadi kodenya sebagai berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
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" 
xmlns:app="http://schemas.android.com/apk/res-auto"
 android:orientation="vertical" 
tools:context="com.example.ciqwan.app_tab.Main">


    <!-- our toolbar -->
    <android.support.v7.widget.Toolbar 
android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:background="?attr/colorPrimary" 
android:minHeight="?attr/actionBarSize" 
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <!-- our tablayout to display tabs -->
    <android.support.design.widget.TabLayout 
android:id="@+id/tabLayout" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:background="?attr/colorPrimary" 
android:minHeight="?attr/actionBarSize" 
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <!-- View pager to swipe views -->
    <android.support.v4.view.ViewPager 
android:id="@+id/pager" 
android:layout_width="match_parent" 
android:layout_height="fill_parent"/>

</LinearLayout>

Tampilan main.xml akan menjadi berikut:

contoh tab layout android
main.xml

 

Ubah Class Main.java

Kini, kita beralih kebahagian Class Main.java, kita akan edit coding nya, pertama edit dan tambahkan kode “implement TabLayout.OnTabSelectedLisntener”. Pada saat kita implements ke “TabLayout.OnTabSelectedListener”, kita akan diminta Override methode, klik saja, lihat gambar:

contoh tab layout android
Override Method

Kini class Main.java akan jadi berikut :

contoh tab layout android
Implements Method

Selanjutnya, dalam Method : OnCreate() tambahkan kode berikut :

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //Adding toolbar to the activity
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        //Initializing the tablayout
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);

        //Adding the tabs using addTab() method
        tabLayout.addTab(tabLayout.newTab().setText("Judul Tab"));
        tabLayout.addTab(tabLayout.newTab().setText("Judul Tab"));
        tabLayout.addTab(tabLayout.newTab().setText("Judul Tab"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        //Initializing viewPager
        viewPager = (ViewPager) findViewById(R.id.pager);

        //Creating our pager adapter
        Pager adapter = new Pager(getSupportFragmentManager(), tabLayout.getTabCount());

        //Adding adapter to pager
        viewPager.setAdapter(adapter);

        //Adding onTabSelectedListener to swipe views
        tabLayout.setOnTabSelectedListener(this);
    }

Untuk lebih jelasnya, class Main.java code lengkapnya adalah sebagai berikut:

package com.example.ciqwan.app_tab;

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 Main extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    //This is our tablayout
    private TabLayout tabLayout;

    //This is our viewPager
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //Adding toolbar to the activity
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        //Initializing the tablayout
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);

        //Adding the tabs using addTab() method
        tabLayout.addTab(tabLayout.newTab().setText("Judul Tab"));
        tabLayout.addTab(tabLayout.newTab().setText("Judul Tab"));
        tabLayout.addTab(tabLayout.newTab().setText("Judul Tab"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        //Initializing viewPager
        viewPager = (ViewPager) findViewById(R.id.pager);

        //Creating our pager adapter
        Pager adapter = new Pager(getSupportFragmentManager(), tabLayout.getTabCount());

        //Adding adapter to pager
        viewPager.setAdapter(adapter);

        //Adding onTabSelectedListener to swipe views
        tabLayout.setOnTabSelectedListener(this);
    }

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

    }

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

    }

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

    }
}



 

Run Project

Tahap akhir dalam materi contoh tab layout android. Selesai untuk tahapan pembuatan Kode nya, coba jalankan aplikasinya, kalau tidak ada kendala akan muncul seperi berikut:

contoh tab layout android
RUn Project

Kesimpulan Contoh Tab Layout Menggunakan View Pager Android

  • Tampilan Tabs dalam aplikasi sering digunakan dalam aplikasi android terbaru dan menjadi fokus pengembang Android
  • Dalam contoh kita buat 3 Tabs, kita bisa buat lebih dari 3
  • semoga dengan adanya materi tentang contoh tab layout bisa membantu

Demikian semoga bermanfaat

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com