Membuat Gallery Foto di Android dengan ViewPager

Hai sobat, pada artikel sebelumnya yang berjudul Membuat Aplikasi WebView di Android, telah dijelaskan cara menampilkan halaman web dalam aplikasi android. Dan kali ini kita akan belajar membuat aplikasi menampilkan gallery foto menggunakan objek ViewPager, berikut caranya.

Dalam sebuah aplikasi bisanya dibutuhkan fungsi untuk menampilkan gambar beserta keterangannya secara berurutan untuk memberikan informasi kepada pengguna. Dan untuk membuat fungsi seperti itu kita bisa menggunakan objek ViewPager. ViewPager adalah manager Layout yang memungkinkan pengguna untuk mengeser layout ke kanan atau ke kiri melalui halaman data. ViewPager sering digunakan dengan Fragment untuk mempermudah mengelola siklus hidup Activity.

Pada kesempatan kali ini kita akan belajar mengunakan objek ViewPager di aplikasi Gallery Android, karena nantinya gambar yang akan ditampilkan akan bisa digeser ke kanan atau ke kiri. Untuk lebih jelasnya, silahkan sobat simak langkah-langkah di bawah ini :

Pertama sobat buat project baru dengan nama Galleri Foto, sedangkan untuk package beri nama blogsetyaaji.com. Setelah project siap, silahkan sobat siapkan gambar dan masukkan ke dalam folder drawable. Untuk menambahkan gambar ke dalam folder drawable, silahkan sobat bisa lihat di sini.

Setelah selesai, buka file activity_main.xml dan buat kode untuk menempatkan kode ViewPager seperti berikut ini 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.blogsetyaaji.gallerifoto.MainActivity">

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

</RelativeLayout>

Selanjutnya untuk menampilkan gambar dan tulisan pada galleri, sobat harus menambahka layout baru dengan cara mengklik kanan pada folder layout dan pilih new > layout resource file seperti gambar di bawah

Menambah file layout

Menambah file java

Jika sudah, beri nama galeri_item.xml dan silahkan buat kodenya menjadi seperti berikut ini

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView"
            android:text="New Text"
            android:textAppearance="?android:attr/textAppearanceLarge"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView2"
            android:text="New Text"
            android:textAppearance="?android:attr/textAppearanceMedium"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="500dp"
            android:id="@+id/imgItem"
            android:src="@drawable/rendang"/>

    </LinearLayout>

</ScrollView>

Layout sudah, sekarang pindah ke java, buka MainActivity.java dan buat kodenya seperti di bawah ini

package com.blogsetyaaji.gallerifoto;

import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    ViewPager viewPager;
    PagerAdapter adapter;
    String[] judul;
    String[] keterangan;
    int[] gambar;

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

        judul = new String[]{
                "Cumi Pedas", "Perkedel Gurih", "Rendang Padang"
        };

        keterangan = new String[] {
                "Masakan enak darimolahan cumi yang lembut dan enak, fresh dari laut",
                "Perkedel sebgai lauk yang banyak disukai, selain gurih dan enak juga banyak gizi",
                "Rendang khas Padang, dagiing yang lembut "
        };

        gambar = new int[] {
                R.drawable.cumi, R.drawable.perkedel, R.drawable.rendang
        };

        viewPager = (ViewPager) findViewById(R.id.pager);
        adapter = new ViewPagerAdapter(MainActivity.this,judul,keterangan,gambar);
        viewPager.setAdapter(adapter);
    }
}

Jika sudah, kita tambahkan satu file java lagi dengan nama ViewPageAdapter dan buat kodenya seperti berikut ini

package com.blogsetyaaji.gallerifoto;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ScrollingView;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ScrollView;
import android.widget.TextView;

/**
 * Created by AJISETYA on 8/2/2016.
 */
public class ViewPagerAdapter extends PagerAdapter {

    Context context;

    int[] flag;
    String[] judul;
    String[] keterangan;
    LayoutInflater inflater;

    public ViewPagerAdapter(Context context, String[] judul, String[] keterangan, int[] flag) {
        this.context = context;
        this.judul = judul;
        this.keterangan = keterangan;
        this.flag = flag;

    }

    @Override
    public int getCount() {
        return flag.length;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        TextView teksJudul;
        TextView teksKeterangan;

        ImageView imgflag;

        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View itemView = inflater.inflate(R.layout.galeri_item, container, false);


        teksJudul = (TextView) itemView.findViewById(R.id.textView);
        teksKeterangan = (TextView) itemView.findViewById(R.id.textView2);
        teksJudul.setText(judul[position]);
        teksKeterangan.setText(keterangan[position]);

        imgflag = (ImageView) itemView.findViewById(R.id.imgItem);
        imgflag.setImageResource(flag[position]);

        ((ViewPager) container).addView(itemView);
        return itemView;
    }

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

Jika sudah, silahkan sobat jalankan aplikasinya, dan tampilannya akan jadi seperti gambar di bawah ini

Dan itu lah cara membuat gallery foto di android menggunakan viewpager semoga bermanfaat. Silahkan sobat kembangkan sendiri, dan nantika artikel berikutnya.