我怎样才能创建这样的背景形状
How can I create a background shape like this
我有 cardview
,目前看起来像这样。这些 cardviews
在 list view
里面。
我需要这样创建吗?
请问是否可以得到任何帮助。
编辑
感谢 Marsad 和 Zain 的回答。但是,我可以设法得到这个。但是我无法从下面指出的视图中删除形状下的 corner background
。
另外这个view怎么样,可以用玻璃看吗?完整 xml
已更新。
<?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>
你可以这样做
<?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>
更新
这是更新后的背景可绘制对象
<?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>
删除卡片视图角背景
android:backgroundTint="@android:color/transparent"
这是使用几个可绘制对象和一个矢量可绘制对象的 CardView
布局
<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>
现在结果:
我有 cardview
,目前看起来像这样。这些 cardviews
在 list view
里面。
请问是否可以得到任何帮助。
编辑
感谢 Marsad 和 Zain 的回答。但是,我可以设法得到这个。但是我无法从下面指出的视图中删除形状下的 corner background
。
另外这个view怎么样,可以用玻璃看吗?完整 xml
已更新。
<?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>
你可以这样做
<?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>
更新
这是更新后的背景可绘制对象
<?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>
删除卡片视图角背景
android:backgroundTint="@android:color/transparent"
这是使用几个可绘制对象和一个矢量可绘制对象的 CardView
布局
<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>
现在结果: