How do I avoid double borders between lists?

Question

I am using a list view in which I have an xml referencing drawable/list as follows:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 //For the borders
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <corners android:radius="0dp" />
        </shape>
    </item>
    //For the background color of cells 
    <item android:top="1px"
          android:left="0dp"
          android:right="0dp"
          android:bottom="1px">
        <shape android:shape="rectangle">
            <solid android:color="#262626" />
            <corners android:radius="0dp" />
        </shape>
    </item>
</layer-list>

The above code is basically used to define the borders and the background color of cells. However, I want to be able to use line for the borders instead of rectangle so that the bottom border of one rectangle doesnt leave a 1 dp gap between the top border of another rectangle below it. Please refer the image below:

As you can see from the image, the rectangular bottom border below BOK.L is a little off showing a gap between the top rectangular border of GOOG.OQ Is there a way to fix this such that both the borders either overlap on top of each other and no such double line gap appears or is there a way I can define a line shape such that it is defined above and below all the cells in the pic without a gap?

Any clue?

Thanks! Justin

The xml file referencing the same (drawable/list) is as follows :

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

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/list"
    android:padding="4dp"
     >



    <TextView
        android:id="@+id/symbol"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="2dp"
        android:paddingLeft="8dp"
        android:textColor="@color/search_autosuggest_header_text"
        foo:customFont="Roboto-Bold.ttf"
        android:singleLine="true"
        android:layout_toLeftOf="@+id/last_container"
        android:ellipsize="end"
        android:gravity="left" 
        android:textSize="14sp"/>

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="8dp"
        foo:customFont="Roboto-Regular.ttf"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/symbol"
        android:layout_toLeftOf="@+id/last_container"
        android:paddingBottom="4dp"
        android:textColor="@color/search_autosuggest_item_subtitle"
        android:singleLine="true"
        android:ellipsize="end"
        android:textSize="11sp" />

    <FrameLayout
        android:id="@+id/last_container"
        android:layout_width="87dp"
        android:layout_height="wrap_content"
        android:layout_margin="1dp"
        android:layout_toLeftOf="@+id/net_change_container" >

        <TextView
            android:id="@+id/last_back"
            style="@style/TextView.ListsTextView"
            android:layout_width="87dp"
            android:layout_height="wrap_content"
            android:padding="3dp" />

        <TextView
            android:id="@+id/last"
            style="@style/TextView.ListsTextView"
            android:layout_width="87dp"
            android:textSize="12sp"
            android:layout_height="wrap_content" />
    </FrameLayout>


    <FrameLayout
        android:id="@+id/net_change_container"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_margin="1dp"
        android:layout_toLeftOf="@+id/percent_change_container" >

        <TextView
            android:id="@+id/net_change_back"
            style="@style/TextView.ListsTextView"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:padding="3dp" />

        <TextView
            android:id="@+id/net_change"
            style="@style/TextView.ListsTextView"
            android:layout_width="80dp"
            android:textSize="12sp"
            android:layout_height="wrap_content" />
    </FrameLayout>

    <FrameLayout
        android:id="@+id/percent_change_container"
        android:layout_width="65dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_margin="1dp" >

        <TextView
            android:id="@+id/percent_change_back"
            style="@style/TextView.ListsTextView"
            android:layout_width="65dp"
            android:textSize="14sp"
            foo:customFont="Roboto-Regular.ttf"
            android:layout_height="wrap_content"
            android:padding="3dp" />

        <TextView
            android:id="@+id/percent_change"
            style="@style/TextView.ListsTextView"
            android:layout_width="65dp"
            android:textSize="12sp"
            android:layout_height="wrap_content"/>
    </FrameLayout>

</RelativeLayout>

Also,@jboi with with your fix the screen that I get is:

Answer 1

您可以使用ListView参数android:divider和android:dividerHeight来设置所需颜色和高度的行分隔符。

Answer 2

The reason for having two lines is, that the background (second layer) lets shine thru the white part on both ends, at the bottom and the top. Therefore every list entry gets a white line on top and on bottom. As list items have a small distance between each other you see two lines.

Two things you need to do

• For each item, let only one (top or bottom) shine thru. Therefore you get only one line per item. The drawable XML for an item:

   <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle"> <solid android:color="@color/white" /> <corners android:radius="0dp" /> </shape> </item> <item android:top="1dp" android:left="0dp" android:right="0dp" android:bottom="0dp"> <shape android:shape="rectangle"> <solid android:color="#262626" /> <corners android:radius="0dp" /> </shape> </item> </layer-list> 

• For the whole list, you need the drawable that shows the one missing line. The drawable XML for this looks nearly the same. Just bottom and top is exchanged:

   <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle"> <solid android:color="@color/white" /> <corners android:radius="0dp" /> </shape> </item> <item android:top="0dp" android:left="0dp" android:right="0dp" android:bottom="1dp"> <shape android:shape="rectangle"> <solid android:color="#262626" /> <corners android:radius="0dp" /> </shape> </item> </layer-list> 

Answer 3

In order to not have double selectors(and in proper positions like also at the top, at the bottom) you have two cases that you need to tackle, the top element(which needs the selector at the top and bottom) plus every other row which needs the selector only at the bottom(the top will be covered by the selector of the previous element). This has to be done in code, in your adapter(if you were using a simple table you could have just made one drawable for the top element and one for the other elements):

• remove the properties like android:top , android:bottom etc from the layer-list (as you'll be setting those in code)
• in the getView() method of the adapter retrieve the background of the row view(which will be a LayerDrawable )
• based on the position you have(mainly 0 vs any oher position) use the LayerDrawable.setLayerInset() method and set the inset for the layer with index 1(if that is your complete drawable): top and bottom for the first element, top(with a value of 0) and bottom for every other position