CarouselView

A carousel widget for Android based on ViewPager2.

Download

dependencies {
    implementation 'io.github.vejei.carouselview:carouselview:1.0.0-alpha'
}

Usage

Basic

Add CarouselView to your layout:

<io.github.vejei.carouselview.CarouselView
    android:id="@+id/carousel_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:carouselMode="preview"
    app:carouselPreviewSide="sides"
    app:carouselPreviewOffset="30dp"
    app:carouselPreviewSideBySideStyle="scale"
    app:carouselMargin="10dp"
    android:layout_marginTop="8dp"/>

Or add it programmatically:

addButton.setOnClickListener {
    val carouselView = CarouselView(context).apply {
        mode = CarouselView.Mode.PREVIEW
        previewSide = CarouselView.PreviewSide.SIDE_BY_SIDE
        sideBySideStyle = CarouselView.PreviewSideBySideStyle.SCALE
        previewOffset = offset
        itemMargin = pageMargin
    }
    carouselView.layoutParams = LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT)


    carouselView.adapter = PageAdapter().apply {
        setData((activity as MainActivity).adapterData)
    }

    view.findViewById<LinearLayout>(R.id.container).addView(carouselView)
}

And setup in your Fragment or Activity:

val carouselView = view.findViewById<CarouselView>(R.id.carousel_view)

val pageAdapter = PageAdapter()
carouselView.adapter = pageAdapter

// Calling the start method to start carousel by passing in the interval.
carouselView.start(3, TimeUnit.SECONDS)

PageAdapter example:

class PageAdapter : CarouselAdapter<PageAdapter.ViewHolder>() {
    private var data = mutableListOf<Page>()

    fun setData(data: MutableList<Page>) {
        this.data.clear()
        this.data.addAll(data)
        notifyDataSetChanged()
    }

    data class Page(val imageRes: Int, val content: String)

    inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        private val backgroundImageView = itemView.findViewById<ImageView>(R.id.view_background)
        private val contentTextView = itemView.findViewById<TextView>(R.id.text_view_content)

        fun bind(page: Page) {
            backgroundImageView.clipToOutline = true
            backgroundImageView.setImageResource(page.imageRes)
            contentTextView.text = page.content
        }
    }

    override fun onCreatePageViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(
            LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)
        )
    }

    override fun onBindPageViewHolder(holder: ViewHolder, position: Int) {
        holder.bind(data[position])
    }

    override fun getPageCount(): Int {
        return data.size
    }
}

Setup indicator

If you need to set indicator for CarouselView, you can use ViewPagerIndicator, the example:

val carouselView = view.findViewById<CarouselView>(R.id.carousel_view)
val indicator = view.findViewById<RectIndicator>(R.id.indicator)

val pageAdapter = PageAdapter()

carouselView.adapter = pageAdapter

indicator.setWithViewPager2(carouselView.viewPager2, false)

pageAdapter.setData((activity as MainActivity).adapterData)
indicator.itemCount = pageAdapter.pageCount

Attributes

Screenshots

Change Log

Change Log

License

MIT