Card Slider


0.4 (Sep 20, 2019)
Aug 17, 2019
Oct 7, 2019
Islam Khaled (IslamKhSh)
Islam Khaled (IslamKhSh)
Source code
APK file


Card Slider

This is an amazing card slider for the Android platform with many features and attrs to get exactly what you need.

Demo App

Card Slider components

  1. CardSliderViewPager: A custom ViewPager built on RTL ViewPager to support RTL and uses a page transformer to apply scaling action as shown in GIF.
  2. CardSliderIndicator: Custom LinearLayout that that contain indicators as children views.
  3. CardSliderAdapter: Abstract class that must be extended and passed to CardSliderViewPager as its adapter.


1- Show preview of pages in left and right.

2- Can resize (scale) and change opacity of the pages to make focused page larger and more focused in height as shown in GIF.

3- Can make pages auto swiped after specific time.

4- Full customize the appearance of the the CardView and ViewPager.

5- Add indicator and full customize it easily.

6- Infinite indicators like those in the Instagram app.

7- RTL Support.

Add to project

  1. Add it in your root build.gradle at the end of repositories:
allprojects {
  repositories {
   maven { url '' }
  1. Add the dependency:
implementation 'com.github.IslamKhSh:CardSlider:{latest_version}'

Find the latest version here


  1. Add it to your layout:
           app:cardSlider_smallScaleFactor="0.9" //scale factor of height of pages in left and right (1 if no resizing nedded)
           app:cardSlider_otherPagesWidth="24dp" // width of displayed parts of left and right pages
           app:cardSlider_pageMargin="12dp" // margin between pages
           app:cardSlider_cardCornerRadius="5dp" // corner radius of every page
       app:auto_slide_time="3"/>  // auto sliding time in seconds
  1. Extend CardSliderAdapter
class MovieAdapter(movies : ArrayList<Movie>) : CardSliderAdapter<Movie>(movies) {

    override fun bindView(position: Int, itemContentView: View, item: Movie?) {
      //TODO bind item object with item layout view

    override fun getItemContentLayout(position: Int) : Int {
        //TODO return the item layout of every position 
        //This layout will be added as a child of CardView

or using Java

public class MovieAdapter extends CardSliderAdapter<Movie> {
    public MovieAdapter(ArrayList<Movie> movies){
    public void bindView(int position, View itemContentView, Movie item) {
      //TODO bind item object with item layout view

    public int getItemContentLayout(int position) {
        //TODO return the item layout of every position 
        //This layout will be added as a child of CardView
  1. Create item layout to return it in getItemContentLayout

  2. Add adapter to CardSliderViewPager

  val movies = ArrayList<Movie>().apply{
  // add items to arraylist
  findViewById<CardSliderViewPager>( = MoviesAdapter(movies)

or using Java

  ArrayList<Movie> movies = ArrayList<Movie>();
    // add items to arraylist
  CardSliderViewPager cardSliderViewPager = (CardSliderViewPager) findViewById(;

5- To add indicator add it to your layout

     app:indicatorsToShow="5" />

And then bind it with your CardSliderViewPager


Attributes List

1- CardSliderViewPager

Attribute Description Default value
cardSlider_smallScaleFactor The small scale of the next and previous pages. 1 (no resizing)
cardSlider_smallAlphaFactor The small opacity factor of the next and previous pages. 1 (no opacity)
cardSlider_baseShadow The CardView Elevation when selected. 2dp
cardSlider_minShadow The CardView Elevation of next and previous cards. baseShadow * smallScaleFactor
cardSlider_pageMargin The space between two pages. This must be large than baseShadow + minShadow or it will be override. baseShadow + minShadow
cardSlider_otherPagesWidth The width of displayed parts from next and previous cards . 0
cardSlider_cardBackgroundColor The background color of the card. White
cardSlider_cardCornerRadius The corner radius of the card view. 0
cardSlider_indicator The id of CardSliderIndicator to work with this view pager. no indicator
auto_slide_time The time in seconds to auto sliding between pages in it no sliding (STOP_AUTO_SLIDING)

paddingLeft and right will be override with otherPagesWidth + pageMargin

2- CardSliderIndicator

Attribute Description Default value
defaultIndicator The indicator drawable in case of not selected default_dot.xml
selectedIndicator The indicator drawable in case of selected. selected_dot.xml
indicatorMargin The space between indicators the minimum width of defaultIndicator and selectedIndicator
indicatorsToShow The number of indicators to show and others will be hidden like Instagram app -1 (CardSliderIndicator.UNLIMITED_INDICATORS)