Android Image Slider Using ViewPager
3104 views.You have seen many Android apps with sliding images with circle page indicator at top. Today we are going to learn the same thing for our app.
Before that we need to add in gradle below code
|
1 2 3 4 5 |
repositories { mavenCentral() } implementation 'fr.avianey.com.viewpagerindicator:library:2.4.1.1@aar' |
We are going to use ViewPager for Sliding the images so if anyone of you are unaware of viewpager can go and check my tutorial about ViewPager.
Features of this app:
Slide images by swiping left and right.
Automatic image sliding at particular duration.
activity_main.xml
|
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 |
<?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:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <!-- Top Sliding Banners --> <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_alignParentBottom="true" android:layout_centerHorizontal="true" android:gravity="bottom" android:padding="10dip" app:centered="true" app:fillColor="#ff0099" app:pageColor="#FF0000" app:snap="false" /> </RelativeLayout> </LinearLayout> |
MainActivity.java
|
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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
package com.androindian.raj.imageslider; 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 static final Integer[] IMAGES= {R.drawable.one,R.drawable.two,R.drawable.three,R.drawable.one}; private ArrayList<Integer> ImagesArray = new ArrayList<Integer>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); } private void init() { for(int i=0;i<IMAGES.length;i++) ImagesArray.add(IMAGES[i]); mPager = (ViewPager) findViewById(R.id.pager); mPager.setAdapter(new SlidingImage_Adapter(MainActivity.this,ImagesArray)); 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 =IMAGES.length; // 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) { } }); } } |
slidingimages_layout.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="1dip" > <ImageView android:id="@+id/image" android:layout_width="fill_parent" android:layout_height="fill_parent" android:adjustViewBounds="true" android:layout_gravity="center" android:src="@mipmap/ic_launcher" android:scaleType="centerCrop" /> </FrameLayout> |
SlidingImage_Adapter.java
|
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 61 62 63 64 65 66 67 68 69 70 71 72 |
package com.androindian.raj.imageslider; 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; /** * Created by Raj on 4/12/2018. */ public class SlidingImage_Adapter extends PagerAdapter { private ArrayList<Integer> IMAGES; private LayoutInflater inflater; private Context context; public SlidingImage_Adapter(Context context,ArrayList<Integer> IMAGES) { this.context = context; this.IMAGES=IMAGES; inflater = LayoutInflater.from(context); } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public int getCount() { return IMAGES.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(IMAGES.get(position)); 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; } } |
