How can I implement this UI in Android

问题:

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

回答1:

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>

回答2:

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>

回答3:

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" /> 

回答4:

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