cardBackgroundColor and cardCornerRadius not working in AndroidX

user_6275174 0
Viewed 9606

I'm struggling with CardView corner radius and background color with AndroidX libraries.

I've defined my layout as below: 

<?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"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="@dimen/retail_card_width"
        card_view:cardCornerRadius="@dimen/card_radius"
        card_view:cardBackgroundColor="@color/baseYellow"
        android:layout_height="@dimen/retail_card_height">
    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <ImageView android:layout_width="match_parent" android:layout_height="match_parent"
                   tools:src="@drawable/ic_fruit_1"
                   app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
                   app:layout_constraintStart_toStartOf="parent"
                   android:scaleType="fitEnd"
                   app:layout_constraintTop_toTopOf="parent"/>
        <ImageView
                android:id="@+id/ivRetailBrand"
                android:layout_width="@dimen/brand_icon_size"
                android:layout_height="@dimen/brand_icon_size"
                tools:src="@drawable/esselunga"
                android:layout_marginTop="@dimen/retail_brand_margin"
                android:background="@drawable/round_outline"
                app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
                android:layout_marginStart="@dimen/retail_brand_margin"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Unfortunately, neither cardCornerRadius nor cardBackgroundColor seem working on my layout. I can't understand if my issue depends on AndroidX libraries or not.

Here there's my layout preview:

cardview issue

android-cardview androidx android
13 Answers

Try modifying the CardView as:

<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:layout_width="@dimen/retail_card_width"
        app:cardCornerRadius="@dimen/card_radius"
        app:cardBackgroundColor="@color/baseYellow"
        android:layout_height="@dimen/retail_card_height">
user_43779540

It turned out that the problem was I was mixing cardview androidx library with support recyclerview library. Once I rebuilt the project with:

implementation 'androidx.recyclerview:recyclerview:1.0.0'
implementation 'androidx.cardview:cardview:1.0.0'

everything turned out fine.

user_62751740

I might be late for this but let me save someone's time in the future. I had this problem on my Android Studio preview and came to realise that the problem is that the content inside the CardView is not clipped to the bounds of the CardView, so the corners you see are corners of the ImageView, which is actually clipped when you run the app on emulator/device.

I hope this helps!

user_104885290

I removed this lines in my Manifest file and after that my cardviews are worked prefectly fine

android:hardwareAccelerated="false"

user_108957270

I had a similar problem. I solved it by wrapping the CardView in FrameLayout.

Addition to an answer:

Or you can try using "app" namespace instead of "card_view":

                app:cardBackgroundColor="@color/background_color"
                app:cardCornerRadius="@dimen/corner_radius"
user_60637970

I don't think it's related to the CardView setup.

Check Your ImageView they can be the reason for corner's not being rounded.

Comment Out Image View Code(whole ConstraintLayout) and check the UI.As i had the Same Issue in Past.

user_79726990

try to clean and rebuild the project. This worked for me..

user_84635200

You can create a new drawable file round_corner_colored.xml and paste the following code in that file : 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid
    android:color="@color/light_sky_blue"/>

<corners
    android:radius="@dimen/_12sdp"/>

</shape>

Now set this drawable the background of cardview as : 

 android:background="@drawable/round_corner_colored"

Hope it will help !!

user_117197990

There are brands that force Dark mode when app installed for the first time this will affect the coloration of views and applying color in CardView will get ignored. You may apply this to your main theme to prevent such event.

<item name="android:forceDarkAllowed" tools:targetApi="q">false</item>
user_100530460

For me, It wasn't showing properly in Preview. But it was showing properly on the device. There is some rendering issue. I keep encountering such problems in android studio.

Faced issue in Android Studio 4.2.1 (Mac)

user_33483730

For me this worked

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@color/white"
    app:contentPadding="@dimen/_10sdp"
    app:cardCornerRadius="20dp"
    app:cardUseCompatPadding="true"
    android:layout_marginStart="@dimen/_20sdp"
    android:layout_marginTop="@dimen/_10sdp">

    <androidx.appcompat.widget.AppCompatTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/low"
        android:textColor="@color/text_color_blue"
        android:textSize="@dimen/_11ssp"
        android:textStyle="normal" />
</androidx.cardview.widget.CardView>

enter image description here

user_48531330

Ok, So I ran into the same issue, and none of these suggestions resolved my issue. I was setting the background color of the card via cardview.setBackgroundColor(color): enter image description here , instead of cardview.setCardBackgroundColor() enter image description here . The cardview contains an embedded object, of card, the card is where the corner radius is appended to. So setting the color outside of the CardView.Card will not render the corner-radius as intended. Hope this helps.

user_42467970

I upgraded compileSdkVersion from 28 to 29 in app level gradle and the problem solved.

compileSdkVersion 29
user_47267180
Related