Membuat Tab Android dengan Material Design

posted in: Tutorial | 0

Artikel ini kita hanya akan membahas bagaimana cara mengimplementasikan penggunaan tab dengan material design dalam aplikasi yang akan kita buat.

Android Design Support Library mempermudah para pengembang untuk menggunakan fitur material design. Dalam Design support Library beberapa komponen seperti navigation drawer, floating action button, snackbar, tab, floating labels dan animation frameworks sudah termasuk di dalamnya.

Sebelum melangkah terlau jauh, ada baiknya kalian mempelajari dokumentasi resmi tentang apa yang bisa dilakukan dan tidak bisa dilakukan dalam menggunakan tab dengan material design.

A. Membuat Aplikasi Material Design

Kita akan mulai dengan membuat project baru dan mengaplikasikan tema material.

  1. Kita mulai dengan Android Studio, klik File ⇒ New Project kemudian isikan keterangan yang diminta untuk membuat project baru. Jika diminta untuk memilih activity default, pilih Blank Activity.
  2. Buka build.gradle lalu tambahkan android design support library com.android.support:design:27.1.1 atau bisa juga dengan versi terbarunya (jika kalian sudah tahu versinya).
    Kode untuk build.gradle

    dependencies {
        implementation fileTree(dir: 'libs', include: ['*.jar'])
        implementation 'com.android.support:appcompat-v7:27.1.1'
        implementation 'com.android.support:design:27.1.0'
    }
  3. Buka file colors.xml yang berada dalam folder res ⇒ values kemudian tambahkan value berikan sebagai kode warna.
    Kode colors.xml

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimary">#125688</color>
        <color name="colorPrimaryDark">#125688</color>
        <color name="textColorPrimary">#FFFFFF</color>
        <color name="windowBackground">#FFFFFF</color>
        <color name="navigationBarColor">#000000</color>
        <color name="colorAccent">#c8e8ff</color>
    </resources>
  4. Tambahkan dimensi berikut dalam dimens.xml yang ada dalam folder res ⇒ values.
    Kode dimens.xml

    <resources>
        <!-- Default screen margins, per the Android Design guidelines. -->
        <dimen name="activity_horizontal_margin">16dp</dimen>
        <dimen name="activity_vertical_margin">16dp</dimen>
        <dimen name="tab_max_width">264dp</dimen>
        <dimen name="tab_padding_bottom">16dp</dimen>
        <dimen name="tab_label">14sp</dimen>
        <dimen name="custom_tab_layout_height">72dp</dimen>
    </resources>
    
    
  5. Buka file styles.xml yang ada dalam folder res ⇒ values kemudian tambahkan style berikut. Style yang terdefinisikan dalam styles.xml akan berlaku untuk semua versi android.
    Kode styles.xml

    <resources>
     
        <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
     
        </style>
     
        <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
            <item name="windowNoTitle">true</item>
            <item name="windowActionBar">false</item>
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>
     
    </resources>
  6. Sekarang dalam folder res, buat folder baru dengan nama values-v21. Kemudian dalam values-v21, buat file styles.xml dengan kode style berikut. Kode style ini dikhususkan untuk Android 5.0.
    Kode styles.xml dalam folder values-v21

    <resources>
     
        <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
            <item name="android:windowContentTransitions">true</item>
            <item name="android:windowAllowEnterTransitionOverlap">true</item>
            <item name="android:windowAllowReturnTransitionOverlap">true</item>
            <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
            <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
        </style>
     
    </resources>
  7. Lanjuuuut… buka AndroidManifest.xml dan modifikasi theme aplikasi dengan mengubah atribut android:theme.
    android:theme="@style/MyMaterialTheme"

    Kode untuk AndroidManifest.xml

    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="info.androidhive.materialtabs" >
     
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/MyMaterialTheme" >
            <activity
                android:name=".activity.MainActivity"
                android:label="@string/app_name" >
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
     
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    </manifest>

    Sekarang coba jalankan aplikasi kalian dan cek keberadaan theme material dengan melihat warna notification bar. Jika kalian melihat warna notification bar color berubah, artinya theme material design sudah berhasil diterapkan.
    tampilan hello world
    Sekarang kita sudah memiliki aplikasi dengan material design. Selanjutnya yang perlu kita lakukan adalah menambahkan tab. Sebelum itu, kita akan membuat beberapa fragment activity. Seluruh fragment activity tersebut akan memuat UI sederhana untuk satu TextView.

  8. Dalam package utama, buatlah sebuah fragment yang bernama OneFragment.java kemudian tambahkan kode berikut.
    Kode OneFragment.java

    package info.androidhive.materialtabs.fragments;
     
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
     
    import info.androidhive.materialtabs.R;
     
     
    public class OneFragment extends Fragment{
     
        public OneFragment() {
            // Required empty public constructor
        }
     
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
     
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            return inflater.inflate(R.layout.fragment_one, container, false);
        }
     
    }
  9. Buka fragment_one.xml yang berada di res ⇒ layout dan ubah kodenya seperti berikut.
    Kode fragment_one.xml

    <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"
        tools:context="info.androidhive.materialtabs.fragments.OneFragment">
     
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/one"
            android:textSize="40dp"
            android:textStyle="bold"
            android:layout_centerInParent="true"/>
     
    </RelativeLayout>
  10. Kemudian buatlah beberapa activity fragment dengan kode yang sama saat membuat OneFragment.java. Saya sudah membuat TwoFragment.java, ThreeFragment.java, FourFragment.java ….. hingga TenFragment.java

2. Fixed Tabs

Tab yang dimaksud di sini adalah tab yang posisinya sudah fix alias tidak bisa diubah. Android design support library memiliki beberapa element seperti CoordinatorLayout, AppBarLayout, TabLayout, dan lebih banyak lagi. Namun, dalam artikel ini kita hanya akan membahas TabLayout saja.

  1. Buka file layout dari activvity utama (activity_main.xml) lalu tambahkan kode berikut.
    app:tabMode – Menjelaskan mode dari layout tab. Dalam hal ini, kita menggunakan “fixed”
    Kode untuk activity_main.xml

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
     
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
     
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
     
            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="fixed"
                app:tabGravity="fill"/>
        </android.support.design.widget.AppBarLayout>
     
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"  />
    </android.support.design.widget.CoordinatorLayout>
  2. Buka MainActivity.java dan berikan perubahan berikut.
    tabLayout.setupWithViewPager() – Menjadikan ViewPager ke TabLayout.
    setupViewPager() – Mendefinisikan nomor tab dengan mengatur fragment tab yang sesuai dengan nama tab.
    ViewPagerAdapter – Custom adapter class untuk keperluan fragment dalam view pager.Kode untuk MainActivity.java

    package info.androidhive.materialtabs.activity;
     
    import android.os.Bundle;
    import android.support.design.widget.TabLayout;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
     
    import java.util.ArrayList;
    import java.util.List;
     
    import info.androidhive.materialtabs.R;
    import info.androidhive.materialtabs.fragments.OneFragment;
    import info.androidhive.materialtabs.fragments.ThreeFragment;
    import info.androidhive.materialtabs.fragments.TwoFragment;
     
    public class MainActivity extends AppCompatActivity {
     
        private Toolbar toolbar;
        private TabLayout tabLayout;
        private ViewPager viewPager;
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
     
            toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
     
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
     
            viewPager = (ViewPager) findViewById(R.id.viewpager);
            setupViewPager(viewPager);
     
            tabLayout = (TabLayout) findViewById(R.id.tabs);
            tabLayout.setupWithViewPager(viewPager);
        }
     
        private void setupViewPager(ViewPager viewPager) {
            ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
            adapter.addFragment(new OneFragment(), "ONE");
            adapter.addFragment(new TwoFragment(), "TWO");
            adapter.addFragment(new ThreeFragment(), "THREE");
            viewPager.setAdapter(adapter);
        }
     
        class ViewPagerAdapter extends FragmentPagerAdapter {
            private final List<Fragment> mFragmentList = new ArrayList<>();
            private final List<String> mFragmentTitleList = new ArrayList<>();
     
            public ViewPagerAdapter(FragmentManager manager) {
                super(manager);
            }
     
            @Override
            public Fragment getItem(int position) {
                return mFragmentList.get(position);
            }
     
            @Override
            public int getCount() {
                return mFragmentList.size();
            }
     
            public void addFragment(Fragment fragment, String title) {
                mFragmentList.add(fragment);
                mFragmentTitleList.add(title);
            }
     
            @Override
            public CharSequence getPageTitle(int position) {
                return mFragmentTitleList.get(position);
            }
        }
    }

    Sekarang coba jalankan aplikasi kalian. Harusnya sudah terlihat tab yang bisa di-swipe ya.
    tab layout dengan material design

2.1 Full Width Tabs

Jika kalian menginginkan tab dengan tampilan fullwidth, tambahkan app:tabGravity=”fill” ke TabLayout kalian.

tab layout dalam landscape

2.2 Center Aligned Tabs

Beda lagi jika kalian ingin tab tetap di tengah secara horisontal, cukup dengan menambahkan app:tabGravity=”center” ke TabLayout.

gravity center tab layout

3. Scrollable Tab

Scrollable tab (tab yang dapat di-scroll) digunakan saat kalian mempunyai banyak tab sehingga tidak muat dalam tampilan layar. Pernah lihat aplikasi yang demikian kan? Nah, untuk membuatnya, tambahkan saja kode app:tabMode=”scrollable” ke TabLayout.

  1. Untuk membuat scrollable tab, buka activity_main.xml kemudian ubah app:tabMode menjadi scrollable.
    <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="scrollable"/>
  2. Kemudian lakukan pengeditan pada MainActivity.java dan tambahkan fragment ke ViewPager dalam method setupViewPager(). Di sini saya memiliki toal 10 fragment ke ViewPager. Setelah diedit, tampilan kode activity utama kalian akan seperti berikut.
    Kode MainActivity.java

    package info.androidhive.materialtabs.activity;
     
    import android.os.Bundle;
    import android.support.design.widget.TabLayout;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
     
    import java.util.ArrayList;
    import java.util.List;
     
    public class MainActivity extends AppCompatActivity {
     
        private Toolbar toolbar;
        private TabLayout tabLayout;
        private ViewPager viewPager;
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
     
            toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
     
            viewPager = (ViewPager) findViewById(R.id.viewpager);
            setupViewPager(viewPager);
     
            tabLayout = (TabLayout) findViewById(R.id.tabs);
            tabLayout.setupWithViewPager(viewPager);
        }
     
        private void setupViewPager(ViewPager viewPager) {
            ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
            adapter.addFrag(new OneFragment(), "ONE");
            adapter.addFrag(new TwoFragment(), "TWO");
            adapter.addFrag(new ThreeFragment(), "THREE");
            adapter.addFrag(new FourFragment(), "FOUR");
            adapter.addFrag(new FiveFragment(), "FIVE");
            adapter.addFrag(new SixFragment(), "SIX");
            adapter.addFrag(new SevenFragment(), "SEVEN");
            adapter.addFrag(new EightFragment(), "EIGHT");
            adapter.addFrag(new NineFragment(), "NINE");
            adapter.addFrag(new TenFragment(), "TEN");
            viewPager.setAdapter(adapter);
        }
     
        class ViewPagerAdapter extends FragmentPagerAdapter {
            private final List<Fragment> mFragmentList = new ArrayList<>();
            private final List<String> mFragmentTitleList = new ArrayList<>();
     
            public ViewPagerAdapter(FragmentManager manager) {
                super(manager);
            }
     
            @Override
            public Fragment getItem(int position) {
                return mFragmentList.get(position);
            }
     
            @Override
            public int getCount() {
                return mFragmentList.size();
            }
     
            public void addFrag(Fragment fragment, String title) {
                mFragmentList.add(fragment);
                mFragmentTitleList.add(title);
            }
     
            @Override
            public CharSequence getPageTitle(int position) {
                return mFragmentTitleList.get(position);
            }
        }
    }

    Sekarang coba tes aplikasi kalian. Apakah sudah bisa di-scroll tabnya sekarang?
    Tab layout mode scrollable Tab layout mode scrollable dalam landscape

 

4. Tab dengan Ikon dan Teks

Kadang mungkin kalian ingin menambahkan ikon ke dalam tab. Sometimes you might wanted to add an icon to Tab. Dulu, menambahkan ikon ke dalam tab butuh waktu yang lama dan sangat membosankan. Namun, sekarang dengan design support library, hal tersebut menjadi sangat mudah. Yang perlu kalian lakukan hanyalah memanggil setIcon() method untuk ikon yang sesuai. Ikon akan berada di depan label tab secara sempurna.

tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
  1. Cara untuk membuatnya adalah buka MainActivity.java dan modifikasi kodenya seperti berikut. Di sini saya sudah menambahkan method yang bernama setupTabIcons() yang sudah saya terapkan ke semua ikon tab.
    Kode MainActivity.java dengan ikon

    import android.os.Bundle;
    import android.support.design.widget.TabLayout;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
     
    import java.util.ArrayList;
    import java.util.List;
     
    public class MainActivity extends AppCompatActivity {
     
        private Toolbar toolbar;
        private TabLayout tabLayout;
        private ViewPager viewPager;
        private int[] tabIcons = {
                R.drawable.ic_tab_favourite,
                R.drawable.ic_tab_call,
                R.drawable.ic_tab_contacts
        };
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
     
            toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
     
            viewPager = (ViewPager) findViewById(R.id.viewpager);
            setupViewPager(viewPager);
     
            tabLayout = (TabLayout) findViewById(R.id.tabs);
            tabLayout.setupWithViewPager(viewPager);
            setupTabIcons();
        }
     
        private void setupTabIcons() {
            tabLayout.getTabAt(0).setIcon(tabIcons[0]);
            tabLayout.getTabAt(1).setIcon(tabIcons[1]);
            tabLayout.getTabAt(2).setIcon(tabIcons[2]);
        }
     
        private void setupViewPager(ViewPager viewPager) {
            ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
            adapter.addFrag(new OneFragment(), "ONE");
            adapter.addFrag(new TwoFragment(), "TWO");
            adapter.addFrag(new ThreeFragment(), "THREE");
            viewPager.setAdapter(adapter);
        }
     
        class ViewPagerAdapter extends FragmentPagerAdapter {
            private final List<Fragment> mFragmentList = new ArrayList<>();
            private final List<String> mFragmentTitleList = new ArrayList<>();
     
            public ViewPagerAdapter(FragmentManager manager) {
                super(manager);
            }
     
            @Override
            public Fragment getItem(int position) {
                return mFragmentList.get(position);
            }
     
            @Override
            public int getCount() {
                return mFragmentList.size();
            }
     
            public void addFrag(Fragment fragment, String title) {
                mFragmentList.add(fragment);
                mFragmentTitleList.add(title);
            }
     
            @Override
            public CharSequence getPageTitle(int position) {
                return mFragmentTitleList.get(position);
            }
        }
    }

tab layout dengan ikon

5. Tab Hanya dengan Ikon

Pengaturan tab yang hanya dengan ikon (tanpa teks) dilakukan dengan mengesampingkan method getPageTitle() dalam class ViewPagerAdapter sehingga tidak berlaku dalam tab.

  1. Buka MainActivity.java kemudian modifikasi getPageTitle() seperti berikut dan coba jalankan project kalian.
    @Override
    public CharSequence getPageTitle(int position) {
     
        // return null to display only the icon
        return null;
    }

    tab layout ikon saja

6. Kustom Tab View dengan Icon & Text

Pengaturan tampilan tab secara kustom akan sangat berguna saat kalian tidak menemukan kecocokan tampilan sesuai dengan yang kalian inginkan. Saat meng-kustom tampilan tab, pastikan kalian juga mengikuti acuan yang disediakan untuk android.

Misalkan dalam hal ini kalian ingin membuat tab dengan ikon di atas label teks pada tab. Masih semangat kan ya? Haha…Berikut langkah-langkah pembuatannya.

  1. Dalam folder res ⇒ values, buat sebuah file xml kemudian berikan nama fonts.xml lalu tambahkan string berikut. File xml ini akan mendefinisikan jenis font untuk label teks tab kalian.
    Kode untuk fonts.xml

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string name="font_fontFamily_medium">sans-serif</string>
    </resources>
  2. Dalam folder res ⇒ values-v21, buat file xml lagi dan berikan nama fonts.xml.
    Kode untuk fonts.xml dalam folder values-v21

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string name="font_fontFamily_medium">sans-serif-medium</string>
    </resources>
  3. Kemudian buka activity_main.xml dan atur height dari TabLayout. Pengaturan height ini akan penting untuk penempatan ikon di atas label teks tab kalian nantinya.
    <android.support.design.widget.TabLayout
               android:id="@+id/tabs"
               android:layout_width="match_parent"
               android:layout_height="@dimen/custom_tab_layout_height"
               app:tabMode="fixed"
               app:tabGravity="fill"/>
  4. Buat sebuah file layout xml layout dan berikan nama custom_tab.xml, letakkan dalam folder res ⇒ layout. Dalam file layout ini kita akan mendefinisikan tampilan kustom untuk tab.
    Kode untuk custom_tab.xml

    <?xml version="1.0" encoding="utf-8"?>
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tab"
        android:textColor="@color/colorAccent"
        android:textSize="@dimen/tab_label"
        android:fontFamily="@string/font_fontFamily_medium"/>
  5. Buka MainActivity.java dan modifikasi kodenya seperti berikut. Jika kalian mengamati method setupTabIcons(), di sini saya telah mengubah layout custom_tab.xml dalam masing-masing tab dengan menggunakan kode ini.
    TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabOne.setText("ONE");
    tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_favourite, 0, 0);
    tabLayout.getTabAt(0).setCustomView(tabOne);

    Nah, berikut ini kode lengkap untuk MainActivity.java

    import android.os.Bundle;
    import android.support.design.widget.TabLayout;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import android.view.LayoutInflater;
    import android.widget.TextView;
     
    import java.util.ArrayList;
    import java.util.List;
     
    import info.androidhive.materialtabs.R;
    import info.androidhive.materialtabs.fragments.OneFragment;
    import info.androidhive.materialtabs.fragments.ThreeFragment;
    import info.androidhive.materialtabs.fragments.TwoFragment;
     
    public class MainActivity extends AppCompatActivity {
     
        private Toolbar toolbar;
        private TabLayout tabLayout;
        private ViewPager viewPager;
        private int[] tabIcons = {
                R.drawable.ic_tab_favourite,
                R.drawable.ic_tab_call,
                R.drawable.ic_tab_contacts
        };
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
     
            toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
     
            viewPager = (ViewPager) findViewById(R.id.viewpager);
            setupViewPager(viewPager);
     
            tabLayout = (TabLayout) findViewById(R.id.tabs);
            tabLayout.setupWithViewPager(viewPager);
            setupTabIcons();
        }
     
        private void setupTabIcons() {
     
            TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
            tabOne.setText("ONE");
            tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_favourite, 0, 0);
            tabLayout.getTabAt(0).setCustomView(tabOne);
     
            TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
            tabTwo.setText("TWO");
            tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_call, 0, 0);
            tabLayout.getTabAt(1).setCustomView(tabTwo);
     
            TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
            tabThree.setText("THREE");
            tabThree.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_contacts, 0, 0);
            tabLayout.getTabAt(2).setCustomView(tabThree);
        }
     
        private void setupViewPager(ViewPager viewPager) {
            ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
            adapter.addFrag(new OneFragment(), "ONE");
            adapter.addFrag(new TwoFragment(), "TWO");
            adapter.addFrag(new ThreeFragment(), "THREE");
            viewPager.setAdapter(adapter);
        }
     
        class ViewPagerAdapter extends FragmentPagerAdapter {
            private final List<Fragment> mFragmentList = new ArrayList<>();
            private final List<String> mFragmentTitleList = new ArrayList<>();
     
            public ViewPagerAdapter(FragmentManager manager) {
                super(manager);
            }
     
            @Override
            public Fragment getItem(int position) {
                return mFragmentList.get(position);
            }
     
            @Override
            public int getCount() {
                return mFragmentList.size();
            }
     
            public void addFrag(Fragment fragment, String title) {
                mFragmentList.add(fragment);
                mFragmentTitleList.add(title);
            }
     
            @Override
            public CharSequence getPageTitle(int position) {
                return mFragmentTitleList.get(position);
            }
        }
    }

Sekarang coba jalankan aplikasi kalian dan lihat perubahannya.
tab layout dengan custom

Berikut kode lengkapnya yang bisa membantu kalian. Walaupun sudah saya sediakan, tapi jangan lupa dipelajari dari awal ya biar kalian gak cuma menjadi kaum pengunduh tanpa tahu awal dan akhirnya haha.
Download Material Tabs

Okeh, semoga artikel ini membantu. Saya juga udah capek ngetiknya wkwk. For the last word, jika ada yang bingung silahkan berkomentar di bawah ini ya biar gak semakin bingung. Selamat belajar 🙂

Muhammad Faizin
Follow Faizin:

Writer and Developer

Dulu suka menulis kode dan sejenisnya sampe malem, sekarang juga masih. Kesukaan pada menulis cerita sedikit demi sedikit terpupuk, apalagi sebagai mantan anak sekolahan dengan cita-cita kuliah di luar negeri.