how to bend card view in android studio

54 Views Asked by At

i want help in achieving this design. i have tried adding cardview but not able to acheive this feature. https://cdn.dribbble.com/users/9936884/screenshots/19415785/media/6fdab1f02a1e7f7ce4a2db00fd47875c.png

my current achivement

<?xml version="1.0" encoding="utf-8"?>
<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="@color/Screen_Background"
    tools:context="com.app.movies.MovieDetails"
    android:id="@+id/movie_details">

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <FrameLayout
                android:id="@+id/frameLayout"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <ImageView
                    android:id="@+id/Movie_Details_Banner"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:adjustViewBounds="true"
                    android:scaleType="centerCrop" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <View
                        android:id="@+id/view2"
                        android:layout_width="match_parent"
                        android:layout_height="150dp"
                        android:layout_gravity="top"
                        android:background="@drawable/banner_gradiant"
                        app:layout_constraintBottom_toTopOf="@+id/guideline10"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <View
                        android:id="@+id/view"
                        android:layout_width="match_parent"
                        android:layout_height="150dp"
                        android:layout_gravity="bottom"
                        android:background="@drawable/banner_gradiant"
                        android:rotation="180"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="@+id/guideline10" />


                </LinearLayout>
            </FrameLayout>

            <androidx.cardview.widget.CardView
                android:id="@+id/cardView12"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginStart="15dp"
                android:layout_marginTop="280dp"
                android:layout_marginEnd="15dp"
                android:backgroundTint="@color/Red_Smooth"
                android:clickable="true"
                android:foreground="?attr/selectableItemBackground"
                app:cardCornerRadius="8dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <LinearLayout
                    android:id="@+id/Play_Movie"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center">

                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="match_parent"
                        android:src="@drawable/play_button_icon" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:gravity="center"
                        android:text="Play"
                        android:textColor="@color/white"
                        android:textSize="17sp"
                        android:textStyle="bold" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>

            <ImageView
                android:id="@+id/Movie_Details_Back"
                android:layout_width="35dp"
                android:layout_height="25dp"
                android:layout_marginStart="10dp"
                android:layout_marginTop="5dp"
                android:clickable="true"
                android:rotation="180"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/advance_arrow" />

            <LinearLayout
                android:id="@+id/reportButton"
                android:layout_width="wrap_content"
                android:layout_height="25dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/report_item_bg"
                android:gravity="center"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <ImageView
                    android:layout_width="13dp"
                    android:layout_height="13dp"
                    android:src="@drawable/info"
                    android:layout_marginStart="5dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:text="Report"
                    android:textColor="@color/white"
                    android:textSize="10sp"
                    android:gravity="center"
                    android:textStyle="bold"
                    android:layout_marginEnd="5dp"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/commentBtn"
                android:layout_width="35dp"
                android:layout_height="25dp"
                android:layout_marginTop="5dp"
                android:background="@drawable/comment_tag_bg"
                android:gravity="center"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/reportButton"
                android:visibility="gone">

                <ImageView
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:src="@drawable/ic_message" />
            </LinearLayout>

            <androidx.cardview.widget.CardView
                android:id="@+id/cardView13"
                android:layout_width="140dp"
                android:layout_height="200dp"
                android:layout_marginStart="15dp"
                app:cardCornerRadius="10dp"
                app:layout_constraintBottom_toTopOf="@+id/cardView12"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/Movie_Details_Back">

                <ImageView
                    android:id="@+id/Movie_Details_Poster"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="fitXY">

                </ImageView>

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <LinearLayout
                        android:id="@+id/Premium_Tag"
                        android:layout_width="35dp"
                        android:layout_height="25dp"
                        android:layout_marginTop="20dp"
                        android:background="@drawable/premium_tag_bg"
                        android:gravity="center"
                        android:visibility="gone"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="parent">

                        <ImageView
                            android:layout_width="18dp"
                            android:layout_height="18dp"
                            android:src="@drawable/crown" />
                    </LinearLayout>
                </androidx.constraintlayout.widget.ConstraintLayout>
            </androidx.cardview.widget.CardView>

            <TextView
                android:id="@+id/Title_TextView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:layout_marginTop="20dp"
                android:text="Title"
                android:textColor="@color/white"
                android:textSize="20dp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="@+id/frameLayout"
                app:layout_constraintStart_toEndOf="@+id/cardView13"
                app:layout_constraintTop_toTopOf="@+id/cardView13">

            </TextView>

            <TextView
                android:id="@+id/ReleaseDate_TextView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="0000-00-00"
                android:textColor="@color/Gray"
                android:textSize="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@+id/Title_TextView"
                app:layout_constraintTop_toBottomOf="@+id/Title_TextView">

            </TextView>

            <TextView
                android:id="@+id/Runtime_TextView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="0min"
                android:textColor="@color/Gray"
                android:textSize="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@+id/Title_TextView"
                app:layout_constraintTop_toBottomOf="@+id/ReleaseDate_TextView">

            </TextView>

            <LinearLayout
                android:id="@+id/ratingLayout"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@+id/Title_TextView"
                app:layout_constraintTop_toBottomOf="@+id/Runtime_TextView"
                android:orientation="horizontal"
                android:gravity="center_vertical"
                android:visibility="gone">
                <ImageView
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:src="@drawable/ic_star"/>

                <TextView
                    android:id="@+id/rating"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="2dp"
                    android:layout_gravity="center_vertical"
                    android:text="0"
                    android:textAlignment="gravity"
                    android:textColor="#fec007"
                    android:textSize="13sp" />
            </LinearLayout>

            <TextView
                android:id="@+id/Genre_TextView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="Genre"
                android:textColor="@color/Gray"
                android:textSize="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@+id/Title_TextView"
                app:layout_constraintTop_toBottomOf="@+id/ratingLayout">

            </TextView>

            <TextView
                android:id="@+id/textView17"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:layout_marginTop="15dp"
                android:layout_marginEnd="15dp"
                android:text="Overview"
                android:textColor="@color/white"
                android:textSize="25sp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="1.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/cardView15" />

            <TextView
                android:id="@+id/Description_TextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:layout_marginTop="5dp"
                android:layout_marginEnd="15dp"
                android:text="---"
                android:textColor="@color/Gray"
                android:textSize="15sp"
                android:textStyle="normal"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView17" />

            <androidx.cardview.widget.CardView
                android:id="@+id/cardView14"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginStart="10dp"
                android:layout_marginTop="15dp"
                android:layout_marginEnd="10dp"
                android:foreground="@drawable/movie_details_line_bg"
                app:cardCornerRadius="10dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/cardView12" />

            <androidx.cardview.widget.CardView
                android:id="@+id/cardView15"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginStart="10dp"
                android:layout_marginTop="65dp"
                android:layout_marginEnd="10dp"
                android:foreground="@drawable/movie_details_line_bg"
                app:cardCornerRadius="10dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/cardView14" />

            <androidx.appcompat.widget.LinearLayoutCompat
                android:id="@+id/linearLayoutCompat"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginStart="5dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="5dp"
                android:layout_marginBottom="10dp"
                android:gravity="center"
                app:layout_constraintBottom_toTopOf="@+id/cardView15"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/cardView14">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:backgroundTint="@color/Screen_Background"
                    android:orientation="horizontal">

                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/Trailer_Layout"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:clickable="true"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toStartOf="@+id/Favourite_Layout"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent">

                        <ImageView
                            android:id="@+id/Trailer_Icon"
                            android:layout_width="match_parent"
                            android:layout_height="0dp"
                            android:src="@drawable/trailer_icon"
                            app:layout_constraintBottom_toTopOf="@+id/textView1301"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toTopOf="parent" />

                        <TextView
                            android:id="@+id/textView1301"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Trailer"
                            android:textColor="@color/white"
                            android:textSize="15sp"
                            app:layout_constraintBottom_toBottomOf="parent"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@+id/Trailer_Icon" />
                    </androidx.constraintlayout.widget.ConstraintLayout>

                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/Favourite_Layout"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toStartOf="@+id/downloadLayout"
                        app:layout_constraintTop_toTopOf="parent">

                        <ImageView
                            android:id="@+id/Favourite_Icon"
                            android:layout_width="match_parent"
                            android:layout_height="0dp"
                            android:src="@drawable/heart_favorite"
                            app:layout_constraintBottom_toTopOf="@+id/textView1300"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toTopOf="parent" />

                        <TextView
                            android:id="@+id/textView1300"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Favourite"
                            android:textColor="@color/white"
                            android:textSize="15sp"
                            app:layout_constraintBottom_toBottomOf="parent"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@+id/Favourite_Icon" />
                    </androidx.constraintlayout.widget.ConstraintLayout>

                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/downloadLayout"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toStartOf="@+id/Share_IMG_Btn"
                        app:layout_constraintTop_toTopOf="parent">

                        <ImageView
                            android:id="@+id/Download_Icon"
                            android:layout_width="match_parent"
                            android:layout_height="0dp"
                            android:src="@drawable/download_icon"
                            app:layout_constraintBottom_toTopOf="@+id/textView13"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toTopOf="parent" />

                        <TextView
                            android:id="@+id/textView13"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Download"
                            android:textColor="@color/white"
                            android:textSize="15sp"
                            app:layout_constraintBottom_toBottomOf="parent"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@+id/Download_Icon" />
                    </androidx.constraintlayout.widget.ConstraintLayout>

                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/Share_IMG_Btn"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="parent">

                        <ImageView
                            android:id="@+id/imageView40"
                            android:layout_width="match_parent"
                            android:layout_height="0dp"
                            android:src="@drawable/share_arrow"
                            app:layout_constraintBottom_toTopOf="@+id/textView130"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toTopOf="parent" />

                        <TextView
                            android:id="@+id/textView130"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Share"
                            android:textColor="@color/white"
                            android:textSize="15sp"
                            app:layout_constraintBottom_toBottomOf="parent"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@+id/imageView40" />
                    </androidx.constraintlayout.widget.ConstraintLayout>
                </androidx.constraintlayout.widget.ConstraintLayout>

            </androidx.appcompat.widget.LinearLayoutCompat>

            <ImageView
                android:id="@+id/custom_banner_ad"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:visibility="gone"
                android:layout_marginTop="10dp"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/Description_TextView" />
            <RelativeLayout
                android:id="@+id/ad_View_Layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/custom_banner_ad" />

            <LinearLayout
                android:id="@+id/castLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:visibility="gone"
                android:layout_marginTop="5dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/ad_View_Layout">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <androidx.cardview.widget.CardView
                        android:layout_width="5dp"
                        android:layout_height="40dp"
                        android:backgroundTint="@color/Red_Smooth"
                        app:cardCornerRadius="10dp"
                        app:cardElevation="10dp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="5dp"
                        android:text="Top cast"
                        android:textAlignment="viewStart"
                        android:textColor="@color/white"
                        android:textSize="25sp"
                        android:textStyle="bold" />
                </LinearLayout>
                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/castListRecyclerView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="5dp"/>

            </LinearLayout>

     

i just want idea how to achieve that curve shape. i dont want coding. i can understand that they are using cardview and behind is the imageview

0

There are 0 best solutions below