Cara Membuat View Pager di Android Studio - Coding Rakitan

Hai Sobat Coding Rakitan kali ini kita akan belajar menggunakan View Pager di Android Studio. View Pager sendiri merupakan sebuah widget yang disediakan oleh Android Studio untuk membuat tampilan list yang keren pada aplikasi. Dengan menggunakan PagerView kita dapat membuat tampilan aplikasi seperti slide, list file horizontal, dan masih banyak lagi.

Berikut contoh tampilan yang bisa dibuat dengan memanfaatkan widget View Pager.

Sedangkan untuk tampilan yang akan kita buat nantinya akan tampak seperti berikut.

Berikut adalah daftar file baik Class, layout, ataupun drawable yang akan dibuat dalam tutorial kali ini.

Selain itu ada beberapa data berupa array yang diperlukan dalam mengisi card yang akan di tampilkan dalam View Pager nantinya. Cara membuat array ini anda tinggal klik kanan pada folder values -> New -> Value resources file, lalu beri nama array. Selanjutnya isi dengan kode seperti dibawah ini.

 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="judul">
        <item>Google</item>
        <item>Coding Rakitan</item>
        <item>Facebook</item>
    </string-array>
    <string-array name="text">
        <item>Google merupakan website mesin pencari ...</item>
        <item>Coding Rakitan merupakan sebuah blog. . . </item>
        <item>Salah satu media sosial yang paling . . .</item>
    </string-array>
    <string-array name="gambar">
        <item>a</item>
        <item>b</item>
        <item>c</item>
    </string-array>
</resources>
 

Langsung saja untuk membuat tampilan seperti di atas menggunakan View Pager silahkan buka Android Studio anda. Buat sebuah project baru dengan format sperti dibawah.

• Name : Belajar Pagerview
• Package name : codingrakitan.blogspot.com.belajarpagerview (Atur sesuai keinginan)
• Language : Java
• Minimum API Level : API17 Android 4.2 (Jelly Bean)
• Chose Your Project : Empty Activity

Bagi pemula yang belum tahu cara membuat project baru silahkan kunjungi Cara Membuat Project Baru di Android Studio.

Setelah project baru selesai dibuat, lanjut ke tahap menambahkan dependencies yaitu "implementation 'com.android.support:support-v4:28.0.0'" kedalam file build.grandle (Module.app). Sehingga nantinya dependencies kita akan tampak seperti berikut.

 
  dependencies {
       implementation fileTree(dir: 'libs', include: ['*.jar'])
       implementation 'com.android.support:appcompat-v7:28.0.0'
       implementation 'com.android.support.constraint:constraint-layout:1.1.3'
       testImplementation 'junit:junit:4.12'
       androidTestImplementation 'com.android.support.test:runner:1.0.2'
       androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
       implementation 'com.android.support:support-v4:28.0.0'
   }

 

Atau cara cepatnya silahkan klik ikon download seperti pada gambar di bawah.

MainActivity

 
public class MainActivity extends AppCompatActivity {

    TextView a, b;
    ViewPager pagerView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        a = findViewById(R.id.a);
        b = findViewById(R.id.b);
        pagerView = findViewById(R.id.pager);
        isiViewPager();
    }

    private void isiViewPager() {
        Resources res = getResources();
        String[] judul = res.getStringArray(R.array.judul);
        String[] text = res.getStringArray(R.array.text);
        String[] gambar = res.getStringArray(R.array.gambar);
        AdapterViewPager adapter = new AdapterViewPager();
        b.setText(""+judul.length);
        for (int i=0;i<judul.length;i++){
            adapter.addCardItem(new ModelItem(judul[i], text[i], gambar[i]));
        }
        pagerView.setAdapter(adapter);
        pagerView.setOffscreenPageLimit(3);
        pagerView.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                int p = i+1;
                a.setText(""+p);
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }
}
 

AdapterViewPager

 
public class AdapterViewPager extends PagerAdapter {


    private List<ModelItem> mData;


    private Context context;
    public AdapterViewPager() {
        mData = new ArrayList<>();
    }



    public void addCardItem(ModelItem item) {
        mData.add(item);
    }


    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = LayoutInflater.from(container.getContext())
                .inflate(R.layout.cardw, container, false);
        TextView judul = view.findViewById(R.id.tv_judul);
        TextView text = view.findViewById(R.id.tv_text);

        judul.setText(mData.get(position).getJudul());
        text.setText(mData.get(position).getText());


            container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }


}


 

ModelItem

 
public class ModelItem{

    String judul, text, gambar;
    public ModelItem(String judul, String text, String gambar){
        this.judul = judul;
        this.text = text;
        this.gambar = gambar;
    }

    public String getJudul() {
        return judul;
    }

    public void setJudul(String judul) {
        this.judul = judul;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getGambar() {
        return gambar;
    }

    public void setGambar(String gambar) {
        this.gambar = gambar;
    }
}
 

activity_main.xml

 
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E8E8E8"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="10dp">

        <TextView
            android:id="@+id/a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:textColor="@android:color/black"
            android:textSize="24sp" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:text="/"
            android:textColor="@android:color/black"
            android:textSize="24sp" />

        <TextView
            android:id="@+id/b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="-"
            android:textColor="@android:color/black"
            android:textSize="24sp" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:overScrollMode="never"
        android:paddingLeft="50dp"
        android:paddingEnd="50dp"
        android:paddingRight="50dp" />
</LinearLayout>
 

cardw.xml

 
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="370dp"
        android:background="@android:color/white"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@android:color/holo_blue_dark"
            android:orientation="vertical" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="20dp">

            <TextView
                android:id="@+id/tv_judul"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView"
                android:textColor="@android:color/black"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/tv_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="7dp"
                android:text="TextView" />
        </LinearLayout>

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="10dp"
            android:background="@color/colorAccent"
            android:text="More"
            android:textColor="@android:color/white" />

    </LinearLayout>

</LinearLayout>