Android studio , how to align multiple text view and edit texts in linear layout(horizontal)

Question

I'm a beginner in android development, my project requires me to build a simple UI app using two fragments (home and field). The home will show the starup page with 5 buttons. when we click on these buttons, it will then call field fragment and show fields like:

conductivity:----,height:---- and etc to fill up, like inserting manual data.

my issue here is , the project requires me to use linearlayout in horizontal alignment for the field frag, when i do that and add edit text and text views, its lined in same line as horizontal, but what i need is it to appear one and the other below it: SOme thing like

conductivity(text view): ___________(editText) [another line] height(text view):________(editText)

and so on. SOrry this might be a simple issue but i have been stuck on this for 2 days now. Help me

my code for field fragment.xml is as follows:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hp1_textView"
    android:id="@+id/hp1_textView"
    android:textSize="32sp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" />

<LinearLayout        android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/hp1_textView"
    android:layout_centerHorizontal="true"
    android:id="@+id/linearLayout">
    <TextView            android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="@string/conductivity"
        android:id="@+id/textView"/>
    <EditText            android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_weight="1"
        android:hint="@string/conductivity_field" />
    <TextView            android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="pH:"
        android:id="@+id/textView2" />
    <EditText            android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText2"
        android:layout_weight="1"
        android:hint="0.-14" />

</LinearLayout>
</RelativeLayout>

THis is how i want it to display

Answer 1

Use this xml in your code as it is

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dp"
        android:weightSum="2">


        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Conductivity (uS):  "
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="745.2" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dp"
        android:weightSum="2">


        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="pH:  "
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="7.1" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dp"
        android:weightSum="2">


        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Moisture(%):  "
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <EditText
            android:id="@+id/editText3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="0-100" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dp"
        android:weightSum="2">


        <TextView
            android:id="@+id/textVie4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:singleLine="true"
            android:text="Dissolved oxygen(ppm):  "
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <EditText
            android:id="@+id/editText4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="0-100" />

    </LinearLayout>

    <Button
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:padding="5dp"
        android:text="Save Log Entry" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:padding="5dp"
        android:text="Show Log Entry" />


</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:padding="5dp"
    android:weightSum="3">


    <Button
        android:id="@+id/btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:padding="5dp"
        android:text="Previouse" />

    <Button
        android:id="@+id/btn4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:padding="5dp"
        android:text="Next" />


    <Button
        android:id="@+id/btn5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:padding="5dp"
        android:text="Home" />

</LinearLayout>

</RelativeLayout>

I hope its solve your problem.....

Answer 2

Try below with android:weightSum and LinearLayout with android:orientation

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/hp1_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="hp1"
        android:textSize="32sp" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="12">

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="2"
            android:orientation="horizontal"
            android:weightSum="2">

            <TextView
                android:id="@+id/textView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:text="conductivity"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <EditText
                android:id="@+id/editText"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:hint="conductivity_field" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="2"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:text="pH:"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:hint="0.-14" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="2"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:text="Moisture(%):"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <EditText
                android:id="@+id/editText3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:hint="0-100" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="2"
            android:orientation="horizontal"
            android:weightSum="2">

            <TextView
                android:id="@+id/textView4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:text="Disolved Oxygen(ppm)"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <EditText
                android:id="@+id/editText4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:hint="0-100" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_weight="2"
            android:orientation="vertical"
            android:weightSum="2">

            <Button
                android:id="@+id/Button11"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:gravity="center"
                android:text="Save log entry"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <Button
                android:id="@+id/Button12"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:gravity="center"
                android:hint="Show log entries"
                android:textAppearance="?android:attr/textAppearanceMedium" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_weight="2"
            android:orientation="horizontal"
            android:weightSum="3">

            <Button
                android:id="@+id/Button1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:gravity="center"
                android:text="conductivity"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <Button
                android:id="@+id/Button2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:hint="conductivity_field" />

            <Button
                android:id="@+id/Button3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:hint="conductivity_field" />
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Answer 3

If my understanding of your scenario is correct, to display them one below the other as in the image you have supplied, the orientation of the linearLayout must be set to vertical . If you use orientation horizontal the drawing of widgets will falls to the next line, only after it has drawn widgets completely all the way up to the width of your phone( and then it jumped to the next line) .So the LinearLayout should be changed to vertical orientation

<LinearLayout       
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/hp1_textView"
    android:layout_centerHorizontal="true"
    android:id="@+id/linearLayout">