CODEWITHSUNDEEP
androidandroid-layoutandroid-cardview
Nurzhan Nogerbek
Nurzhan Nogerbek

Reputation: 5246

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

Upvotes: 6

Views: 3186

Answers (3)

Anis LOUNIS aka AnixPasBesoin
Anis LOUNIS aka AnixPasBesoin

Reputation: 4956

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

Here is one of the 9 patched imaged that could have been used (the red line is separating the patches.

And here is another one

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.

Upvotes: 2

prats110892
prats110892

Reputation: 6749

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.

Upvotes: 6

Booger
Booger

Reputation: 18725

This can be accomplished by using a RelativeLayout. Then you can align all your views however you want inside your main view.

Thus, you would layout Card1 at the top, then layout the bubble connector with your marginTop attribute (remember this is from the top of the container, not from the bottom of the card) to layout that view wherever you want.

Basically, you would use a single RelativeLayout, then align the various views within that container wherever you want in relation to each other (or really in relation to the the top of your main view).

Checkout this Pseudo-code:

<RelativeLayout >
    <CardView
        layout_height = "8dp"
        alignParentTop = "true"
    />

    <!-- Connector Image -->
    <ImageView 
        alignParentTop = "true"
        layoutMarginTop = "10dp" <!-- or whatever it takes to align properly with CardView -->
    />
</RelativeLayout>

Upvotes: 0

Related Questions