Design UI Android (Element between CardViews)

Question

My question is more informative. I just want to know how to make such design. I found android application called "weather timeline" and inside of that application between CardViews (as I understand) they used this element which I pointed out in picture below. I think its just ImageView but how to set it as here. It will be interesting to know any idea about that! Thanks for attection!

Answer 1

You could easily do it in the following way. Let us assume that we are using a collection view where the card element is one type and the black gap with text in the middle is the other. The cardView would look something like this

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

    <CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="@dimen/circle_radius_half_size"
        android:layout_marginBottom="@dimen/circle_radius_half_size">
    </CardView>

    <ImageView
        android:layout_width="@dimen/circle_radius"
        android:layout_height="@dimen/circle_radius"
        android:layout_align_parentLeft="true"
        android:layout_marginLeft="24dp"
        android:src="@drawable/circle" 
        android:rotation="180"/>

    <ImageView
        android:layout_width="@dimen/circle_radius"
        android:layout_height="@dimen/circle_radius"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="24dp"
        android:src="@drawable/circle" />

</RelativeLayout>

Where drawable circle looks something like this

and the layout for black grape with text in the middle looks something like this

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp">

    <View
        android:layout_width="@dimen/width_of_line"
        android:layout_height="match_parent"
        android:layout_margin_left="@dimen/line_margin"
        android:background="@color/white" />


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin_left="@dimen/line_margin" >


        <!-- The Text View Layouts Here -->

    </LinearLayout>
</LinearLayout>

Where line_margin is 24dp + CircleHalfSize - LineWidthHalfSize

Of course the CircleHalfSize and LineWidthHalfSize are in DP

Now it is just a question of arranging them properly via the adapter. Personally I would use the RecyclerView. Great Flexibility.

Also this way if you wanted the bubbles to be gone, all you have to do is set the bubble ImageView's visibility to GONE and that too you can do specifically either for the top or the bottom.

Answer 2

I'm pretty sure that this could be accomplished using 9-patched images.

By determining the way to draw your patches and how to set them as a background for your layouts you'll get the same result.

Quick illustrated demo

By adjusting the two backgrounds exactly one above the other you'll get the UI you posted.

Hope it helps.

Further reading

To see how to draw 9-patched images here is a documentation.