How to Approach a Vertical RecyclerView Timeline?

Question

I want to create a vertical dynamic timeline that has the time it happened on the left, what happened on the right, a line in between, with a bubble in the line at each event. Times, events, and number of events will be dynamic.

What I was thinking here was possibly a RecyclerView over a static image of a vertical line. The list item would contain the time, a bubble image, and then the event view. Before writing this out I'm thinking I'm gonna have issues with lining up the bubble with the vertical line. Is there a better way to approach this or maybe someone can point out a way to guarantee the bubble will be over the center of my line on different screen densities and sizes?

Answer 1

I have been looking to implement a similar view in my app.

Personally, I'm not a fan of a static line. My thinking was along the lines of having a layout with 3 columns - for your example; one with the time, one with an image of the dot and vertical lines (or just the top line on the last item) and the third column with a cardview.

The layout I've posted is pretty rough but I just knocked it together in a few minutes and you should get the idea. It would need tweaking to make sure the vertical line on the icon goes to the edge of the layout (there would be a gap between them in my example)

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:layout_weight="0.06">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_gravity="center">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1:45 PM" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_gravity="center">

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_test" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="10dp">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="Hello there"
                    android:padding="10dp"/>
            </android.support.v7.widget.CardView>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

With the result looking like so;

I did also find a library which looks okay - the icons could do with some work but I guess a lot of the legwork is already done.

I have also since just found out this layout type is officially (according to Matrial Design Guidelines) a stepper. Although I can't actually find any reference to them in the 'Develop' documentation it may assist you when searching for an appropriate library.

Answer 2

after editing Jonny Wright answer.I first created a card_item as this;

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    >

    <LinearLayout
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        >

        <LinearLayout

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_gravity="top">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1:45 PM" />

        </LinearLayout>

        <android.support.design.widget.CoordinatorLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center">
            <View
                android:id="@+id/first"
        android:layout_gravity="center"
                android:background="@color/material_green_500"
                android:layout_width="2dp"
                android:layout_height="wrap_content"/>
            <ImageView
                app:layout_anchor="@id/first"
                app:layout_anchorGravity="top"
                android:layout_gravity="top"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/ic_test" />


        </android.support.design.widget.CoordinatorLayout>


    </LinearLayout>
    <LinearLayout

        android:layout_weight="1"

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

        <LinearLayout
            android:background="@drawable/chat_bubble"

            android:layout_marginRight="114dp"
            android:layout_marginEnd="114dp"
            android:layout_gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView

                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Hello there, how are you doing. Hello there, how are you doing. Hello there, how are you doing. Hello there, how are you doingHello there, how are you doing"
                android:padding="12dp"/>
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Then add two additional files in the drawable folder. a 9 patch image for the chat bubble background and a circle.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
    android:useLevel="false"
    android:innerRadius="0dp"
    >
<size android:width="100dp"
    android:height="100dp"/>
    <solid android:color="@color/material_green_500"/>
</shape>

This is the results. Example usage

Dont forget to add the bubble.png