Cara Membuat Image Slider Menggunakan ViewPager di Aplikasi Android

Halo semuanya. Bagaimana kabar kalian hari ini? saya harap kalian baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial tentang cara membuat image slider di aplikasi android.

Ketika aplikasi yang kita buat memiliki begitu banyak gambar yang ditampilkan dan kita tidak tahu harus bagaimana cara membuat pengguna mudah menganti gambar tersebut. Maka kita akan mendapatkan kesalahan yang fatal karena pengguna ingin menggunakan aplikasi yang kita buat senyaman mungkin.

Seperti pada aplikasi galeri di setiap smartphone android misalnya. Pengguna akan terasa mudah ketika mereka ingin melihat gambar sebelum atau sesudahnya. Atau seperti pada aplikasi e-commerce ternama seperti Tokopedia, Bukalapak dan lainnya. Ketika seller menampilkan gambar produk yang lebih dari 1 gambar maka buyer atau pengguna akan mudah melihat gambar produk lainnya hanya dengan cara menggeser pada gambar sebelumnya.

Jadi, pada artikel ini kalian akan belajar bagaimana cara membuat image slider seperti aplikasi galeri di android menggunakan ViewPager.

Tutorial Cara Membuat Image Slider di Aplikasi Android

Buatlah projek android studio dengan informasi sebagai berikut:

Daftar file xml layout yang digunakan dalam projek ini:

1. activity_main.xml

Daftar file java activity yang digunakan dalam projek ini:

1. MainActivity.java
2. ImageSlider.java

Daftar file drawable atau asset yang digunakan dalam projek ini: Download Asset

1. wall_0.jpg
2. wall_1.jpg
3. wall_2.jpg
4. wall_3.jpg
5. wall_4.jpg

Berikut ini adalah langkah-langkah dalam pembuatan aplikasi Image Slider.

Drawable File

Pindahkan gambar atau asset yang telah kalian download pada link di atas ke dalam folder drawable dengan cara copy asset lalu paste pada folder drawable. Maka project structure akan terlihat seperti pada gambar dibawah ini.

XML Layout File

Buka activity_main.xml layout lalu tambakan widget ViewPager di dalam widget layout ContraintLayout. Lalu tambahkan atribut id beserta ukuran panjang dan lebarnya. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Java Activity File

Buatlah file java baru dengan cara klik kanan pada folder java lalu pilih New>Java class. Beri nama file java baru dengan nama ImageAdapter lalu tekan OK. Berikut ini adalah kode lengkap untuk file ImageAdapter.java

app/java/com.androidrion.sliderimage/ImageAdapter.java

package com.androidrion.imageslider;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;

public class ImageAdapter extends PagerAdapter {

    private Context mContext;

    ImageAdapter(Context context) {
        this.mContext = context;
    }

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

    private int[] sliderImageid = new int[]{
            R.drawable.wall_0, R.drawable.wall_1,
            R.drawable.wall_2, R.drawable.wall_3,
            R.drawable.wall_4
    };

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

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ImageView mImageView = new ImageView(mContext);
        mImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        mImageView.setImageResource(sliderImageid[position]);
        container.addView(mImageView, 0);
        return mImageView;
    }

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

Setelah kalian menambahkan kode diatas, sekarang kalian buka file MainActivity.java kalian dan tambahkan kode di bawah ini. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.sliderimage/MainActivity.java

package com.androidrion.imageslider;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

        ViewPager mViewPager = findViewById(R.id.viewPager);
        ImageAdapter adapterView = new ImageAdapter(this);
        mViewPager.setAdapter(adapterView);
    }
}

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, aplikasi memperlihatkan gambar atau asset wall_0.jpg. Lalu,kalian bisa menslide gambar tersebut dari kanan ke arah kiri pada aplikasi. Aplikasi pun akan menampilkan gambar atau asset selanjutnya. Jika kode di atas tidak terjadi masalah, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat Image Slider di aplikasi android menggunakan ViewPager. Tutorial di atas lumayan mudah untuk dikerjakan karena hanya menggunakan satu widget dan dua java file.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan berkomentar pada kolom komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.