Best Android Image Carousel Libraries – 2021

In most of our applications we tend to need to display a series of images. Images make our applications look more modern and interactive and they are a great way to pass information visually. Sometimes you may even need to show your item lists horizontally. One way is to use a recyclerview with horizontal orientation. However in this case the items won’t be auto-flipped or faded. You also won’t have indicators which the user can use to navigate to another image. You would need to implement a custom adapter that caters for all these and that costs time, which we are short of.

Thus we are curating some of the best libraries and examples already written by other developers and available for re-use. You could always customize them since they are all open source. Most of them are actually based on recyclerview and some do need a custom adapter. This gives them flexibility and power.

(a). Pluto

Pluto is an Easy, lightweight and high performance slider view library for Android! You can customize it to any view since it based RecyclerView.

The differnce of this library, we are not following the concept of images model. Pluto is not depending on any Image loading library.

Here is the demo:

Step 1: How to Install Pluto

Pluto requires API 17+.

This library is available in jCenter which is the default Maven repository used in Android Studio. You can also import this library from source as a module.

dependencies {
    // other dependencies here
    implementation 'com.opensooq.android:pluto:1.6'
}

Step 2: How to Use pluto

To create an image carousel using Pluto, first create your own adapter extending the PlutoAdapter:

Kotlin

class YourAdapter(items: MutableList<YourModel> , onItemClickListener: OnItemClickListener<Movie>? = null)
    : PlutoAdapter<YourModel, YourViewHolder>(items,onItemClickListener) {

    override fun getViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(parent, R.layout.item_your_layout)
    }

    class YourViewHolder(parent: ViewGroup, itemLayoutId: Int) : PlutoViewHolder<YourModel>(parent, itemLayoutId) {
        private var ivPoster: ImageView = getView(R.id.iv_poster)
        private var tvRating: TextView = getView(R.id.tv_rating)

        override fun set(item: YourModel, position: Int) {
           //  yourImageLoader.with(mContext).load(item.getPosterId()).into(ivPoster);
            tvRating.text = item.imdbRating
        }
    }
}

Java

public class YourAdapter extends PlutoAdapter<YourModel, YourViewHolder> {

    public YourAdapter(List<YourModel> items) {
        super(items);
    }

    @Override
    public ViewHolder getViewHolder(ViewGroup parent, int viewType) {
        return new YourViewHolder(parent, R.layout.item_your_layout);
    }

    public static class YourViewHolder extends PlutoViewHolder<YourModel> {
        ImageView ivPoster;
        TextView tvRating;

        public YourViewHolder(ViewGroup parent, int itemLayoutId) {
            super(parent, itemLayoutId);
            ivPoster = getView(R.id.iv_poster);
            tvRating = getView(R.id.tv_rating);
        }

        @Override
        public void set(YourModel item, int pos) {
           //  yourImageLoader.with(mContext).load(item.getPosterId()).into(ivPoster);
            tvRating.setText(item.getImdbRating());
        }
    }
}

Then add PlutoView in your XML layouts:

<com.opensooq.pluto.PlutoView
        android:id="@+id/slider_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:indicator_visibility="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

Then finaly attach the adapter to Pluto:

Kotlin

val pluto = findViewById<PlutoView>(R.id.slider_view)
        val yourAdapter = YourAdapter(yourModelList, object : OnItemClickListener<Movie> {
            override fun onItemClicked(item: yourModel?, position: Int) {
            }
        })

        pluto.create(adapter, lifecycle = lifecycle)//pass the lifecycle to make the slider aware of lifecycle to avoid memory leak and handling the pause/destroy/resume

Java

  PlutoView pluto = findViewById(R.id.slider_view);
        YourAdapter adapter = new YourAdapter(yourModelsList);
        pluto.create(adapter,getLifecycle());  //pass the lifecycle to make the slider aware of lifecycle to avoid memory leak and handling the pause/destroy/resume

Method	usage
`create(PlutoAdapter adapter, long duration,Lifecycle lifecyle)`	it is the initialization method it take your adapter and the duration of waiting between each slide and lifecycle to make slider lifecylce-aware
`startAutoCycle()`	by default the value of autocycle is true, it determine to start autocycling or not
`stopAutoCycle()`	it stops the auto cycling of the view
`moveNextPosition()`	if you are the auto cylce is off you can manually move next with this method
`movePrevPosition()`	if you are the auto cylce is off you can manually move to the previus item with this method
`setIndicatorPosition(IndicatorPosition presetIndicator)`	to set the position of the indicator where values are `CENTER_BOTTOM` `RIGHT_BOTTOM` `LEFT_BOTTOM` `CENTER_TOP` `RIGHT_TOP` `LEFT_TOP`
`setCustomIndicator(PlutoIndicator indicator)`	if you want to custom the indicator use this method for custom indicators check Custom indicators

Example

Let’s look at a full example of how to create an image carousel using Pluto:

SliderAdapter

Here is a custom adapter for the image slider:


import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView

import com.bumptech.glide.Glide
import com.opensooq.pluto.base.PlutoAdapter
import com.opensooq.pluto.base.PlutoViewHolder
import com.opensooq.pluto.listeners.OnItemClickListener

class SliderAdapter(items: MutableList, onItemClickListener: OnItemClickListener) : PlutoAdapter<Movie, SliderAdapter.ViewHolder>(items, onItemClickListener) {

    override fun getViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(parent, R.layout.item_movie_promotion)
    }

    class ViewHolder(parent: ViewGroup, itemLayoutId: Int) : PlutoViewHolder(parent, itemLayoutId) {
        private var ivPoster: ImageView = getView(R.id.iv_poster)
        private var tvRating: TextView = getView(R.id.tv_rating)

        override fun set(item: Movie, position: Int) {
            Glide.with(context).load(item.posterId).into(ivPoster)
            tvRating.text = item.imdbRating
        }
    }
}

MainActivity.

The main activity:

package com.opensooq.plutodemo

import android.content.Intent
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.util.Log
import android.widget.LinearLayout

import com.opensooq.pluto.PlutoView
import com.opensooq.pluto.base.PlutoAdapter
import com.opensooq.pluto.listeners.OnItemClickListener
import com.opensooq.pluto.listeners.OnSlideChangeListener

const val TAG = "MainActivity"

class MainActivity : AppCompatActivity() {

    private fun getAvenger(): MutableList {
        val items = mutableListOf()
        items.add(Movie("7.1", R.drawable.ic\_captain\_marvel))
        items.add(Movie("9.2", R.drawable.ic\_end\_game))
        items.add(Movie("7.5", R.drawable.ic\_dr\_strange))
        items.add(Movie("7.9", R.drawable.ic\_iron\_man))
        return items
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity\_main)
        val pluto = findViewById(R.id.slider\_view)
        val adapter = SliderAdapter(getAvenger(), object : OnItemClickListener {
            override fun onItemClicked(item: Movie?, position: Int) {
                Log.d(TAG, "on Item clicked $position ${item?.imdbRating}")
            }
        })

        pluto.create(adapter, lifecycle = lifecycle)
        pluto.setOnSlideChangeListener(object : OnSlideChangeListener {
            override fun onSlideChange(adapter: PlutoAdapter<\*, \*>, position: Int) {
                Log.d(TAG, "on slide change $position ")

            }
        })

        val button = findViewById(R.id.indicator\_example)
        button.setOnClickListener {
            startActivity(Intent(this, CustomIndicatorActivity::class.java))
        }

    }
}

Find source code here.

Reference

find more documentation and code reference here.

(b). Sliding-Carousel

Android Library for easing Slider insertion to your apps with support for Images.

Here are it’s features:

Written in Kotlin
No boilerplate code
Easy initialization

Here’s the demo:

Step 1: Install Sliding Carousel

Specify the jitpakc as repository in your allProjects closure in the root level build.gardle file:

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

Then add this implementation statement in the dependencies closure in the app level build.gradle:

implementation 'com.github.akshaaatt:Sliding-Carousel:1.0.1'

Now sync your project.

Step 2: Add Carousel to Layout

Now add the sliding carousel to your xml layout:

<com.limerse.slider.ImageCarousel
    android:id="@+id/carousel"
    android:layout_width="match_parent"
    android:layout_height="256dp" />

Step 3: Write Code

Reference the ImageCarousel:

val carousel: ImageCarousel = findViewById(R.id.carousel)

carousel.registerLifecycle(lifecycle)

Create a list to hold carousel items:

val list = mutableListOf<CarouselItem>()

Now add images with or without captions:

// Image URL with caption
list.add(
    CarouselItem(
        imageUrl = "https://images.unsplash.com/photo-1532581291347-9c39cf10a73c?w=1080",
        caption = "Photo by Aaron Wu on Unsplash"
    )
)

Image without caption:

// Just image URL
list.add(
    CarouselItem(
        imageUrl = "https://images.unsplash.com/photo-1534447677768-be436bb09401?w=1080"
    )
)

To add image url with header:

// Image URL with header
val headers = mutableMapOf<String, String>()
headers["header_key"] = "header_value"

list.add(
    CarouselItem(
        imageUrl = "https://images.unsplash.com/photo-1534447677768-be436bb09401?w=1080",
        headers = headers
    )
)

Image Carousel Attributes

Here are all attributes of this library:

<com.limerse.slider.ImageCarousel
    android:id="@+id/carousel"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    app:showTopShadow="true"
    app:topShadowAlpha="0.6"
    app:topShadowHeight="32dp"

    app:showBottomShadow="true"
    app:bottomShadowAlpha="0.6"
    app:bottomShadowHeight="64dp"

    app:showCaption="true"
    app:captionMargin="0dp"
    app:captionTextSize="14sp"

    app:showIndicator="true"
    app:indicatorMargin="0dp"

    app:imageScaleType="centerCrop"

    app:carouselBackground="#00000000"
    app:imagePlaceholder="@drawable/ic_picture"

    app:carouselPadding="0dp"
    app:carouselPaddingBottom="0dp"
    app:carouselPaddingEnd="0dp"
    app:carouselPaddingStart="0dp"
    app:carouselPaddingTop="0dp"

    app:showNavigationButtons="true"
    app:previousButtonLayout="@layout/previous_button_layout"
    app:previousButtonId="@id/btn_previous"
    app:previousButtonMargin="4dp"
    app:nextButtonLayout="@layout/next_button_layout"
    app:nextButtonId="@id/btn_next"
    app:nextButtonMargin="4dp"

    app:carouselType="BLOCK"
    app:carouselGravity="CENTER"

    app:scaleOnScroll="false"
    app:scalingFactor="0.15"
    app:autoWidthFixing="true"
    app:autoPlay="false"
    app:autoPlayDelay="3000"
    app:infiniteCarousel="true"
    app:touchToPause="true" />