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:

  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

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 -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

2 Comments
  1. Muhamad Nursidik says

    Kalo gesernya dari kanan ke kiri gimana gan?

    1. Android Rion says

      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.

Leave A Reply

Your email address will not be published.