CODEWITHSUNDEEP
androidxmlcardview
Shams
Shams

Reputation: 398

Strange rectangle shape appears in the middle of cardView if I set semi-transparent color to cardBackgroundColor

I have the following layout.

<androidx.cardview.widget.CardView
        android:layout_width="160dp"
        android:layout_height="160dp"
        app:cardBackgroundColor="#AACC0000"
        app:cardCornerRadius="30dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Some text" />

</androidx.cardview.widget.CardView>

If I set semi-transparent color (#AACC0000) to cardBackgroundColor, strange rectangle shape appears in the middle of cardView.

enter image description here

If I set color without alpha channel (#CC0000), that rectangle shape dissapears. Regards

enter image description here

Upvotes: 0

Views: 693

Answers (2)

Manohar
Manohar

Reputation: 23404

This happens because of elevation . Set cardElevation to 0dp and check

<androidx.cardview.widget.CardView
    android:layout_width="160dp"
    android:layout_height="160dp"
    app:cardBackgroundColor="#AACC0000"
    app:cardCornerRadius="30dp"
    app:cardElevation="0dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Some text" />

</androidx.cardview.widget.CardView>

Upvotes: 5

TRK P
TRK P

Reputation: 386

Adding alpha value android:alpha="0.99" fixes the issue. Took 0.99 as higher side alpha value

<androidx.cardview.widget.CardView
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:alpha="0.99"
        app:cardBackgroundColor="#AACC0000"
        app:cardCornerRadius="30dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Some text" />

enter image description here

Upvotes: 2

Related Questions