How to draw pointed border on the left of TextView with bullet to each TextView

Question

I have about 5 to 10 TextViews which shows the stops, I want to add the bullet point on the left of the each TextView, but that point should be attached with the dotted line as shown in the image below.

As you can see in the photo there are three TextView/EditText with the bullets and each bullet is connected with the dotted line.

Answer 1

By using one horizontal LinearLayout as a parent and two vertical LinearLayout as the children, you can easily achieve what you want. You can change the padding/margin of your drawbles to change the views accroding to your preferences. Here is the XML code and a screenshot of the resultant layout for what you have in mind:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="doitfast.testapp.MainActivity"
tools:showIn="@layout/app_bar_main">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/radio_1"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            android:padding="3dp"
            android:src="@drawable/ic_radio_button_unchecked_black_24dp" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_more_vert_black_24dp" />

        <ImageView
            android:id="@+id/radio_"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:padding="3dp"
            android:src="@drawable/ic_radio_button_unchecked_black_24dp" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_more_vert_black_24dp" />

        <ImageView
            android:id="@+id/radio_2"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:src="@drawable/ic_place_black_24dp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Home" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Battle and Brew, 5920 Roswell Road" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="The Fox Theatre, 660 Peachtree Street" />

    </LinearLayout>
</LinearLayout>

</android.support.constraint.ConstraintLayout>

Please note that you can change this from static to dynamic by using java in your activity to create these view elements and inflate them.

Here is a screenshot of the above code: