CardView 角部显示白色像素？

Question

我正在尝试创建一个自定义“警告”对话框，我希望其中有圆角。因此，我将整个布局放入 CardView 中，并将对话框的布局设置为此布局。

但是，在深色背景上，例如默认的 Android 对话框背景，我似乎在对话框的角落处出现白色像素。

我已经尝试过here建议的内容，设置

app:cardBackgroundColor="@color/transparent"

，但没有什么区别。

我的对话框的布局如下（与屏幕截图不同，但按钮、bakcground 和 CardView 是相同的）：

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

<androidx.cardview.widget.CardView 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:id="@+id/error_cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/error_dialog_margin"
    android:layout_marginEnd="@dimen/error_dialog_margin"
    app:cardCornerRadius="@dimen/error_dialog_corner_radius"
    app:cardElevation="@dimen/error_dialog_elevation"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true">

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

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/error_icon"
            style="@style/ErrorViewTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/default_outer_margin"
            android:adjustViewBounds="true"
            android:scaleType="fitXY"
            android:src="@drawable/error_icon"
            android:tint="@color/redColor" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/error_title"
            style="@style/ErrorViewTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/default_outer_margin"
            android:layout_marginTop="@dimen/default_margin"
            android:layout_marginEnd="@dimen/default_outer_margin"
            android:ellipsize="end"
            android:gravity="center_horizontal"
            android:maxLines="2"
            android:text="@string/something_went_wrong" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/error_message"
            style="@style/ErrorViewMessage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/default_outer_margin"
            android:layout_marginTop="@dimen/default_margin"
            android:layout_marginEnd="@dimen/default_outer_margin"
            android:gravity="center"
            android:minHeight="55dp"
            tools:text="@string/try_again_later" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/default_margin"
            android:background="@color/blueColor">

            <androidx.appcompat.widget.AppCompatButton
                android:id="@+id/error_ok_button"
                style="@style/PrimaryButton"
                android:layout_width="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:text="@string/ok_button" />

        </FrameLayout>

    </LinearLayout>

</androidx.cardview.widget.CardView>

请查看问题截图：

知道为什么会发生这种情况以及如何解决它吗？这似乎与cardview的背景有关，因为将所有背景设置为透明可以解决问题，但我需要对话框背景为白色。

Answer 1

为我设置

app:cardBackgroundColor="@color/transparent"

在 CardView 中修复了它

Answer 2

不要使用

CardView

来圆化对话框角，而是在

styles.xml

中声明新样式。

此样式应以

ThemeOverlay.MaterialComponents.Dialog.Alert

作为父级。 您需要设置的属性是

shapeAppearanceMediumComponent

:

    <style name="style_dialog" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="shapeAppearanceMediumComponent">@style/style_dialog_background</item>
    </style>

    <style name="style_dialog_background" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">@dimen/error_dialog_corner_radius</item>
    </style>

编辑对话框布局并删除

CardView

父级：

<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:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/error_icon"
        style="@style/ErrorViewTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/default_outer_margin"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/error_icon"
        android:tint="@color/redColor" />
        
    ...

</LinearLayout>

最后，像这样创建对话框：

MaterialAlertDialogBuilder(activity, R.style.style_dialog)
                .setView(<your-dialog-layout>)
                ...
                .create().apply {
                    show()
                }

Answer 3

尝试使用材料卡布局

com.google.android.material:material:1.2.1

<com.google.android.material.card.MaterialCardView
      android:layout_width="180dp"
      android:layout_margin="4dp"
      android:layout_height="wrap_content"
      android:layout_marginEnd="16dp"
      android:foreground="?attr/selectableItemBackground"
      android:padding="8dp"
      app:cardCornerRadius="6dp"
      app:cardElevation="1dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      android:background="@drawable/border"
      >

Answer 4

您可以将这些属性设置到您的卡片视图中：

app:cardCornerRadius="16dp"
android:cardElevation="0dp"
android:background="@android:color/transparent"

轻松将

cardCornerRadius

设置为与您的圆角半径值稍大或完全相同。