Tutorial Android : Swipe Tabs Using Design Support Library.

Hii sore guys, gue pengen share and ini pertama kalinya gue nulis artikel tutorial :D, semoga mudah dibaca and bisa dipahamin buat yang lagi belajar android. berhubung gue juga lagi bikin apps, jadi gue pengen step by step'nya gue tulis disini. soalnya kadang gue juga masih sering lupa apa yang udah pernah gue buat.

Yap gue pengen coba bikin Swipe Tabs menggunakan Design Support Libary yang disediakan oleh bawaan android.  Oke, langsung aja bikin project baru di android studio, File > New > New Project trus di sesuaikan deh nama packages dan pilih template Blank Activity kalo dikasih pilihan.

1. Buka file build.gradle and tambahin dependencies seperti kode dibawah.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.3.0'

}

2. Kalo udah punya file MainActivity.java silahkan dibuka dan klo belum ada silahkan dibuat dan copy & paste kode dibawah :

package com.bye.project;

/**
 * Created by webster on 11/7/16.
 */
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    FragmentManager mFragmentManager;
    FragmentTransaction mFragmentTransaction;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); // Penjelasan Di No : 3

        mFragmentManager = getSupportFragmentManager();
        mFragmentTransaction = mFragmentManager.beginTransaction();
        mFragmentTransaction.replace(R.id.containerView, new TabFragment()).commit();

    }
}

3. Dan berikutnya kalo udah punya file activity_main.xml silahkan dibuka dan klo belum ada silahkan dibuat dan copy & paste code dibawah :

<LinearLayout
    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:fitsSystemWindows='true'
    android:orientation='vertical'>

    <FrameLayout
        android:orientation='vertical'
        android:layout_width='match_parent'
        android:layout_height='match_parent'
        android:id='@+id/containerView'>
    </FrameLayout>
</LinearLayout>

4. Okey, sekarang kita masuk ke pembuatan class TabFragment.java dimana file ini yang akan menentukan tampilan pada tablayout. sekarang coba lo buat file TabFragment.java dan isi dengan kode seperti dibawah ini :

package com.bye.project;

/**
 * Created by webster on 11/7/16.
 */
import android.os.Bundle;
import android.support.annotation.Nullable;
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.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class TabFragment extends Fragment {

    public static TabLayout tabLayout;
    public static ViewPager viewPager;
    public static int int_items = 3 ;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        /**
         *Inflate tab_layout and setup Views.
         */
        View x =  inflater.inflate(R.layout.tab_layout,null);
        tabLayout = (TabLayout) x.findViewById(R.id.tabs);
        viewPager = (ViewPager) x.findViewById(R.id.viewpager);

        /**
         *Set an Apater for the View Pager
         */
        viewPager.setAdapter(new MyAdapter(getChildFragmentManager()));

        /**
         * Now , this is a workaround ,
         * The setupWithViewPager dose't works without the runnable .
         * Maybe a Support Library Bug .
         */

        tabLayout.post(new Runnable() {
            @Override
            public void run() {
                tabLayout.setupWithViewPager(viewPager);
            }
        });

        return x;

    }

    class MyAdapter extends FragmentPagerAdapter{

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        /**
         * Return fragment with respect to Position .
         */

        @Override
        public Fragment getItem(int position)
        {
            switch (position){
                case 0 : return new FirstFragment();
                case 1 : return new SecondFragment();
                case 2 : return new ThirdFragment();
            }
            return null;
        }

        @Override
        public int getCount() {

            return int_items;

        }

        /**
         * This method returns the title of the tab according to the position.
         */

        @Override
        public CharSequence getPageTitle(int position) {

            switch (position){
                case 0 :
                    return "1 Fragment";
                case 1 :
                    return "2 Fragment";
                case 2 :
                    return "3 Fragment";
            }
            return null;
        }
    }

}

5.  Setelah membuat class TabFragment.java , pasti ada error di line ini case 0 : return new FirstFragment();  nah ini berarti class bernama FirstFragment.java belum dibuat / tidak ditemukan. dan sekarang lo coba bikin satu class lagi namanya FirstFragment.java dan copy & paster kode dibawah :

package com.bye.project;

/**
 * Created by webster on 11/7/16.
 */
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;


public class FirstFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.first_layout,null);
    }
}

6. Nah di dalam class FirstFragment.java membutuhkan layout file bernama first_layout.xml, mari kita buat aja langsung, copy & paste aja kode dibawah :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:textSize="30sp"
        android:gravity="center"
        android:id="@+id/textView"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/holo_blue_dark"
        android:text="First Fragment"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:autoLink="web"
        android:textSize="15sp"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        android:text="http://bye-webster.blogspot.com"
        android:textColor="#000"
        android:layout_below="@+id/textView"
        android:textStyle="italic"/>
</RelativeLayout>

7. Naahhhh yang diatas tadi kan kita udah bikin class yang namanya FirstFragment.java, coba di bikin 2 lagi dengan nama SecondFragment.java dan ThirdFragment.java buat melengkapi kebutuhan yang error di dalem class TabFragment.java , berikut juga layout file dengan nama second_layout.xml dan third_layout.xml .

Preview All Of It :

Okeh mari kita sudahi saja perbincangan kali ini, semoga mudah dipahami dan dimengerti, dan jangan lupa kabarin kalo jalan :D . Klo ada yang kurang jelas bisa ditanyakan di komentar yang ada dibawah, sampai ketemu lagi dalem episode selanjutnya, dan salam olahraga.