Android viewpager is a widget in which user can display multiple screens in the same activity in which user can switch the screens by swiping left or right.Mainly the implementation of a viewpager will be important if the application needs tablayout which should display multiple screens. But android is not having a default widget for implementing a slider ,but we can implement slider in android with the help of a viewpager. In this tutorial we will learn how to implement a slider with indicator using a viewpager in android
Steps
- Create a new project in android studio
- Implement the layout for activity containing viewpager
- Create the layout for viewpager item
- Create the viewpager adapter
- Implement the Activity code for setting viewpager and indicator
Create New project in android studio
Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.
Implement the layout for activity containing viewpager
Once the project is created one activity with layout will be automatically created. Next step is to create the layout for the slider and indicator. For that we need to have a viewpager which will act as a slider and a layout which will be containing indicators. Following is the complete code for your layout file.
<RelativeLayout android:layout_width="match_parent" android:layout_height="200dp"> <android.support.v4.view.ViewPager android:id="@+id/vp_slider" android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:id="@+id/ll_dots" android:layout_width="match_parent" android:layout_height="30dp" android:layout_alignParentBottom="true" android:layout_marginBottom="20dp" android:gravity="center" android:orientation="horizontal"></LinearLayout> </RelativeLayout>
Create the layout for viewpager item
Now we have the layout for the activity ,next we need to implement a layout which should be displayed inside the slider. Here i am implementing an example of a slider with just a full screen image layout ,so i will be having only a imageview inside this layout.
layout_slider.xml
<?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/im_slider" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop"/>; </LinearLayout>
Create the adapter for viewpager
Next step is to have an adapter for the view pager. We need to provide the arraylist of images which needs to be added to the slider .From this list of images each image will be added to particular page position of the viewpager inside adapter. Following is the code for the adapter.
SliderPagerAdapter.java
public class SliderPagerAdapter extends PagerAdapter { private LayoutInflater layoutInflater; Activity activity; ArrayList<String> image_arraylist; public SliderPagerAdapter(Activity activity, ArrayList<String> image_arraylist) { this.activity = activity; this.image_arraylist = image_arraylist; } @Override public Object instantiateItem(ViewGroup container, int position) { layoutInflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE); View view = layoutInflater.inflate(R.layout.layout_slider, container, false); ImageView im_slider = (ImageView) view.findViewById(R.id.im_slider); Picasso.with(activity.getApplicationContext()) .load(image_arraylist.get(position)) .placeholder(R.mipmap.ic_launcher) // optional .error(R.mipmap.ic_launcher) // optional .into(im_slider); container.addView(view); return view; } @Override public int getCount() { return image_arraylist.size(); } @Override public boolean isViewFromObject(View view, Object obj) { return view == obj; } @Override public void destroyItem(ViewGroup container, int position, Object object) { View view = (View) object; container.removeView(view); } }
Implement the activity code for setting viewpager and indicator
Now we have the viewpager in the layout with adapter ready to set . All you need to do is to implement the following code inside your activity’s java file . In this file we need to set the array list containing images which needs to be passed into the adapter as well as some code to auto slide the viewpager without swiping.
public class MainActivity extends AppCompatActivity{ private ViewPager vp_slider; private LinearLayout ll_dots; SliderPagerAdapter sliderPagerAdapter; ArrayList<String> slider_image_list; private TextView[] dots; int page_position = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_main); // method for initialisation init(); // method for adding indicators addBottomDots(0); final Handler handler = new Handler(); final Runnable update = new Runnable() { public void run() { if (page_position == slider_image_list.size()) { page_position = 0; } else { page_position = page_position + 1; } vp_slider.setCurrentItem(page_position, true); } }; new Timer().schedule(new TimerTask() { @Override public void run() { handler.post(update); } }, 100, 5000); } private void init() { setSupportActionBar((Toolbar) findViewById(R.id.toolbar)); getSupportActionBar().hide(); vp_slider = (ViewPager) findViewById(R.id.vp_slider); ll_dots = (LinearLayout) findViewById(R.id.ll_dots); slider_image_list = new ArrayList<>(); //Add few items to slider_image_list ,this should contain url of images which should be displayed in slider // here i am adding few sample image links, you can add your own slider_image_list.add("http://images.all-free-download.com/images/graphiclarge/mountain_bongo_animal_mammal_220289.jpg"); slider_image_list.add("http://images.all-free-download.com/images/graphiclarge/bird_mountain_bird_animal_226401.jpg"); slider_image_list.add("http://images.all-free-download.com/images/graphiclarge/mountain_bongo_animal_mammal_220289.jpg"); slider_image_list.add("http://images.all-free-download.com/images/graphiclarge/bird_mountain_bird_animal_226401.jpg"); sliderPagerAdapter = new SliderPagerAdapter(MainActivity.this, slider_image_list); vp_slider.setAdapter(sliderPagerAdapter); vp_slider.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { addBottomDots(position); } @Override public void onPageScrollStateChanged(int state) { } }); } private void addBottomDots(int currentPage) { dots = new TextView[slider_image_list.size()]; ll_dots.removeAllViews(); for (int i = 0; i < dots.length; i++) { dots[i] = new TextView(this); dots[i].setText(Html.fromHtml("•")); dots[i].setTextSize(35); dots[i].setTextColor(Color.parseColor("#000000")); ll_dots.addView(dots[i]); } if (dots.length > 0) dots[currentPage].setTextColor(Color.parseColor("#FFFFFF")); } }
Note: I am using Picasso for loading images, so we need to add picasso library in build.gradle file
compile 'com.squareup.picasso:picasso:2.3.3'
Now simply run the code .You will be able to see the viewpager slider with indicator.
Thank you … but i need once slider will be completed go to next activity , If any one know solution plz help
Thank you very much
Welcome Krishnasai
Great explanation, helped me just when I needed it.
Nice and simple logic to show page indicators, without any heavy third party library. Thanks for sharing.
Welcome sunil
Hello,
i am getting “toolbal” error in above example.
can you please guide for the Toolbar field.
Thank you
Hi sana.
If you are not having toolbar in your activity layout file just comment the following line of the init function in MainActivity
Hope this will solve the issue.
how to slove the toolbar error ?
Please post the error you are getting
Thank u so much