如何创建这样的背景形状

Question

I have cardview which is currently looks like this. These cardviews are inside list view . I need to create like this?

Is it possible to get any help please.

EDIT

Thanks Marsad & Zain for the answer. However, I could manage to get this. But I am unable to remove the corner background under shape from the view as pointed below.

Also how about this view is it possible to get a glass view? Full xml is updated.

    <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout style="@style/clock_item" 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">
<androidx.cardview.widget.CardView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardElevation="0dp">
        <RelativeLayout style="@style/clock_item"
            android:background="?android:attr/activatedBackgroundIndicator"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            android:visibility="gone"
            android:layout_marginRight="5dp">
            <include layout="@layout/clock_item_merge" />
        </RelativeLayout>

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

        <View
            android:id="@+id/top_view"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@drawable/top_view"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:background="#F07971"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/top_view" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/bottom_view"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@drawable/bottom_view"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/top_view">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:text="Some Text"
                android:textSize="22sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginEnd="8dp"
                android:background="@drawable/icon_nexcloud"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>
</RelativeLayout>

Answer 1

You can do something like this

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid
        android:color="#2196F3"/>


    <corners
        android:topLeftRadius="20dp"
        android:bottomRightRadius="20dp"/>

</shape>

Update

Here is the updated background drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:height="300dp">

        <shape>
            <solid android:color="#EE7A72" />

            <corners
                android:bottomRightRadius="20dp"
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp" />

        </shape>

    </item>

    <item
        android:height="100dp"
        android:top="200dp">

        <shape>

            <solid android:color="#3197F4" />

            <corners
                android:bottomRightRadius="20dp"
                android:topLeftRadius="20dp" />

        </shape>

    </item>

</layer-list>

To remove the cardview corners background

android:backgroundTint="@android:color/transparent"

Answer 2

This is the CardView layout using a couple of drawables and one vector drawable

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="20dp"
    app:cardElevation="5dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent">

        <View
            android:id="@+id/top_view"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@drawable/top_view"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/top_view2"
            android:layout_width="300dp"
            android:layout_height="100dp"
            android:layout_marginEnd="20dp"
            android:background="@drawable/ic_eclipse"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:background="#F4A896"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/top_view" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/bottom_view"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@drawable/bottom_view"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/top_view">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:text="Some Text"
                android:textSize="28sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginEnd="8dp"
                android:background="@drawable/ic_play_circle_outline_black_24dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

bottom_view.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#2196F3" />


    <corners
        android:bottomRightRadius="20dp"
        android:topLeftRadius="20dp" />

</shape>

top_view.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>

            <solid android:color="#F4A896" />

            <corners
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp" />

        </shape>
    </item>

    <item android:left="200dp">
        <shape>

            <solid android:color="#F2927B" />

            <corners
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp" />

        </shape>

    </item>

</layer-list>

ic_eclipse.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="178dp"
    android:height="63dp"
    android:viewportWidth="178"
    android:viewportHeight="63">
  <path
      android:pathData="M177.896,62.809C177.896,40 177.896,3.121 177.896,1.311C177.896,-0.5 135.646,1.311 98.146,1.311C76,1.311 70.793,1.997 37,1.997C5.793,28 0.646,40 0.646,62.809C0.646,62.809 61.534,62.809 98.146,62.809C112.107,62.809 133.896,62.809 133.896,62.809H177.896Z"
      android:fillColor="#F2927B"/>
</vector>

Result now: