Card Slider For Android with Carousel Effect

Card Slider has been around for many years. Also, having a simple slideshow with different animations in the slider can be implemented. The UI has gotten a lot more vast than just using a simple slideshow. Although, slideshows are there for easy application of having different contents slide in a horizontal or vertical pattern as per the preference. We will help you improve your UI with this amazing card slider library that offers the Carousel effect on sliding animations.

Android development is a never-dying environment. Android has a huge market in terms of users. In addition, an open source makes it more ready for any future applications. However, a long-term environment means new competitors every day for old developers. It’s not that big of a deal but to keep up you will need to have perfect outcomes from the code you write.

Although, it might seem like a huge problem but don’t worry libraries will be there for you. The library makes your development work easier than you would’ve thought. Similarly, we have come up with a card slider library designed for android developers. This isn’t a normal slideshow implication but a slider with a carousel effect.

Also Read: Tech Tips And Tricks

Although, the carousel effect is well-known. Some of you might not be sure how it works or even what is a carousel effect. Just before starting the discussion about the library. Firstly, let’s briefly know what the carousel effect actually means. While, normal slideshow effects transition from one to another, applying the carousel effect makes the slider portion 3D. The definition might not have been enough. So, let’s get into the preview where you will notice the difference. 

Demo Application

Before getting right into implementation, you can try out the application available on the google play store. This gives a full glimpse of the potential and use of the library.

https://play.google.com/store/apps/details?id=com.github.islamkhsh.cardslider_sample

Card Slider components

• CardSliderViewPager: Custom ViewPager2 and uses a page transformer to apply the carousel effect as shown in GIF.

• As ViewPager2 is still a final class following this issue, I added it as part of my package.

• CardSliderIndicator: Custom LinearLayout that contains indicators as children views.

• CardSliderAdapter: Abstract class that must be extended and passed to CardSliderViewPager as its adapter.

Feature

You might be a little confused about what the library actually offers. Although, a demo application is given a feature section always makes it better. So, here are the features included in the library.

1. Show a preview of pages on the left and right (or top and bottom).

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

3. Can make pages auto-swiped after a specific time.

4. Add an indicator and fully customize it easily.

5. Infinite indicators like those in the Instagram app.

6. RTL Support.

7. Support vertical orientation.

Add to project

Now, let’s move on to the installation part. These steps will help you to easily add the library to your projects. So, let’s move on to the steps.

1. Add it to your root build.gradle at the end of repositories:

allprojects {

repositories {

...

maven { url 'https://jitpack.io' }

}

}

2. Add the dependency:

implementation 'com.github.IslamKhSh:CardSlider:{latest_version}'

Usage

Moving onto the usage section. The library is fairly simple to use. However, it might be a bit confusing at first. But don’t worry we will guide you until the end. Simply follow the steps provided below to use the library on your awesome project.

1. Add it to your layout:

<com.github.islamkhsh.CardSliderViewPager
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:id="@+id/viewPager"
           android:layout_marginTop="24dp"
           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:auto_slide_time="3"/>  // auto sliding time in seconds

Create your item (page) layout.
Extend CardSliderAdapter
class MovieAdapter(private val movies : ArrayList<Movie>) : CardSliderAdapter<MovieAdapter.MovieViewHolder>() {

    override fun getItemCount() = movies.size

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MovieViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)
        return MovieViewHolder(view)
    }
    
    override fun bindVH(holder: MovieViewHolder, position: Int) {
      //TODO bind item object with item layout view
    }

    class MovieViewHolder(view: View) : RecyclerView.ViewHolder(view)
}

or using Java

public class MovieAdapter extends CardSliderAdapter<MovieAdapter.MovieViewHolder> {
    
    private ArrayList<Movie> movies;
    
    public MovieAdapter(ArrayList<Movie> movies){
        this.movies = movies;
    }
    
    @Override
    public int getItemCount(){
    	return movies.getSize();
    }
    
     @Override
    public MovieViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_page, parent, false);
	return new MovieViewHolder(view);
    }
    
    @Override
    public void bindVH(int position, MovieViewHolder holder) {
      //TODO bind item object with item layout view
    }
    
    class MovieViewHolder extends RecyclerView.ViewHolder {
    	
	public MovieViewHolder(View view){
	      super(view);
	}
    }
}

Add adapter to CardSliderViewPager
val movies = ArrayList<Movie>().apply{
  // add items to arraylist
  }
  
  findViewById<CardSliderViewPager>(R.id.viewPager).adapter = MoviesAdapter(movies)
or using Java
  ArrayList<Movie> movies = new ArrayList<Movie>();
    // add items to arraylist
  
  CardSliderViewPager cardSliderViewPager = (CardSliderViewPager) findViewById(R.id.viewPager);
  cardSliderViewPager.setAdapter(new MoviesAdapter(movies));
5- To add indicator add it to your layout
 <com.github.islamkhsh.CardSliderIndicator
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/indicator"
	    app:indicatorsToShow="5" />
And then bind it with your CardSliderViewPager
  <com.github.islamkhsh.CardSliderViewPager
            ...
            app:cardSlider_indicator="@id/indicator"/>

Attributes List

Let’s move into the attributes of the library. Undoubtedly,  having a glimpse of the usage in the above code might have raised some questions regarding the function or use of the attribute. So, in this, we have a short description of all the attributes.

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 overridden.	baseShadow + minShadow
cardSlider_otherPagesWidth	The width of displayed parts from the next and previous cards.	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)

 

2- CardSliderIndicator

Attribute	Description	Default value
defaultIndicator	The indicator is drawable in case of not selected	default_dot.xml
selectedIndicator	The indicator is drawable in the case of selection.	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 the Instagram app	-1 (CardSliderIndicator.UNLIMITED_INDICATORS)

Download the complete project source code from GitHub