CardView corners show white pixels?

user_3821287 0
Viewed 359

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:

enter image description here enter image description here

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.

android-cardview android-layout android
3 Answers

For me setting

app:cardBackgroundColor="@color/transparent"

in the CardView fixed it

user_48804000

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()
                }
user_132112630

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"
      >
user_33674690
Related