androidxmlandroid-custom-viewannotatedtimeline

Set the text in horizontal time line


I am trying to implement horizontal timeline. SO I have written the code to design the horizontal line but I am able to figure out how I will write text on the above and below of the line.

One more thing I don't want to use any other library.

Target ImageT

I have try to solve it through Custom view as people here have been suggested but got struck.

timeline_segment.xml

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

    <TextView
       android:padding="3dp"
        android:textAlignment="textEnd"
        android:text="Top"
        android:id="@+id/top_data"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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


        <TextView
            android:layout_gravity="center"
            android:layout_weight="0.5"
            android:background="@color/alphabet_a"
            android:layout_width="wrap_content"
            android:layout_height="2dp" />

        <ImageView
            android:background="@drawable/circle1"
            android:layout_width="15dp"
            android:layout_height="15dp" />

        <TextView
            android:layout_weight="0.5"
            android:layout_gravity="center"
            android:background="@color/alphabet_a"
            android:layout_width="wrap_content"
            android:layout_height="2dp" />

    </LinearLayout>


    <TextView
        android:padding="3dp"
        android:gravity="center"
        android:text="bottom"
        android:id="@+id/bottom_data"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
</merge>

timeline_segment.java

public class timeline_segement extends LinearLayout {

    View rootView;
    TextView upperText;
    TextView startLine;
    TextView endLine;
    ImageView circleView;
    TextView bottomText;

    public timeline_segement(Context context) {
        super(context);
        init(context);
    }

    public timeline_segement(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public timeline_segement(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }


    private void init(Context context) {

      rootView=inflate(context, R.layout.timeline_segment, this );

      upperText=(TextView) rootView.findViewById(R.id.top_data);
      bottomText=(TextView) rootView.findViewById(R.id.bottom_data);

      upperText.setText("Top");
      bottomText.setText("Bottom");

    }

    public  void setUpperText(String string)
    {
        upperText.setText(string);
    }

    public void setBottomText(String string)
    {
        bottomText.setText(string);
    }

}

Solution

  • Decided to answer because the comment box is kinda limiting. This is my comment:

    You'll need a custom view to achieve this. You can either composite ready-made views or go full custom

    If you choose to composite views, then you start by breaking down that image level by level. At the highest level, its a horizontal layout with 'TimelineCell's (or whatever you choose to call it).

    A TimelineCell will basically be a vertical LinearLayout with a right aligned TextView, a View that draws the line and another center aligned TextView.

    You can then create these programmatically and add them to a parent horizontal LinearLayout.

    If you however choose to go full custom, Youll have to handle measuring, layouting and drawing of all the components including the text above and below the line.

    Take a look at this link for a good introduction to custom views on android