We are Borg We are Borg - 3 months ago 16
Android Question

Android : How to add a partial border?

I am working on an Android application in which I have a ListView for which I would like to add a border for each row in ListView. Generally adding a border shouldn't be a problem, but the border in design specifications is just half. How can I do that? Check out the screenshot :

enter image description here

As you can see the grey line, that is the border which is not touching end of the screen.

Code :

<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">

<ListView
android:id="@+id/conversationList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/relativeLayout3"
/>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@color/common_signin_btn_dark_text_default"
android:orientation="horizontal"
android:id="@+id/relativeLayout3">

<ImageView
android:id="@+id/trashImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="46dp"
android:layout_marginStart="46dp"
android:src="@drawable/swappossible" />

<ImageView
android:id="@+id/swapImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/trashImage"
android:layout_centerHorizontal="true"
android:src="@drawable/footerheart" />

<ImageView
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignTop="@+id/swapImage"
android:layout_marginBottom="5dp"
android:layout_marginEnd="41dp"
android:layout_marginRight="41dp"
android:src="@drawable/footermessages" />
</RelativeLayout>

</RelativeLayout>


Updated code

Below is the code for individual rows in ListView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:descendantFocusability="blocksDescendants"
android:orientation="horizontal"
android:padding="5dip"
android:background="@color/common_action_bar_splitter"

>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="@+id/seller"
android:src="@drawable/perfume"
android:background="@drawable/layout_image"
android:layout_alignTop="@+id/buyer"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="@+id/buyer"
android:src="@drawable/mixer"

android:background="@drawable/layout_image"
android:layout_alignTop="@+id/uploader"
android:layout_centerHorizontal="true" />

<ImageButton
android:layout_width="35dp"
android:layout_height="35dp"
android:id="@+id/swapButton"
android:src="@drawable/swap_ready"
android:background="@null"
android:layout_marginTop="20dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_alignTop="@+id/uploader"
android:layout_toRightOf="@+id/seller"
android:layout_toEndOf="@+id/seller" />

<TextView
android:id="@+id/swapMessage"
android:layout_width="170dp"
android:layout_height="30dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:gravity="left"
android:singleLine="true"
android:text="Hey! I&apos;d like to swap..."
android:layout_above="@+id/textView4"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />

<TextView
android:id="@+id/uploaderName"
android:layout_width="100dp"
android:layout_height="25dp"
android:layout_gravity="center_horizontal|top"
android:ellipsize="end"
android:singleLine="true"
android:gravity="center"
android:scrollHorizontally="true"
android:visibility="visible"
android:textAppearance="?android:attr/textAppearanceMedium"

android:text="Bridget"
android:layout_below="@+id/uploader"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />

<ImageView
android:layout_width="60dp"
android:layout_height="80dp"
android:id="@+id/uploader"
android:src="@drawable/lena_round"
android:background="@null"
android:layout_above="@+id/swapMessage"
android:layout_alignLeft="@+id/uploaderName"
android:layout_alignStart="@+id/uploaderName"
android:layout_marginLeft="25dp"
android:layout_marginStart="25dp"
/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="10 minutes ago"
android:id="@+id/textView4"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="@+id/buyer"
android:layout_alignEnd="@+id/buyer" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Morrison"
android:id="@+id/uploaderLastName"
android:gravity="center"

android:layout_alignParentBottom="true"
android:layout_alignLeft="@+id/uploaderName"
android:layout_alignStart="@+id/uploaderName"
android:layout_alignRight="@+id/uploaderName"
android:layout_alignEnd="@+id/uploaderName" />
</RelativeLayout>

</LinearLayout>

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="3dp"
android:layout_alignParentBottom="true"
android:background="#555555"/>
</RelativeLayout>


Thank you.

Answer

To use a custom separator, you can add a View to the bottom of your list item xml:

<View background="#555555" height="1dp" width="match_parent" margin="5dp"/>

Adjust a color, size and margins for your requirements.

To remove a default system divider, use

<ListView
    android:divider="@null"
    ...
/>
Comments