'CardView corners show white pixels?

I'm trying to create a custom "Warning" dialog, which I want to have rounded corners in it. So I've put my whole layout into a CardView and I'm setting my dialog's layout as this layout.

However, on dark backgrounds, such as the default Android dialog background, I seem to be getting white pixels at the corners of my dialog.

I've already tried what is proposed here, setting app:cardBackgroundColor="@color/transparent", but it didn't make a difference.

The layout of my dialog is the following (its a different one form the screenshots but the buttons, bakcground and the CardView are the same):

<?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>

Please check the screenshots of the issue:

Any idea why this happens and how to fix it? It seems to be related to the cardview's background, since setting all backgrounds to transparent fixes the issue, But I need the dialog background to be white.

Solution 1:^[1]

Instead of using a CardView for rounding the dialog corners declare a new style in your styles.xml.

This style should have ThemeOverlay.MaterialComponents.Dialog.Alert as a parent. The property you need to set is 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>

Edit your dialog layout and remove the CardView parent:

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

Finally, create your dialog like this:

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

Solution 2:^[2]

For me setting

app:cardBackgroundColor="@color/transparent"

in the CardView fixed it

Solution 3:^[3]

Try using material card layout 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"
      >

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	lpizzinidev
Solution 2	Pericles Karachristos
Solution 3	Alan Cruz

'CardView corners show white pixels?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]