Membuat Image Slider Menggunakan ViewPager di Android Studio

Membuat Image Slider Menggunakan ViewPager di Android Studio

Membuat Image Slider Menggunakan ViewPager di Android Studio
Membuat Image Slider Menggunakan ViewPager di Android Studio

Hallo sobat ruangcoder, artikel kali ini tentang Cara Membuat Image Slider Menggunakan ViewPager di Android Studio, dimana kita akan membuatnya dengan viewpager android studio kotlin , imageview slider ini sudah sering kali kita jumpai , sobat bisa lihat seperti apps dari shopee, tokopedia, dan masih banyak lainnya, seperti itu lah contoh program yang akan kita buat di android studio kali ini, nah untuk penggunaanya kita akan menggunakan viewpager, nah View Pager itu sendiri adalah salah satu komponen view pada android, yang di sediakan para developer untuk membuat suatu design yang dapat beranimasi, maksudnya design di sini adalah suatu atau kumpulan object baik yang berupa komponen view maupun seperti layout, input, listview, textview, image dan masih banyak lagi. Tanpa banyak basa - basi lagi langsung saja sobat kita akan membuat program  imageview slider android pada android studio.

Membuat Image Slider Menggunakan ViewPager di Android Studio :


Langkah pertama silahkan sobat buka android studio sobat,saat terbuka android studio sobat klik -> Start a new Android Studio project -> pilih Empty Activity -> kasih nama project tersebut dengan nama "ViewsPager" kemudian pilh API 19: Android 4.4 (KitKat). Kemudian langsung Finish saja. Lalu sobat tunggu sampai Gradle dll nya selesai di Synchrone , tunggu saja, admin anggep sobat sudah selesai, jadi kita lanjut.

Disini seperti biasa kita hanya memodifikasi file default dari MainActivity.xml dan MainActivity.xml dan nantinya akan menambahkan file baru dengan nama "ImageAdapter". kalau ingin dikembangkan sendiri ya bebas tentunya dan pastinya codingannya berubah.

Sebelum masuk ke codingannya silahkan sobat download assets nya terlebih dahulu disini.

Lanjut kita akan mendesign tampilannya dengan merubah codingan MainActivity.xml dengan codingan yang ada dibawah ini.



<?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>

Selanjutnya kita akan membuat file baru sesuai yang admin katakan sebelumnya buat dengan nama "ImageAdapter.java" kemudian sobat isikan codingan dibawah ini.



package com.example.viewspager;

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);
    }
}


Sebelum lanjut coding silahkan sobat masukkan assets yang sebelumnya sobat download ke drawable, kemudian setelah sobat memasukkan assets ke drawable seperti gambar dibawah, lanjut sobat ubah codingan yang ada di MainActivity.java dengan codingan yang ada dibawah ini.



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);
    }
}

Nah sobat sudah selesai deh tutorialnya , jika sobat berhasil maka hasilnya akan seperti gambar dibawah ini. tinggal di geser aja untuk lanjut ke slide selanjutnya bro.



Mungkin itu saja tutorial kali ini sobat, semoga bermanfaat untuk sobat, apabila kekurangan kata dalam menjelaskan mohon dimaafkan, dan apabila artikel ini bermanfaat silahkan sobat share, terimakasih sobat sudah berkunjung

Anda mungkin menyukai postingan ini