How can I implement this UI in Android

Question

I want to create an UI as shown in the figure, not exactly, though, but similar. How can I implement this?

Answer 1

You can use Table Layout to design such a View or also you can use a Tool for UI design Called Droid Draw.. Download the .exe file and install in your PC and start Design Droid Draw UI design Tool

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white"/>
<corners android:radius="10px" />
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> 

Answer 2

here is the recipe.

1. Take 3 images as below 1.1 Top rounded corner 1.2 middle image (sharped corner) 1.3 Bottom rounded corner

2. Take the Text view and set the above images as background.

Use LinearLayout with orientation vertical

Answer 3

use tablelayout like this

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
<TableRow>
<TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="First Name"
 />
</TableRow>
<TableRow>
<TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="Last Name"
 />
</TableRow>
</TableLayout>

Answer 4

For that you need to make one xml file and put it into drawable folder .

rounded_background.xml

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#ffffffff"/>    

    <stroke android:width="1dp"
            android:color="#ababab"
            />

    <padding android:left="1dp"
             android:top="1dp"
             android:right="1dp"
             android:bottom="1dp"
             /> 

    <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" 
     android:topLeftRadius="7dp" android:topRightRadius="7dp"/> 
</shape>

Now make another xml file in which set textview and edittext .

main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="@drawable/rounded_background"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="10dp" 
            android:layout_marginTop="20dp">

    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:orientation="horizontal"
        android:paddingLeft="10dp">

<TextView android:text="Initial"  android:textColor="#686868"
        android:id="@+id/lable" android:textSize="10sp" android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        ></TextView>

        <EditText android:id="@+id/r_email" android:layout_width="fill_parent"
            android:layout_height="35dp" android:singleLine="true"
            android:inputType="textEmailAddress" android:textSize="15sp"
            android:background="@android:color/transparent" android:hint="Initial" />
    </LinearLayout>

    <View android:layout_width="fill_parent" android:layout_height="1dip"
        android:background="#ababab" />

    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:orientation="horizontal"
        android:paddingLeft="10dp">

<TextView android:text="Initial"  android:textColor="#686868"
        android:id="@+id/lable" android:textSize="10sp" android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        ></TextView>

        <EditText android:id="@+id/r_email" android:layout_width="fill_parent"
            android:layout_height="35dp" android:singleLine="true"
            android:inputType="textEmailAddress" android:textSize="15sp"
            android:background="@android:color/transparent" android:hint="Initial" />
    </LinearLayout>
</LinearLayout>
</LinearLayout>