Contents

Assalamu'alaikum Wr. Wb

Apa Itu ViewPager

ViewPager merupakan kumpulan dari beberapa halaman dengan pergeseran untuk berpindah dari halaman satu ke halaman 2

Disini kita akan membuat ViewPager sederhana dengan menggunakan aplikasi AIDE - IDE for android. Kita akan membuat 2 halaman.
Langsung saja kita menuju ke tutornya...

Cara Membuat ViewPager di Aide

1. Buatlah Sebuah Project

Buatlah sebuah project dengan nama seperti di bawah ini untuk menyesuaikan dengan tutor

Nama: ViewPager
Package: com.trikkeren.viewpager

2. Library

Disini kita membutuhkan 2 library yaitu:

com.android.support:appcompat-v7:+
com.android.support:support-v4:+

Jika kamu belum download library kamu harus download dulu biar library bisa di pake, untuk download kamu membutuhkan kuota 1gb atau lebih dan internet cepat.

3. Mengatur Style

Buka res/values/styles.xml ubah

@android:style/Theme.Holo.Light

Menjadi

Theme.AppCompat.Light.NoActionBar

Atau seperti di bawah ini

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
</resources>

4. Mengatur Layout

Buka res/layout kamu buat lah 3 layout untuk di jadikan halaman lalu beri nama seperti di bawah ini:

halaman_1.xml
halaman_2.xml

Disitukan ada 4 layout, kamu buka semua 4 layout tersebut

Edit main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
‎
<android.support.v7.widget.Toolbar
android:layout_height="?android:attr/actionBarSize"
android:layout_width="match_parent"
android:id="@+id/toolbar"/>

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

</LinearLayout>

Edit halaman_1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
‎
<TextView
android:layout_height="match_parent"
android:text="halaman 1"
android:layout_width="match_parent"
android:gravity="center"
android:padding="10dp"
android:textSize="30sp"/>

</LinearLayout>

Edit halaman_2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
‎
<TextView
android:layout_height="match_parent"
android:text="halaman 2"
android:layout_width="match_parent"
android:gravity="center"
android:padding="10dp"
android:textSize="30sp"/>

</LinearLayout>

Sesudah mengatur layout langsung saja kita mengatur javanya

5. Mengatur Java

Buat lah 2 java dengan nama:

page_1.java
page_2.java

Buka semua java nya

Edit MainActivity.java

package com.trikkeren.viewpager;

import android.support.v4.view.*;
import android.support.v7.app.*;
import android.os.*;
import android.support.v7.widget.Toolbar;
import android.support.v4.view.*;
import android.widget.*;
import android.support.v4.app.*;

public class MainActivity extends AppCompatActivity 
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

FragmentManager fm=getSupportFragmentManager();
Adapternya adapter=new Adapternya(fm);
ViewPager pager=(ViewPager)findViewById(R.id.viewpager);
pager.setAdapter(adapter);

}
public class Adapternya extends FragmentPagerAdapter
{
public Adapternya(FragmentManager fm){
super(fm);
}
@Override
public int getCount()
{

return 2;
}

@Override
public Fragment getItem(int posisi)
{

if(posisi==0){
return new page_1();
}
else{
return new page_2();
}
}
}
}

Edit page_1.java

package com.trikkeren.viewpager;

import android.support.v4.app.*;
import android.os.*;
import android.view.*;

public class page_1 extends Fragment
{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{

View lihat=inflater.inflate(R.layout.halaman_1,container,false);
return lihat;
}

}

Edit page_2.java

package com.trikkeren.viewpager;

import android.support.v4.app.*;
import android.os.*;
import android.view.*;

public class page_2 extends Fragment
{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{

View lihat=inflater.inflate(R.layout.halaman_2,container,false);
return lihat; }

}

Kalo sudah semuanya kita tinggal pencet RUN dan nanti hasilnya akan seperti gambar di bawah ini

Result

Untuk mengubah halaman, Kamu tinggal menggesernya saja

Sekian dulu tutornya jika masih belum ngerti silahkan berkomentar dengan sopan :)

Nantikan tutorial menarik selanjutnya.
Wassalamu'alaikum Wr. Wb

Berlangganan artikel terbaru dari blog ini langsung via email.