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

Question

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.

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

I couldn't reproduce the issue, do you get the same on real device and emulator? — Zain, Nov 10 '21 at 07:28
I get this issue on a real device. In the xml editor this issue is not shown — Shams, Nov 10 '21 at 07:38

score 3 · Accepted Answer · answered Nov 11 '21 at 10:16

3

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>

answered Nov 11 '21 at 10:16

Manohar

22,116
9
108
144

Yes you are right. But why it happens. What if I want use cardElevation in this case? – Shams Nov 12 '21 at 04:18
I am not sure if its possible with cardview , you can try this https://stackoverflow.com/a/62263221/6478047 – Manohar Nov 12 '21 at 06:22

score 1 · Answer 2 · answered Nov 10 '21 at 15:28

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

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

2 Answers2