How to achieve this layout in Android using Android Studio

Question

I am trying to achieve the below layout in Android studio but I can't seem to get it working.

I have so far:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="net.firstapp.myapplication.Main">


    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text" // I want this to be a dropdown with options male and female
        android:text="Name"
        android:ems="10"
        android:id="@+id/editText" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textMultiLine"
        android:ems="10"
        android:id="@+id/editText2" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPostalAddress"
        android:ems="10"
        android:id="@+id/editText3" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/editText4" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text="Name"
        android:ems="10"
        android:id="@+id/editText5" />

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:id="@+id/editText6" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="phone"
        android:ems="10"
        android:id="@+id/editText7" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button4" />
</FrameLayout>

I am new to Android and I am not sure what I should do - I am struggling to make the above layout.

Answer 1

For dropdown you can user Spinner :

https://www.tutorialspoint.com/android/android_spinner_control.htm

To Manage layout you should use RelativeLayout .. So you can get your view by managing them with properties of RelativeLayout like LEFT_OF , RIGHT_OF etc :

https://developer.android.com/reference/android/widget/RelativeLayout.html

https://www.mkyong.com/android/android-relativelayout-example/

http://androidexample.com/Relative_Layout_Basics_-_Android_Example/index.php?view=article_discription&aid=73

Answer 2

You are using a framelayout as the parent view in your hierarchy. Framelayouts are supposed to contain just one child view usually. It will not let you achieve this list-like view. See more over here: FrameLayouts

The best option for you here would be to use a vertical LinearLayout as the parent. Some LinearLayouts will have to be made childs of the parent LinearLayout too(for the views that are positioned side by side) See more here: LinearLayouts

RelativeLayouts seem to be a good option too

Answer 3

This shall get you going.

<ScrollView>
 <RelativeLayout>
  <Spinner>
  <EditText> //add minLines property

  <RelativeLayout>
   <EditText paddingRight="width of image view">
   <ImageView alignParentRight=true>
  </RelativeLayout>

  <RelativeLayout>
   <EditText>
   <EditText> //use rightOf property
  </RelativeLayout>

  <TextView marginTop="20dp">
  <EditText>
  <EditText>

  <RelativeLayout>
   <TextView width="match_parent" leftOf="view">
   <View width="1dp" centerHorizontal="true">
   <TextView with ="match_parent" rightOf="view">
  </RelativeLayout>

  <TextView>

 </RelativeLayout>
</ScrollView>