In this article we will see how to make Image Slider with ViewPager on android platform. Image Slider is used in many ways to show up the features of the app or to show some offer on the home page of the app. Lets get started with the implementation of Image Slider.
For implementing image slider you will need ViewPager component. To work with ViewPager you need an adapter to be set to it i.e PagerAdapter.
You can also watch out our video tutorial on this article.
Steps and Source Code for Image Slider in Android –
– First let us add ViewPager in the activity layout file.
activity_main.xml file:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.test.myapplication.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="190dp" android:layout_marginBottom="8dp"/> </RelativeLayout>
– Now we will create a custom layout file to display images in ViewPager.
custom_layout.xml file:
<?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" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" app:srcCompat="@mipmap/ic_launcher" android:scaleType="fitXY" android:adjustViewBounds="true" android:id="@+id/imageView" /> </LinearLayout>
– After that you need to create an Adapter to load the images into ViewPager.
ViewPagerAdapter.java file:
package com.test.myapplication;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
public class ViewPagerAdapter extends PagerAdapter {
private Context context;
private LayoutInflater layoutInflater;
private Integer [] images = {R.drawable.slide1,R.drawable.slide2,R.drawable.slide3};
public ViewPagerAdapter(Context context) {
this.context = context;
}
@Override
public int getCount() {
return images.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.custom_layout, null);
ImageView imageView = (ImageView) view.findViewById(R.id.imageView);
imageView.setImageResource(images[position]);
ViewPager vp = (ViewPager) container;
vp.addView(view, 0);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
ViewPager vp = (ViewPager) container;
View view = (View) object;
vp.removeView(view);
}
}
– Now you will set the adapter to the viewPager in the Activity class.
MainActivity.java file:
package com.test.myapplication;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewPager);
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(this);
viewPager.setAdapter(viewPagerAdapter);
}
}
– Last one thing to do is to add images to the @drawable folder in the Project. I have image file named as slide1, slide2 and slide3.
That’s all you need to do to implement Image Slider in Android. Hope you like this article.
