Make carousel card fullScreen on click

Viewed 83

I have a carousel and I want to make the current card fullscreen on click. When the current card is fullscreen some additional data should be visible. I am new to Android and I have the feeling that I am doing something wrong. I have already tried to implement it via different onClickListeners and Animations (because i also need a smooth transition), but nothing worked.

Does anyone has a suggestion on how to achieve this? (please see my carousel layout implementation below)

<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/motion_layout_carousel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            app:layout_constraintTop_toBottomOf="@+id/player_image_with_elements"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layoutDescription="@xml/demo_020_carousel_scene">

            <LinearLayout
                android:id="@+id/imageView0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"
                android:orientation="vertical"
                android:scaleType="centerCrop"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/imageView1"
                app:layout_constraintTop_toTopOf="parent">

                <include
                    layout="@layout/match_statistic"
                    android:background="@drawable/layout_rounded"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"
                android:orientation="vertical"
                android:scaleType="centerCrop"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/imageView2"
                app:layout_constraintTop_toTopOf="parent">

                <include
                    layout="@layout/match_statistic"
                    android:background="@drawable/layout_rounded"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:scaleType="centerCrop"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <include
                    layout="@layout/match_statistic"
                    android:background="@drawable/layout_rounded"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/imageView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:orientation="vertical"
                android:scaleType="centerCrop"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@+id/imageView2"
                app:layout_constraintTop_toTopOf="parent">

                <include
                    layout="@layout/match_statistic"
                    android:background="@drawable/layout_rounded"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/imageView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:orientation="vertical"
                android:scaleType="centerCrop"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@+id/imageView3"
                app:layout_constraintTop_toTopOf="parent">

                <include
                    layout="@layout/match_statistic"
                    android:background="@drawable/layout_rounded"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_begin="50dp" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guideline2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_end="50dp" />

            <androidx.constraintlayout.helper.widget.Carousel
                android:id="@+id/carousel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:carousel_backwardTransition="@+id/backward"
                app:carousel_firstView="@+id/imageView2"
                app:carousel_forwardTransition="@+id/forward"
                app:carousel_nextState="@+id/next"
                app:carousel_previousState="@+id/previous"
                app:carousel_touchUpMode="carryVelocity"
                app:carousel_touchUp_dampeningFactor="0.8"
                app:constraint_referenced_ids="imageView0,imageView1,imageView2,imageView3,imageView4" />
        </androidx.constraintlayout.motion.widget.MotionLayout>
0 Answers
Related