CardView：如何在保持半径的同时添加渐变背景

Question

我想用 CardView 重新创建下图。为此，我创建了一个渐变文件 (btn_gradient.xml)，然后继续创建 CardView。

CardView 实现：

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:layout_margin="25dp"
        app:cardElevation="0dp"
        app:cardCornerRadius="4dp"
        app:cardPreventCornerOverlap="false">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="@drawable/btn_gradient"
            android:text="Create Account"
            android:textColor="#000000"
            android:textStyle="bold"
            android:textAllCaps="false"/>


    </android.support.v7.widget.CardView>

除半径消失外，一切正常，这不是我想要的。有没有办法可以直接在 CardView 上设置渐变？ cardBackgroundColor 属性只接受颜色，不接受可绘制对象。

如有任何帮助，我们将不胜感激。

附录：
根据要求，这是我的 btn_gradient.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:type="linear"
    android:angle="0"
    android:startColor="#ffc200"
    android:endColor="#fca10b" />
</shape>

Answer 1

移动这条线

android:background="@drawable/btn_gradient"

到CardView对象

更新

我的缺点：

在里面放置一个布局来包装 .

的内容

在这种情况下，我会选择这样的 <FrameLayout>：

<androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLyout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/btn_gradient">

Answer 2

不要在 XML 文件中使用 android:background 属性。请改用 app:cardBackground。

最后，首先在 drawables 中创建一个渐变背景 XML 文件。然后将其分配给 app:cardBackground 颜色，如下所示：

app:cardBackgroundColor="@drawable/gradient_background"

如果您不知道如何创建 gradient_background.xml，请单击 drawables 目录，创建新的 xml 文件并粘贴下面的代码。

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"  
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="@color/secondaryColor"
    android:endColor="@color/primaryColor"
    android:angle="90"/>
</shape>

Answer 3

如果我可能会问，你是否有机会 testing/running 在 pre-lollipop Android 设备上？您的代码似乎可以按您的意愿工作（弯曲的角显示渐变）except on Android 4.

要在棒棒糖之前的设备上获得所需的结果，您可以将 <corners android:radius="4dp" /> 添加到 @drawable/btn_gradient 文件，（您必须设置圆角半径以匹配 CardView的 cardCornerRadius.

Answer 4

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/_10sdp"
    app:cardCornerRadius="@dimen/_10sdp"
    app:cardElevation="@dimen/_1sdp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="@drawable/gradient_16"
        android:padding="@dimen/_6sdp">

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

和渐变就像

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#5B86E5"
        android:endColor="#36D1DC"
        android:angle="180" />

    <corners
        android:radius="10dp">
    </corners>
</shape>

CardView card_radius 和渐变半径应该是相同的维度

Answer 5

        <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#004e92"
        android:endColor="#614385"
    
        android:angle="90" />
        <corners
            android:topRightRadius="10dp"
            android:bottomLeftRadius="10dp"
            android:bottomRightRadius="10dp"
            android:topLeftRadius="10dp">
    
        </corners>
    </shape>
    
    
    [![enter image description here][1]][1]
    
    <LinearLayout 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:orientation="vertical"
        android:layout_height="match_parent"
        android:background="@drawable/color"
        tools:context=".MainActivity">
    
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:orientation="vertical"
                android:layout_height="match_parent">
    
                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    app:cardCornerRadius="10dp"
                    android:layout_height="100dp">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:background="@drawable/cardcolor"
                        
                        android:layout_height="100dp">
    
                    </LinearLayout>
    
                </androidx.cardview.widget.CardView>
    
    
    
            </LinearLayout>
    
        </ScrollView>``
    
    </LinearLayout>
    [![enter image description here][1]][1]
    
    
      [1]: https://i.stack.imgur.com/iewIm.png


  [1]: https://i.stack.imgur.com/pHIlW.png

CardView：如何在保持半径的同时添加渐变背景

CardView: How do I add a gradient background while maintaining the radius

xml

android

android-cardview