[MATERIAL DESIGN] Membuat Tab Dengan Design Support Library

Material Design, Design UI yang tidak asing lagi kedengarannya, terutama bagi anda yang berkutat di dunia pengembangan aplikasi Android. Pada Google I/O 2015 yang sudah berlalu, Google merilis library baru yaitu Design Support Library. Dan pada tutorial kali ini saya akan berbagi salah satu user interface yang menggunakan Design Support Library yaitu TabLayout. Pada tutorial ini saya akan berbagi langkah-langkah membuat aplikasi dengan interface tab seperti terlihat pada gambar dibawah ini :

Material Design UI Tab

Download Source Code

Langkah-langkah membuat tab dengan Design Support Library

1. Buat project baru di Android Studio anda
2. Tambahkan Design Library berikut pada build.gradle(Module: app)
compile 'com.android.support:design:22.2.0'
3. Edit file activity_main.xml menjadi seperti berikut :
<RelativeLayout android:id="@+id/main_layout" 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" tools:context=".MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:background="?attr/colorPrimary" android:elevation="6dp" android:minHeight="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/toolbar" android:background="?attr/colorPrimary" android:elevation="6dp" android:minHeight="?attr/actionBarSize" app:tabMode="scrollable" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="fill_parent" android:layout_below="@id/tab_layout"/> </RelativeLayout>
4. Buat layout baru sebagai fragment. Sebagai contoh, saya membuat layout tab1_fragment.xml dengan class java Tab1Fragment.java.
• Code tab1_fragment.xml 
<?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"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="@string/tab1" android:textAppearance="?android:textAppearanceLarge" android:textStyle="bold" /> </RelativeLayout>
• Code Tab1Fragment.java
package com.linuxermadura.tabsexample; 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 berri on 07/07/15. */ public class Tab1Fragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.tab1_fragment, container, false); return v; } }
Silahkan buat beberapa layout lagi seperti contoh diatas. Dalam tutorial ini saya membuat sebanyak 6 layout fragment.


Buat 1 class baru dengan nama TabPagerAdapter.java. Lalu ketikan kode berikut :
package com.linuxermadura.tabsexample; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; /** * Created by berri on 07/07/15. */ public class TabPagerAdapter extends FragmentStatePagerAdapter { int mNumOfTabs; public TabPagerAdapter(FragmentManager fm, int NumOfTabs) { super(fm); this.mNumOfTabs = NumOfTabs; } @Override public Fragment getItem(int position) { switch (position) { case 0 : Tab1Fragment tab1 = new Tab1Fragment(); return tab1; case 1 : Tab2Fragment tab2 = new Tab2Fragment(); return tab2; case 2 : Tab3Fragment tab3 = new Tab3Fragment(); return tab3; case 3 : Tab4Fragment tab4 = new Tab4Fragment(); return tab4; case 4 : Tab5Fragment tab5 = new Tab5Fragment(); return tab5; case 5 : Tab6Fragment tab6 = new Tab6Fragment(); return tab6; default: return null; } } @Override public int getCount() { return mNumOfTabs; } }
Edit file MainActivity.java menjadi seperti berikut :
package com.linuxermadura.tabsexample; 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 = (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("Material Tab"); setSupportActionBar(toolbar); TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); tabLayout.addTab(tabLayout.newTab().setText("TAB 1")); tabLayout.addTab(tabLayout.newTab().setText("TAB 2")); tabLayout.addTab(tabLayout.newTab().setText("TAB 3")); tabLayout.addTab(tabLayout.newTab().setText("TAB 4")); tabLayout.addTab(tabLayout.newTab().setText("TAB 5")); tabLayout.addTab(tabLayout.newTab().setText("TAB 6")); final ViewPager viewPager = (ViewPager) findViewById(R.id.pager); final TabPagerAdapter adapter = new TabPagerAdapter(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) { } }); } }
Selanjutnya silahkan jalankan project anda. Jika berhasil, maka anda akan tampilan seperti pada gambar diatas. Tutorial Membuat Tab Dengan Design Support Library merupakan salah satu dari penggunaan Design Support Library. Lain kali saya akan memposting tutorial yang lain. Jadi, Silahkan tunggu updatenya di LinuxerMadura.com


Sumber :
Android Developer Blog
Medium.com
http://blog.grafixartist.com/material-design-tabs-with-android-design-support-library/