Horizontal recyclerview with snaphelper, how to center first and last element?

Question

I've made a little sample of something I'm trying to do in a real app, and I can't figure out how to solve my issue. The current solution looks like this.

So I have a vertical list of movie categories, where within each genre, I have a horizontal list of movies. The first row, is showing The Exorcist as the first element, but it's not centered. The second row in Action, shows how it looks when I've scrolled a bit to the right. Last row is showing how the end of the row looks like. I'd like to have the first and last of the rows, to be centered as well when they're "selected".

My main activity looks like this:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/moviesListRecyclerView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:visibility="visible"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:listitem="@layout/movie_category_item_view" />

</androidx.constraintlayout.widget.ConstraintLayout>

The movie_category_item_view looks like this:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/movieListLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">

<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/movieCategoryTitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="20dp"
    android:layout_marginTop="40dp"
    android:textColor="@android:color/black"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Horror" />

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/moviesRecyclerView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:orientation="horizontal"
    android:visibility="visible"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/movieCategoryTitle"
    tools:listitem="@layout/movie_horizontal_item_view" />

</androidx.constraintlayout.widget.ConstraintLayout>

And the movie_horizontal_item_view like this:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical">

<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/movieTitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:textColor="@android:color/black"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Horror" />

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/image"
    android:layout_width="237dp"
    android:layout_height="209dp"
    android:background="@android:color/black"
    android:src="@drawable/ic_launcher_foreground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/movieTitle"
    tools:src="@drawable/ic_launcher_foreground" />

</androidx.constraintlayout.widget.ConstraintLayout>

Hopefully what I'm asking for makes sense, In case you want to try it out for yourself and see what I mean, it can be found on github here

Answer 1

use carouselview.CarouselView

 <alirezat775.lib.carouselview.CarouselView
                android:id="@+id/carousel_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"/>

the adapter

class MyAdapter(var ctx: Context) : CarouselAdapter() {

    private var vh: CarouselViewHolder? = null

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CarouselViewHolder {
        val inflater = LayoutInflater.from(parent.context)
        val v = inflater.inflate(R.layout.home_list_item, parent, false)
        vh = MyViewHolder(v)
        return vh as MyViewHolder
    }

    override fun onBindViewHolder(holder: CarouselViewHolder, position: Int) {

    }

    inner class MyViewHolder(itemView: View) : CarouselViewHolder(itemView) {

    }

}

the activity

class MainActivity : AppCompatActivity() {

    var carousel: Carousel? = null
    val adapter = MyAdapter(this)

    override fun onCreate(savedInstanceState: Bundle?) {


        carousel = Carousel(this, carousel_view, adapter)
        carousel!!.setOrientation(CarouselView.HORIZONTAL, false)
        //  carousel!!.autoScroll(true, 5000, true)
        //    carousel!!.scaleView(true)

    }

}