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.
- Advertisement -
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:
Application Name | : | Image Slider |
Package Name | : | com.androidrion.imageslider |
Language | : | Java |
Minimum SDK | : | API 15: Android 4.0.3 (IceCreamSandwich) |
Daftar file xml layout yang digunakan dalam projek ini:
- activity_main.xml
Daftar file java activity yang digunakan dalam projek ini:
- MainActivity.java
- ImageSlider.java
Daftar file drawable atau asset yang digunakan dalam projek ini: Download Asset
- wall_0.jpg
- wall_1.jpg
- wall_2.jpg
- wall_3.jpg
- 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
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.
- Advertisement -
Kalo gesernya dari kanan ke kiri gimana gan?
Hi, Muhamad Nursidik. Terima kasih telah berkomentar di website blog Android Rion. Maaf jika saya baru bisa balas komentarnya.
Kode pada tutorial ini berfungsi dengan baik. Anda cukup geser dari kanan ke kiri untuk melihat gambar lainnya.