Nurzhan Nogerbek Nurzhan Nogerbek - 4 months ago 23
Android Question

Design UI Android (Element between CardViews)

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!

enter image description here

Answer

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 Circle

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.