How is this android UI element created

Question

I really like the design of this screen - can anyone suggest how they are doing the label/text part that has the time in it - its the square type element with rounded corners:

http://40.media.tumblr.com/bba2d04346d2d491b75a86f41bcf46fb/tumblr_ndaew2OwQv1r2wjwko3_1280.png

http://41.media.tumblr.com/b737ee9a30581c5843d85c43617685bf/tumblr_ndaew2OwQv1r2wjwko4_1280.png

I would like to try and do something similar, thx

You mean... the background drawable with rounded corners? http://stackoverflow.com/a/5618459/2001247 — ElDuderino, Dec 02 '14 at 09:08
possible duplicate of [How to draw rounded rectangle in Android UI?](http://stackoverflow.com/questions/5618402/how-to-draw-rounded-rectangle-in-android-ui) — Phantômaxx, Dec 02 '14 at 09:17
will that give the same look as the above images ? where u have a kind of horizontal line in the middle and 2 different colors above and below ? thx — makapaka, Dec 02 '14 at 09:22

score 1 · Accepted Answer · answered Dec 02 '14 at 10:12

I think your looking for a layout like this.Change the orientation and colors you need and add the elements you need in each layout.You can see the original view after run it in emulator or device only,So after creating this run the layout.

Layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"
    android:layout_height="200dp"
    android:orientation="vertical"
    android:weightSum="3"
    android:layout_margin="50dp"
    > 


    <LinearLayout

        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@drawable/rectangle_topcorner">

         <TextView android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:text="Email:"
         android:layout_gravity="center"
         android:textColor="@android:color/white"
         android:layout_marginLeft="10dip"
         />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/button2"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#002233">

          <TextView android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:text="Name:"
         android:textColor="@android:color/white"
         android:layout_gravity="center"
         android:layout_marginLeft="10dip"
         />
</LinearLayout>
    <LinearLayout
        android:id="@+id/button3"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@drawable/rectangle_bottemcorner">


        <TextView android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:text="Username:"
         android:textColor="@android:color/white"
         android:layout_gravity="center"
         android:layout_marginLeft="10dip"
         />
</LinearLayout>
</LinearLayout>

Drawables:

rectangle_bottemcorner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:id="@+id/background_shape"
    >
<corners android:bottomLeftRadius="20dp"
    android:bottomRightRadius="20dp"/>
<solid android:color="#005577"/>

</shape>

rectangle_topcorner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:id="@+id/background_shape"

    >
<corners android:topLeftRadius="20dp"
    android:topRightRadius="20dp"
    />
<solid android:color="#005577"/>

</shape>

hi it took me a while to try this out, but that is beautiful ! thx ! — makapaka, Dec 05 '14 at 00:59
Welcome.., Happy coding:), If this helpful can u give a +1 for this :P . — Remees M Syde, Dec 05 '14 at 04:50

How is this android UI element created

1 Answers1