SlidingViewPager Android Example

Assalamualaikum wr.wb.

Apa kabar teman - teman disini saya akan membagikan tutorial untuk membuat view pager. Nah sebelum kita praktek ngoding ada baiknya kita tau apa itu view pager dan apa gunanya, view pager itu adalah suatu layout yang bisa digeser kekana atau kekiri. Nah kira - kira begitulah kurang lebihnya untuk lebih jelasnya nanti bisa buka situs resminya disini. View pager bisa kita gunakan sebagai salah satu cara untuk mengatasi activity yang mempunyai banyak konten.

Ok mungkin cukup penjelasan view pagernya sekarang kita next lanjut ke praktek. Silahkan teman - teman buat sebuah project baru dan beri nama sesuai dengan SlidingViewPager. Kemudian buat activity launchernya biasanya saat kita membuat project baru akan secara otomatis tergenerate mainactivity sebagai aactivity launchernya.

Sekarang kita buat file di res/activity_main.xml seperti ini

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical" >

    <com.ocit.SlideTabPager
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:pstsShouldExpand="true"
        app:pstsTextAllCaps="true" >
    </com.ocit.SlideTabPager>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white" />

</LinearLayout>

Selanjutnya buat buat layout fragment page seperti berikut

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Fragment #X" />

</LinearLayout>

Kemudian kita buat class page adapter view pager beri nama PagerAdapter


import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class PagerAdapter extends FragmentPagerAdapter {
final int PAGE_COUNT = 3;
private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" };

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

@Override
public int getCount() {
return PAGE_COUNT;
}

@Override
public Fragment getItem(int position) {
return PageFragment.newInstance(position + 1);
}

@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
return tabTitles[position];
}
}

Setelah itu buat class PageFragment


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class PageFragment extends Fragment {
    public static final String ARG_PAGE = "ARG_PAGE";

    private int mPage;

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    // Inflate the fragment layout we defined above for this fragment
    // Set the associated text for the title
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        TextView tvTitle = (TextView) view.findViewById(R.id.tvTitle);
        tvTitle.setText("Fragment #" + mPage);
        return view;
    }
}

Kemudian berikut untuk MainActivity


import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

import com.ocit.SlideTabPager;

public class MainActivity extends FragmentActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Untuk menampilkan view pager
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new PagerAdapter(
getSupportFragmentManager()));

// Untuk memberikan tab pager
SlideTabPager tabsStrip = (SlideTabPager) findViewById(R.id.tabs);
tabsStrip.setViewPager(viewPager);
}

}