Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android card view has thin gray line in between cards

I have an android List view which shows card-like views, and as you can see in this picture, there is a thin gray line between my cards:

enter image description here

How can I get rid of the gray line?

My xml to achieve this card view is like this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="wrap_content">

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6dp"
        android:layout_marginRight="6dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:orientation="vertical"
        android:background="@drawable/bg_card">

    <!-- Card Contents go here -->

    <TextView
            android:id="@+id/beerNameList"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
            android:id="@+id/beerBreweryNameList"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

</LinearLayout>

</FrameLayout>

bg_card.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"
               android:dither="true">

            <corners android:radius="2dp"/>

            <solid android:color="#ccc" />

        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle"
               android:dither="true">

            <corners android:radius="2dp" />

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

            <padding android:bottom="8dp"
                     android:left="8dp"
                     android:right="8dp"
                     android:top="8dp" />
        </shape>
    </item>
</layer-list>

Tried the change in the divider height, here is my code it did not get rid of the gray line:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <LinearLayout
        android:id="@+id/linlaHeaderProgress"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="gone" >

        <ProgressBar
            android:id="@+id/pbHeaderProgress"
            style="android@style/Spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </ProgressBar>
    </LinearLayout>

    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:dividerHeight="0px"
        >
    </ListView>

</LinearLayout>
like image 773
Mike Avatar asked Sep 11 '13 01:09

Mike


2 Answers

dividerHeight should work. As a workaround you could change the colour of divider to your background color or to transparent colour

<ListView 
 android:id="@+id/android:list"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:divider="#E6E6E6"
 android:dividerHeight="0px"/>

You can also try to this trick:

 android:divider="@null"
like image 116
adek Avatar answered Dec 05 '22 00:12

adek


I've just had the exact issue. Nothing from the XML was having effect on the outcome of the listview. Instead, as already mentioned in a comment by Quanturium, I went to my ListFragment's onActivityCreated and added -

getListView().setDivider(null);
getListView().setDividerHeight(0);

Hope this helps!

like image 21
xShay Avatar answered Dec 05 '22 00:12

xShay