How to make an item in a ScrollView be positioned in the center of the screen

Question

I have three CardView in a HorizontalScrollView and I want the middle one to be in the center of the screen (as if the user had swiped to get to it). How do I do that in XML or programmatically?

XML layout:

<HorizontalScrollView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="16dp"
    android:scrollbars="none"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/culture_toolbar">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <androidx.cardview.widget.CardView
            android:id="@+id/one"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_marginEnd="10dp"
            app:cardCornerRadius="12dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/beach_bg_placeholder" />

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/two"
            android:layout_width="300dp"
            android:layout_height="300dp"
            app:cardCornerRadius="12dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/beach_bg_placeholder" />

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/three"
            android:layout_width="300dp"
            android:layout_height="300dp"
            app:cardCornerRadius="12dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/beach_bg_placeholder" />

        </androidx.cardview.widget.CardView>
    </LinearLayout>
</HorizontalScrollView>

This is the result I'm going for:

Answer 1

How do i do that in xml preferably?

AFAIK using XML only that is not possible

How to make an item in a ScrollView be positioned in the center of the screen

I would suggest that you should use carousel layout instead of using HorizontalScrollView

You can make carousel layout using ViewPager and using RecyclerView

Check out below good articles for carousel layout

• Carousel Layout with ViewPager in Android

• Android ViewPager - Show preview of page on left and right

• Carousel Layout with RecyclerView

• Making Carousel Layout in Android
• CarouselLayoutManager for RecyclerView
• Start my RecyclerView Horizontal Carousel from the center item

Answer 2

Have you tried to use a layout_gravity in the LinearLayout?

android:layout_gravity="center"

Before adding layout_gravity:center
See the result (Blueprint view):

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

After adding layout_gravity:center
See the result (Blueprint view):

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center">