Card View not proper in 5.1.1 Tablet and 5.0.2 Mobile Device

Question

I am having the following view created with CardView .
Adding dependency compile 'com.android.support:cardview-v7:23.0.+' in gradle dependency

Below is the xml file for the same.

<android.support.v7.widget.CardView
                xmlns:card_view="http://schemas.android.com/apk/res-auto"
                android:id="@+id/cardViewEmp"
                android:layout_height="wrap_content"
                android:layout_width="0dp"
                android:layout_weight="0.50"
                card_view:cardCornerRadius="20dp"
                card_view:cardElevation="10dp"
                android:padding="@dimen/margin_10"
                >
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    >
                <ImageView
                    android:id="@+id/employeeIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingTop="@dimen/margin_5"
                    android:src="@drawable/employeeicon"
                    android:layout_centerHorizontal="true"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Employee"
                    android:layout_centerHorizontal="true"
                    android:layout_below="@+id/employeeIcon"
                    android:textSize="@dimen/textSizeNormal"
                    />
                </RelativeLayout>
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                xmlns:card_view="http://schemas.android.com/apk/res-auto"
                android:id="@+id/cardViewVehicle"
                android:layout_height="wrap_content"
                android:layout_width="0dp"
                android:layout_weight="0.50"
                card_view:cardCornerRadius="20dp"
                card_view:cardElevation="10dp"
                android:padding="@dimen/margin_10"
                >
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    >
                    <ImageView
                        android:id="@+id/vehicleIconLive"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingTop="@dimen/margin_5"
                        android:src="@drawable/vehicleicon"
                        android:layout_centerHorizontal="true"
                        />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Vehicle"
                        android:layout_centerHorizontal="true"
                        android:layout_below="@+id/vehicleIconLive"
                        android:textSize="@dimen/textSizeNormal"
                        />
                </RelativeLayout>
                </android.support.v7.widget.CardView>

Now the elevation and look and feel for the view in 4.4.4 mobile is as shown below which looks good !


But the same looks very odd in 5.1.1 Nexus Tablet and 5.0.2 Mobile as shown below.

I have added elevation and corner radius by this

card_view:cardCornerRadius="20dp"
card_view:cardElevation="10dp"

• Anyone can clearly see the corner radius looks odd without proper elevation.
• What could be the problem.
• What can be done to make the proper look and feel of CardView

Edit 1:
Tried with com.android.support:cardview-v7:23.1.1 , but the output was same again.

Bust

call compile 'com.android.support:cardview-v7:23.1.1' – Chaldean

@IntelliJAmiya I have tried the same. Didnt work in 5.1.1 Nexus Tablet!!! – Bust

Answer 1

Finally I figured out the issue. It was due to the outer LinearLayout I had written to make the icons in center of screen which was having height as wrap_content. I avoided the LinearLayout and through the following code, I made the card view with proper elevation curves and in middle .

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/mainRL"
        >
<android.support.v4.widget.Space
                android:layout_width="@dimen/margin_10"
                android:layout_height="1dp"
                android:layout_centerInParent="true"
                android:layout_centerVertical="true"
                android:id="@+id/spaceCenter"
                />
<!-- Employee icon -->

            <android.support.v7.widget.CardView
                xmlns:card_view="http://schemas.android.com/apk/res-auto"
                android:id="@+id/cardViewEmp"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                card_view:cardCornerRadius="20dp"
                card_view:cardElevation="10dp"
                android:layout_toLeftOf="@+id/spaceCenter"
                android:layout_centerInParent="true"
                >
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    >
                <ImageView
                    android:id="@+id/employeeIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingTop="@dimen/margin_5"
                    android:src="@drawable/employeeicon"
                    android:layout_centerHorizontal="true"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="  Employee  "
                    android:layout_centerHorizontal="true"
                    android:layout_below="@+id/employeeIcon"
                    android:textSize="@dimen/textSizeNormal"
                    />
                </RelativeLayout>
            </android.support.v7.widget.CardView>

            <!-- Vehicle icon -->

            <android.support.v7.widget.CardView
                xmlns:card_view="http://schemas.android.com/apk/res-auto"
                android:id="@+id/cardViewVehicle"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                card_view:cardCornerRadius="20dp"
                card_view:cardElevation="10dp"
                android:layout_toRightOf="@+id/spaceCenter"
                android:layout_centerInParent="true"
                >
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    >
                    <ImageView
                        android:id="@+id/vehicleIconLive"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingTop="@dimen/margin_5"
                        android:src="@drawable/vehicleicon"
                        android:layout_centerHorizontal="true"
                        />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="    Vehicle     "
                        android:layout_centerHorizontal="true"
                        android:layout_below="@+id/vehicleIconLive"
                        android:textSize="@dimen/textSizeNormal"
                        />
                </RelativeLayout>
                </android.support.v7.widget.CardView>
</RelativeLayout>

Bust

Answer 2

Try removing: android:padding attribute from the card view.

from the docs:

Since padding is used to offset content for shadows, you cannot set padding on CardView. Instead, you can use content padding attributes in XML or setContentPadding(int, int, int, int) in code to set the padding between the edges of the Card and children of CardView.

Also this:

Note that, if you specify exact dimensions for the CardView, because of the shadows, its content area will be different between platforms before L and after L. By using api version specific resource values, you can avoid these changes. Alternatively, If you want CardView to add inner padding on platforms L and after as well, you can set setUseCompatPadding(boolean) to true.

Jamima

Answer 3

To make it both compatible above or below api 21, you need to specify app:cardUseCompatPadding="true" in your support CardView.

credit to ShinChven CardView elevation not working on Android 5.1.1

Idiot