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.
Post a Comment