Clever Geek Handbook

Android UI Design (element between CardViews)

My question is more informative. I just want to know how to do such a design. I found an Android application called "weather graph" and inside this application between CardViews (as I understand it) they used this element, which I indicated in the picture below. I think it is just an ImageView, but how to set it here. It will be interesting to know about it! Thanks for your attention!

enter image description here

+3


source to share


3 answers


You can easily do it like this. Suppose we are using a collection view where the map element is one type and the black space with text in the middle is another. The CardView will 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 the drawn circle looks something like this Circle

and a black grape layout 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

is24dp + CircleHalfSize - LineWidthHalfSize

Of course, CircleHalfSize

they LineWidthHalfSize

are inDP

Now it is only a matter of placing them correctly through the adapter. Personally, I would use a RecyclerView. Great flexibility.

Also, if you want the bubbles to disappear, all you have to do is set the visibility of the visible image as a bubble to GONE

, and this too you can do specifically for either the top or the bottom.

+3


source


I'm sure this can be accomplished using 9-corrected images.

By determining how you paint your patches and how to set them as the background for your layouts, you will 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 get the user interface that you have placed.

Hope it helps.

Further reading

To see how to draw 9-shaped images here is the documentation.

+2


source


This can be done using RelativeLayout. You can then align all of your views, but you want them to be within your main view.

So you have to position Card1 at the top and then mark up the bubble connector with the marginTop attribute (remember this is from the top of the container, not the bottom of the card) to the layout, which views wherever you want.

Basically, you should use one RelativeLayout and then align the different views within that container, wherever you are in relation to each other (or indeed in relation to the top of the 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>
0


source






More articles:


All Articles