Как я могу реализовать этот интерфейс в Android

Question

Я хочу создать пользовательский интерфейс, как показано на рисунке, но не совсем, но похоже. Как я могу это реализовать?

Answer 1

Для этого вам нужно сделать один XML-файл и поместить его в папку для рисования.

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>

Теперь создайте еще один XML-файл, в котором задайте textview и 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>

Answer 2

использовать tablelayout вот так

<?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 3

Вы можете использовать Table Layout для разработки такого представления, а также вы можете использовать инструмент для разработки пользовательского интерфейса, называемый Droid Draw. Загрузите файл .exe и установите его на свой ПК и запустите 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 4

вот рецепт.

1. Возьмите 3 изображения, как показано ниже 1.1 Верхний закругленный угол 1.2 Среднее изображение (заостренный угол) 1.3 Нижний закругленный угол

2. Возьмите текстовое представление и установите вышеупомянутые изображения в качестве фона.

Используйте LinearLayout с ориентацией vertical