[ANDROID] Membuat Material Sliding Tab
Selamat siang para developer kali ini kita akan membahas tab sliding seperti aplikasi whatsapp karena ada yang request dari facebook.
Oke langsung saja, pertama kita buat project baru lalu import repository design pada build.gradle kita. Perlu diingat versi yang di import harus sesuai dengan yang ada di SDK teman-teman.
Contoh gambar dibawah ini, yang saya block adalah versi dari SDK teman-teman.
Jika sudah sekarang kita buat layoutnya terlebih dahulu. Kita buka activity_main.xml lalu buat seperti berikut :
Kita buat 3 fragment untuk di tampilkan pada viewpager dengan cara sperti gambar dibawah :
Jika frgament sudah dibuat, sekarang kita buat adapternya seperti berikut :
Lalu masukan codingan seperti ini :
Sekarang kita ke MainActivity.java
Jika sudah kita Run projectnya, Maka hasilnya seperti berikut :
Cukup sekian tutorial singkatnya, Semoga bermanfaat.
Oke langsung saja, pertama kita buat project baru lalu import repository design pada build.gradle kita. Perlu diingat versi yang di import harus sesuai dengan yang ada di SDK teman-teman.
Contoh gambar dibawah ini, yang saya block adalah versi dari SDK teman-teman.
compile 'com.android.support:design:VERSI REPO'
Jika sudah sekarang kita buat layoutnya terlebih dahulu. Kita buka activity_main.xml lalu buat seperti 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.panduseptian.slidingtab.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/slide"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:tabGravity="fill"
app:tabMode="fixed">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>
Kita buat 3 fragment untuk di tampilkan pada viewpager dengan cara sperti gambar dibawah :
Lalu masukan codingan seperti ini :
package com.panduseptian.slidingtab;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
/**
* Created by pandu on 29/11/16.
*/
public class PagerAdapter extends FragmentPagerAdapter {
public PagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new CallsFragment();
case 1:
return new ChatsFragment();
case 2:
return new ContactsFragment();
}
return null;
}
@Override
public int getCount() {
return 3;
}
@Override
public CharSequence getPageTitle(int position) {
switch (position){
case 0:
return "Calls";
case 1:
return "Chats";
case 2:
return "Contacts";
}
return super.getPageTitle(position);
}
}
Sekarang kita ke MainActivity.java
package com.panduseptian.slidingtab;
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 ViewPager viewPager;
private PagerAdapter adapter;
private TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().setElevation(0);
viewPager = (ViewPager) findViewById(R.id.pager);
adapter = new PagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
tabLayout = (TabLayout) findViewById(R.id.slide);
tabLayout.addTab(tabLayout.newTab().setText("Calls"));
tabLayout.addTab(tabLayout.newTab().setText("Chats"));
tabLayout.addTab(tabLayout.newTab().setText("Contacts"));
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setupWithViewPager(viewPager);
}
}
Jika sudah kita Run projectnya, Maka hasilnya seperti berikut :
Cukup sekian tutorial singkatnya, Semoga bermanfaat.
