Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CardView inserts dark line at bottom

I'm using com.android.support:cardview-v7:23.3.0.

On API < 21 my CardView insists on placing a dark line at the bottom as shown here

enter image description here

This is my layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="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.support.v7.widget.CardView

    android:id="@+id/category_cardView"
    android:layout_width="320dp"
    android:layout_height="wrap_content"
    android:layout_margin="0dp"
    card_view:cardBackgroundColor="#80d0d0d0"
    card_view:cardCornerRadius="30dp"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/list_item_category_imageImageView"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="3dp"
            tools:ignore="contentDescription"
            tools:src="@drawable/ic_launcher_find_the_fun" />

        <ImageButton
            android:id="@+id/list_item_category_listButton"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_margin="3dp"
            android:background="@drawable/button_selector_category"
            android:contentDescription="@string/cd_list"
            android:padding="10dp"
            android:scaleType="fitXY"
            android:src="@drawable/ic_list_black_24dp" />

        <ImageButton
            android:id="@+id/list_item_category_mapButton"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/list_item_category_listButton"
            android:background="@drawable/button_selector_category"
            android:contentDescription="@string/cd_map"
            android:padding="10dp"
            android:scaleType="fitXY"
            android:src="@drawable/ic_map_black_24dp" />

        <!-- Title -->
        <TextView
            android:id="@+id/list_item_category_titleTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@id/list_item_category_mapButton"
            android:layout_toRightOf="@id/list_item_category_imageImageView"
            android:paddingRight="3dp"
            android:textSize="17sp"
            android:textStyle="bold"
            android:typeface="sans"
            tools:text="Category Title" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

I've tried various things to remove it. If I delete the line containing "card_view:cardCornerRadius="30dp"" here's what I see:

enter image description here

I see exactly the same as above if I explicitly set card_view:cardCornerRadius="0dp".

The following variations in my layout do not fix this (I've tried these mainly to debug, not because I really expected them to make a difference).

  1. I changed to using card_view:cardUseCompatPadding="false"
  2. card_view:cardUseCompatPadding="true"
  3. card_view:cardPreventCornerOverlap="true"
  4. card_view:cardPreventCornerOverlap="false"
  5. card_view:contentPadding="0dp"

Can you suggest what is wrong with this layout or even a debugging step to try?

like image 248
pbm Avatar asked Apr 29 '16 06:04

pbm


People also ask

Which attribute adds shadow to CardView?

CardView uses elevation property on Lollipop for shadows and falls back to a custom emulated shadow implementation on older platforms. Due to expensive nature of rounded corner clipping, on platforms before Lollipop, CardView does not clip its children that intersect with rounded corners.

When should I use CardView?

CardView is a new widget in Android that can be used to display any sort of data by providing a rounded corner layout along with a specific elevation. CardView is the view that can display views on top of each other. The main usage of CardView is that it helps to give a rich feel and look to the UI design.

How do I customize my card view?

Customized CardView First, add a CardView dependency to the application-level build. gradle file. Then create a drawable background for the cards. For that, create a new drawable resource file inside the drawable folder.


1 Answers

you forgot to add below attribute to your CardView and it works

XML

card_view:cardElevation="0dp"

OR

JAVA

cardView.setCardElevation(0);

cardView.setElevation() method and CardView attribute android:elevation will throw java.lang.NoSuchMethodError in platform before Android 5.0

Check

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="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.support.v7.widget.CardView
        android:id="@+id/category_cardView"
        android:layout_width="320dp"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        card_view:cardBackgroundColor="#80d0d0d0"
        card_view:cardCornerRadius="30dp"
        card_view:cardElevation="0dp"  //added
        card_view:cardUseCompatPadding="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/list_item_category_imageImageView"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_margin="3dp"
                tools:ignore="contentDescription"
                tools:src="@drawable/ic_launcher_find_the_fun" />

            <ImageButton
                android:id="@+id/list_item_category_listButton"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_margin="3dp"
                android:background="@drawable/button_selector_category"
                android:contentDescription="@string/cd_list"
                android:padding="10dp"
                android:scaleType="fitXY"
                android:src="@drawable/ic_list_black_24dp" />

            <ImageButton
                android:id="@+id/list_item_category_mapButton"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_toLeftOf="@+id/list_item_category_listButton"
                android:background="@drawable/button_selector_category"
                android:contentDescription="@string/cd_map"
                android:padding="10dp"
                android:scaleType="fitXY"
                android:src="@drawable/ic_map_black_24dp" />

            <!-- Title -->
            <TextView
                android:id="@+id/list_item_category_titleTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toLeftOf="@id/list_item_category_mapButton"
                android:layout_toRightOf="@id/list_item_category_imageImageView"
                android:paddingRight="3dp"
                android:textSize="17sp"
                android:textStyle="bold"
                android:typeface="sans"
                tools:text="Category Title" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>
like image 66
Amit Vaghela Avatar answered Oct 04 '22 01:10

Amit Vaghela