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>

- Taslim Oseni

---

你能发布btn_gradient以及你的结果图像吗？ - Luca Nicoletti

@LucaNicoletti 我觉得这是不必要的，因为除了 CardView 半径消失之外，一切都正常，我怀疑这是由于 TextView 的影响。尽管如此，我已经更新了问题。谢谢。 - Taslim Oseni

@TaslimOseni，你解决了吗？ - Jithish P N

是的，Micho的答案对我有用。如果这对你不起作用，请告诉我。我有一个更好的方法的想法。 - Taslim Oseni

Answer 1

<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和gradient radius应该是相同的尺寸

- jagadishlakkurcom jagadishlakk

---

尽管这段代码片段可能回答了问题，但包括解释为什么以及如何帮助解决问题可以提高您的答案质量和持久性。请参阅如何撰写好答案？ - ammportal

Answer 2

如果您不介意我问一下，您是否在测试/运行早于Lollipop版本的Android设备上？ 您的代码似乎按照您所期望的方式工作（带有渐变的圆角显示），除了在Android 4上。

为了在早期的Android设备上实现所需的效果，您可以在@drawable/btn_gradient文件中添加<corners android:radius="4dp" />，（您需要将角半径设置为与 CardView 的 cardCornerRadius 相匹配）。

- Michio

Answer 3

我尝试动态地将渐变集成到卡片视图中，但遇到了问题，即在xml文件中设置的视图属性上设置的圆角半径受到影响，例如app:cardCornerRadius="@dimen/margin_20"。

解决方案：

• 在卡片视图上实现渐变。我从API获取了2个渐变，将从左到右合并。

   `    try {
               val startColor = sample?.gradient1
               val endColor = sample?.gradient2
               val colors =
                   intArrayOf(Color.parseColor(startColor), 
                   Color.parseColor(endColor))
               val gradientDrawable = GradientDrawable(
                   GradientDrawable.Orientation.LEFT_RIGHT, colors
               )
  
               myCardView.background = gradientDrawable
           } catch (e: Exception) {
               // 默认颜色为白色
               myCardView.setBackgroundColor(
                   ContextCompat.getColor(
                       mContext,
                       R.color.white
                   )
               )
           }`
  

• 现在运行代码后，卡片视图呈现出渐变值，但问题出现在静态设置的xml中的卡片视图的圆角半径上。圆角半径被删除了。为了解决这个问题，我们只需设置渐变可绘制对象的半径，该可绘制对象以渐变形式保持可绘制颜色。在设置背景之前添加以下3行即可。

    gradientDrawable.colors = colors
    // 在渐变可绘制对象上设置圆角半径
    gradientDrawable.cornerRadius = 40f
    myCardView.background = gradientDrawable
  

最终代码与渐变配置和设置圆角为：

         try {
                val startColor = sample?.gradient1
                val endColor = sample?.gradient2
                val colors =
                    intArrayOf(Color.parseColor(startColor), 
                    Color.parseColor(endColor))
                val gradientDrawable = GradientDrawable(
                    GradientDrawable.Orientation.LEFT_RIGHT, colors
                )
                gradientDrawable.colors = colors
                // setting the corner radius on gradient drawable
                gradientDrawable.cornerRadius = 40f
                myCardView.background = gradientDrawable
                
                myCardView.background = gradientDrawable
            } catch (e: Exception) {
                // default color to white
                myCardView.setBackgroundColor(
                    ContextCompat.getColor(
                        mContext,
                        R.color.white
                    )
                )
            }`

为了更好地查看代码，请参考以下截图：

希望这能有所帮助。编程愉快 :) 乾杯！

- Abhijeet

Answer 4

将这行移动

android:background="@drawable/btn_gradient"

对于 CardView 对象

更新

我的错误：

在 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">

- Luca Nicoletti

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://istack.dev59.com/iewIm.webp


  [1]: https://istack.dev59.com/pHIlW.webp

- Aqif

Answer 6

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

总之，首先在drawable中创建一个渐变背景XML文件。 然后将其分配给app:cardBackgroundColor，如下所示：

app:cardBackgroundColor="@drawable/gradient_background"

如果您不知道如何创建gradient_background.xml文件，请右键单击drawable目录，创建新的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>

- farzad chatrsimab

---

感谢您的努力，但我认为您没有正确阅读我的问题。这样不行。cardBackgroundColor 不能接受可绘制对象参数。 - Taslim Oseni

尝试将 CardView 的高度设置为 wrap content，并将 TextView 的高度设置为 44dp。 - farzad chatrsimab

您还可以将LinearLayout添加到cardView中，将高度和宽度设置为match parent，设置渐变背景，然后在LinearLayout中添加textview。 - farzad chatrsimab