Android UI Layout

Question

I'm trying to achieve the layout in the screenshot, the portion in red. I think a table layout would be appropriate but I don't mind any really, I just need to be able to achieve that pretty connecting dotted lines with a table like display. I have tried using a view with a dotted background but it does not feel right (Android Drawing Separator/Divider Line in Layout?).

Answer 1

I can see two options available to you:

1. You could try this answer (How do I make a dotted/dashed line in Android?)
2. Create a custom View overriding the method View#onDraw(Canvas) - where you can draw whatever you want.

Taken from referenced answer:

Without java code:

drawable/dotted.xml:

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

    <stroke
       android:color="#C7B299"
       android:dashWidth="10px"
       android:dashGap="10px"
       android:width="1dp"/>
</shape>

view.xml:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/dotted" />