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 asMainActivity).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:

classPageAdapter : CarouselAdapter<PageAdapter.ViewHolder>() {
privatevar data = mutableListOf<Page>()
funsetData(data:MutableList<Page>) {
this.data.clear()
this.data.addAll(data)
notifyDataSetChanged()
}
data classPage(valimageRes:Int, valcontent:String)
innerclassViewHolder(view:View) : RecyclerView.ViewHolder(view) {
privateval backgroundImageView = itemView.findViewById<ImageView>(R.id.view_background)
privateval contentTextView = itemView.findViewById<TextView>(R.id.text_view_content)
funbind(page:Page) {
backgroundImageView.clipToOutline =true
backgroundImageView.setImageResource(page.imageRes)
contentTextView.text = page.content
}
}
overridefunonCreatePageViewHolder(parent:ViewGroup, viewType:Int): ViewHolder {
returnViewHolder(
LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)
)
}
overridefunonBindPageViewHolder(holder:ViewHolder, position:Int) {
holder.bind(data[position])
}
overridefungetPageCount(): 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 asMainActivity).adapterData)
indicator.itemCount = pageAdapter.pageCount

Attributes

Attribute	Description	Type	Example Value
carouselMode	Set the carousel view mode. The accepted values include snap and preview, the default value is snap.	enum	snap or preview
carouselPreviewSide	Set the carousel view preview side.	enum	sides or right
carouselPreviewSideBySideStyle	Set the side by side preview style.	enum	normal or scale
carouselPreviewScaleFactor	Set the side by side preview scale factor.	float	0.2
carouselPreviewOffset	Set carousel preview offset.	Dimension	30dp
carouselMargin	Set carousel item margin.	Dimension	10dp

Screenshots

Change Log

Change Log

License

MIT