Cardview角落背景不透明

Question

我有一个 CardView 支持小部件的自定义实现，但是当我将它包含在我的布局文件中时，我似乎无法使角落的背景透明。但是，如果我只是将 CardView 支持小部件放在我的布局文件中，它就会突然起作用。如何让我的自定义组件的边角透明？

这是我自定义实现 CardView 的布局文件：

view_card.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/view_card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Custom.Widget.CardView">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="@dimen/default_padding">

    <TextView
        android:id="@+id/view_mainText"
        style="@style/Custom.Widget.TextView.Header"
        android:textColor="@color/instruction_balloon_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/view_subText"
        android:textSize="@dimen/text_size_medium"
        android:textColor="@color/instruction_balloon_text"
        android:singleLine="false"
        android:text="Please remove white corners :-("
        android:textIsSelectable="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

styles.xml

<style name="Custom.Widget.CardView" parent="CardView">
    <item name="cardBackgroundColor">@color/card_backgroundColor</item>
    <item name="cardCornerRadius">12dp</item>
</style>

这是我的布局文件，其中包含两个 CardView。第一个有白角，第二个与 view_card.xml 布局基本相同，但没有白角（透明）。

example.xml

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

    <some.private.namespace.CardView
        android:id="@+id/custom_card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/default_margin" />

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/view_card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/default_margin"
        style="@style/Custom.Widget.CardView">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="@dimen/default_padding">

            <TextView
                android:id="@+id/view_mainText"
                style="@style/Custom.Widget.TextView.Header"
                android:textColor="@color/instruction_balloon_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/view_subText"
                android:textSize="@dimen/text_size_medium"
                android:textColor="@color/instruction_balloon_text"
                android:singleLine="false"
                android:text="I have no white corners :-)"
                android:textIsSelectable="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
    ... some other views
</LinearLayout>

更新 1

我尝试了 Just89 的解决方案，但是它会导致较低的 Android 版本崩溃。

 android.graphics.drawable.ColorDrawable cannot be cast to android.support.v7.widget.RoundRectDrawableWithShadow

经过快速搜索，我找到了以下 post。 android.graphics.drawable.ColorDrawable cannot be cast to android.support.v7.widget.RoundRectDrawableWithShadow

答案建议使用：setCardBackgroundColor设置背景颜色。然而，这将带回白色角落。

更新 2

接受的答案将解决这个问题，但它不是首选解决方案。我在创建导致这些白角的自定义 CardView 组件时犯了一个错误。检查答案看看我做错了什么。

Answer 1

您可以尝试将圆角视图嵌套在另一个 view/layout 中。这里的外部视图可以有一个透明的背景，这样即使内部的圆角在角落上留下space，也不会被看到，因为外部视图有一个透明的背景颜色。像这样：

<RelativeLayout>
android:background = "@color/transparent"
< some.private.namespace.CardView
android:margin="8dp"
.....
/>
</RelativeLayout>

Answer 2

看起来您正在从您的布局文件中创建自定义 CardView，因此

<some.private.namespace.CardView
        android:id="@+id/custom_card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/default_margin" />

您的 CardView 可能正在扩展某些内容（比如 LinearLayout）并且您可能正在该父视图中创建另一个子视图。因此，只需尝试使用

将卡片布局的直接父级设置为透明

setBackground();

可能有帮助。

Answer 3

在您的自定义实现中，在上下文可用的地方使用以下代码：

setBackgroundColor(ContextCompat.getColor(context, android.R.color.transparent));

编辑：

为低于 Lollipop 的 android 版本使用以下代码以避免上述崩溃。

  if (android.os.Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP){
     getBackground().setAlpha(0);
  } else {
     setBackgroundColor(ContextCompat.getColor(context, android.R.color.transparent);
  }

Answer 4

将新样式添加到 styles.xml 类似这样的文件中：

<style name="CardViewRadius">
    <item name="cardBackgroundColor">@color/colorGray</item>
    <item name="cardCornerRadius">18dp</item>
</style>

并使用：

<android.support.v7.widget.CardView
        style="@style/CardViewRadius"
        android:layout_marginTop="15dip"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"/>

结果：

Answer 5

几年后我得出结论，我在创建复合组件时犯了一个根本性错误。

制作扩展 android.support.v7.widget.CardView 的复合组件时，膨胀的布局 xml 不应包含 CardView。基本上，您只需将一个 CardView 添加到另一个 CardView，这将导致我的自定义 CardView 后面出现白角。

将解决这个问题。然而，这并不是完美的解决方案。

有两种方法可以解决真正的问题：

复合视图扩展 android.support.v7.widget.CardView 布局 xml 不包含 android.support.v7.widget.CardView 而是一个 LinearLayout 作为根.样式必须在 class.
复合视图扩展 LinearLayout，布局 xml 包含 android.support.v7.widget.CardView 作为根。

我选择了第一个解决方案来解决这个问题。我希望这能帮助犯同样错误的人。

Answer 6

我在较暗的 area/background 中遇到了类似的问题，其中弯曲的角如屏幕截图所示。。

我通过将 cardElevation 设置为 0dp 来解决。如果您需要阴影，这可能对您不起作用。

app:cardElevation="0dp"

Cardview角落背景不透明

Cardview corner background not transparent

android

android-custom-view

android-layout

android-support-library

android-cardview