In this tutorial we can learn Image Slider using ViewPager. image slider slides one entire screen to another screen. Image slider used to ViewPager library.
ViewPager is a layout manager that allows the user to flip left and right through pages of data. We supply an implementation of a PagerAdapter to generate the pages that the view shows.
Image slider is user can swipe left to right then change images and display. you can multiple image display sliding in ViewPager.
When you can create Image slider with ViewPager to required PagerAdapter in adapter class. and this adapter to easy to create image slider and maintain multiple images using sliding.
when you can used to ViewPager library in your project.so you can implement dependency in you app level gradle file.
Implement dependency in app level build.gradle file
|
1 |
implementation 'com.android.support:design:28.0.0' |
Image Slider using ViewPager Example in Android
Create activity_main.xml File Follow this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.bhaumik.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/view_pager_slider" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> |
Create slider_item.xml layout file follow this code.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/slider_image_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> |
Create MainActivity.java file Follow this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
package com.example.bhaumik; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager_slider); viewPager.setAdapter(new SliderAdapter(MainActivity.this)); } } |
Create SliderAdapter.java File Follow this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
package com.example.bhaumik; import android.content.Context; import android.support.v4.view.PagerAdapter; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; public class SliderAdapter extends PagerAdapter{ Context context; int[] img = {R.drawable.m1,R.drawable.m2,R.drawable.m3, R.drawable.m4,R.drawable.m5,R.drawable.m6}; public SliderAdapter(Context context) { this.context = context; } @Override public int getCount() { return img.length; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView; LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); View itemView = inflater.inflate(R.layout.slider_item,container,false); imageView = itemView.findViewById(R.id.slider_image_view); imageView.setImageResource(img[position]); Log.d("tag","Image Position -> " + img[position]); container.addView(itemView); return itemView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((LinearLayout) object); } } |
In this Example of Create ViewPager and Create custom layout xml file. in this xml file bind SliderAdapter.java class file. In this adapter extends of PagerAdapter and implement some methods.
You can copy some images and paste drawable folder and then create array of images in adapter class then set the adapter in ViewPager and then you can run it to slide left to right to change image in ViewPager.