Tutorial Membuat Image View Slider Pada Android Studio Versi 3.1.3 Terbaru

Halo guys bagi kalian yang pengen tau cara membuat image slider di android studio ini ada tutorial gratis buat kalian. Image view slider adalah cara membuat  gambar bergeser otomatis di aplikasi Android yang mau kita buat.

saya akan membuat gambar slider dengan indikator navigasi melingkar atau titik.

Indikator ini akan memandu pengguna berapa jumlah gambar yang sedang ditampilkan dalam penggeser. Anda juga bisa menyebutnya sebagai tampilan slide.

Saya disini akan menggunakan Viewpager untuk mengembangkan tutorial ini secara terprogram.

Pertama, periksa hasilnya dan kemudian kita akan mengembangkan penggeser gambar android dengan tampilan slide menggunakan Viewpager.

Berikut ini adalah langkah-langkahnya :

1. Seperti biasa Create New project di Android Studio

2. Update build.gradle (Module:app).

    Kemudian copy code program dibawah ini ke dalam dependencies{}. Nomor 2 pada gambar                dibawah.

implementation 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'

annotationProcessor 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'

    Kalau sudah Klik Sinc Now Seperti gambar no.3 dibawah.

     

Klik gambar untuk memperbesar

3. Masukkan gambar pada Directory drawable.

Dwonload disini contoh gambar yang mau kita masukkan nanti ke directory drawable.

Setelah menambahkan gambar, sebuah direktori akan terlihat seperti gambar di bawah ini.

4. Buat kelas baru dengan nama ImageModel1.java

Buat kelas baru dan beri nama sebagai ImageModel1.java dan tambahkan kode di bawah ini!

public class ImageModel1 {

    private int image_drawable;

    public int getImage_drawable() {
        return image_drawable;
    }

    public void setImage_drawable(int image_drawable) {
        this.image_drawable = image_drawable;
    }
}

5. Membuat sumber daya Tata Letak untuk slide tunggal

Buat satu file sumber daya tata letak di bawah direktori tata letak dan beri nama sebagai slidingimages_layout.xml

Tambahkan kode dibawah ini!

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

    <ImageView        android:id="@+id/image"        android:layout_width="match_parent"        android:layout_height="262dp"        android:layout_gravity="top"        android:adjustViewBounds="true"        android:scaleType="centerCrop"        android:src="@mipmap/ic_launcher" />
</FrameLayout>

6. Menyiapkan adaptor class  untuk Viewpager

Buat  kelas Java baru dan beri nama sebagai SlidingImage_Adapter.java

Masukkan kode dibawah ini!

import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;

public class SlidingImage_Adapter extends PagerAdapter {


    private ArrayList<ImageModel1> imageModelArrayList;
    private LayoutInflater inflater;
    private Context context;


    public SlidingImage_Adapter(Context context, ArrayList<ImageModel1> imageModelArrayList) {
        this.context = context;
        this.imageModelArrayList = imageModelArrayList;
        inflater = LayoutInflater.from(context);
    }

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

    @Override    public int getCount() {
        return imageModelArrayList.size();
    }

    @Override    public Object instantiateItem(ViewGroup view, int position) {
        View imageLayout = inflater.inflate(R.layout.slidingimages_layout, view, false);

        assert imageLayout != null;
        final ImageView imageView = (ImageView) imageLayout
                .findViewById(R.id.image);


        imageView.setImageResource(imageModelArrayList.get(position).getImage_drawable());

        view.addView(imageLayout, 0);

        return imageLayout;
    }

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

    @Override    public void restoreState(Parcelable state, ClassLoader loader) {
    }

    @Override    public Parcelable saveState() {
        return null;
    }


}

7. Buka activity_main.xml

Salin dan tempel code dibawah ini!

<RelativeLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content" >

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

        <com.viewpagerindicator.CirclePageIndicator            android:id="@+id/indicator"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_alignParentStart="true"            android:layout_alignParentTop="true"            android:layout_marginTop="225dp"            android:gravity="bottom"            android:padding="10dip"            app:centered="true"            app:fillColor="#df0623"            app:pageColor="#fff"            app:snap="false" />
    </RelativeLayout>
</RelativeLayout>

8. Buka MainActivity.java

Salin dan tempel code dibawah ini!

import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.viewpagerindicator.CirclePageIndicator;

import java.util.ArrayList;
import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends AppCompatActivity {

    private static ViewPager mPager;
    private static int currentPage = 0;
    private static int NUM_PAGES = 0;
    private ArrayList<ImageModel1> imageModelArrayList;

    private int[] myImageList = new int[]{R.drawable.dji1, R.drawable.dji2,
            R.drawable.dji3,R.drawable.dji4            ,R.drawable.dji5,R.drawable.dji6};


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

        imageModelArrayList = new ArrayList<>();
        imageModelArrayList = populateList();

        init();

    }

    private ArrayList<ImageModel1> populateList(){

        ArrayList<ImageModel1> list = new ArrayList<>();

        for(int i = 0; i < 6; i++){
            ImageModel1 imageModel = new ImageModel1();
            imageModel.setImage_drawable(myImageList[i]);
            list.add(imageModel);
        }

        return list;
    }

    private void init() {

        mPager = (ViewPager) findViewById(R.id.pager);
        mPager.setAdapter(new SlidingImage_Adapter(MainActivity.this,imageModelArrayList));

        CirclePageIndicator indicator = (CirclePageIndicator)
                findViewById(R.id.indicator);

        indicator.setViewPager(mPager);

        final float density = getResources().getDisplayMetrics().density;

//Set circle indicator radius        indicator.setRadius(5 * density);

        NUM_PAGES =imageModelArrayList.size();

        // Auto start of viewpager        final Handler handler = new Handler();
        final Runnable Update = new Runnable() {
            public void run() {
                if (currentPage == NUM_PAGES) {
                    currentPage = 0;
                }
                mPager.setCurrentItem(currentPage++, true);
            }
        };
        Timer swipeTimer = new Timer();
        swipeTimer.schedule(new TimerTask() {
            @Override            public void run() {
                handler.post(Update);
            }
        }, 3000, 3000);

        // Pager listener over indicator        indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override            public void onPageSelected(int position) {
                currentPage = position;

            }

            @Override            public void onPageScrolled(int pos, float arg1, int arg2) {

            }

            @Override            public void onPageScrollStateChanged(int pos) {

            }
        });

    }

}

9. Run App klik icon 

atau dengann shortkey (Shift=F10) pada keyboard.


INI ADALAH HASILNYA!

Jadi itu semua tentang gambar slider dengan slide menggunakan contoh android Viewpager. Terima kasih.

Semoga Kamu Berhasil!..

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

"Jangan lupa ikuti saya disini untuk update post terbaru dari saya agar kamu tidak ketinggalan"