Draw custom line between two elements in TableLayout Android

Question

I have an activity with events organised in a timeline. But it looks ugly.

<

Answer 1

If you just want a line displayed i recommend you to create a Drawable for this. Heres a little example: Layout file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/line">

</LinearLayout>

and the line.xml Drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="3dp">
        <shape >
            <stroke android:width="1dp" android:color="@android:color/holo_purple"/>
        </shape>

    </item>
    <item android:left="4dp">
        <shape>
            <solid android:color="#ffffff"/>
        </shape>
    </item>

</layer-list>

The Layer-list may also be changed to use up additional Drawables as the ones you are already using.

An example using draw-9 might look like this: line.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <nine-patch android:src="@drawable/point" android:dither="true"/>
    </item>

    <!-- <item android:left="3dp">
        <shape >
            <stroke android:width="1dp" android:color="@android:color/holo_purple"/>
        </shape>

    </item>
    <item android:left="4dp">
        <shape>
            <solid android:color="#ffffff"/>
        </shape>
    </item> -->

</layer-list>

Layout:

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:background="@drawable/line" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:background="@drawable/line"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/line" />
</LinearLayout>

and my point.9.png

to apply a draw-nine-patch you must mark the parts to be streched with black color on the borders.

Answer 2

You may have to create your own custom adapter but I am using array adapter for your reference. Also giving item layout for list view, hope you will manage your code accordingly.

items.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical" >

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

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:background="@android:color/black" />

        <View
            android:id="@+id/view1"
            android:layout_width="7dp"
            android:layout_height="7dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="7dp"
            android:background="@drawable/dot" />
    </RelativeLayout>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:padding="20dp"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

dot.xml which is a drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >

<stroke
    android:width="1dp"
    android:color="@android:color/black" />

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

And in acivity you can use adapter like this:

list.setAdapter(new ArrayAdapter<String>(this, R.layout.item, R.id.textView1, items));

Hope this helped!