XML Margins not what I expect, all on same "line", not stacked

Question

I'm following this tutorial and have the program working technically, only the Button and Image are inline with the display and text entry box.

I want it to look like the image below, but instead it has all of those elements on one horizontal line.

Image: How I want it to look like:

Here's the activity_main.xml

<LinearLayout 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=".MainActivity">

    <TextView
        android:id="@+id/main_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:text="@string/textView"/>
    <!-- Displays keyboard when touched -->
    <EditText
        android:id="@+id/main_edittext"
        android:inputType="textCapSentences"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:hint="@string/hint"/>
    <!-- List whose dataset is defined in code with an adapter -->
    <ListView
        android:id="@+id/main_listview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="20dp"/>
            <!-- Set OnClickListener to trigger results when pressed -->
    <Button
        android:id="@+id/main_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:text="@string/button" />
    <!-- Shows an image from your drawable resources -->
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:src="@drawable/ic_launcher" />
    <!-- Closing tag for the horizontal nested layout -->
</LinearLayout>

Do you need the MainActivity.java? If so, I'll post it. That part works, I can get input from keyboard, and it displays - and if the string is long enough, will fill to the right, pushing everything else over.

I understand that's from the wrap_content property, right?

Final thought: The tutorial says

Add the EditText XML to activity_main.xml as a sibling to the TextView and the horizontal LinearLayout.

I wasn't sure what it means to make it a sibling, so I just put it after TextView, as you may see. Does that have anything to do with it?

Thanks for any ideas or advice! (Sorry if the title is a little convoluted.)

edit: There was a comment basically saying to add android:orientation="vertical" to the top <LinearLayout xmlns:android... > part. That worked! Only now the button and image are pushed down to the bottom of the screen, while the text entry box and display are up top...so lots of white space. I thought that I had set them to all be 20dp separate from eachother?

Edit2: I fixed, kind of, that spacing issue by setting <textWidth>, <EditText>, and <Button> to have android:layout_width="match_parent" android:layout_height="wrap_content". ...but now they are horizontal (yay!) but not like the screenshot. How do I get them lined up like that?

Answer 1

try this

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/main_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:text="textView"/>
    <!-- Displays keyboard when touched -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/main_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="20dp"
            android:text="button" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="20dp"
            android:src="@drawable/ic_launcher" />

    </LinearLayout>

    <EditText
        android:id="@+id/main_edittext"
        android:inputType="textCapSentences"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:hint="hint"/>

    <!-- List whose dataset is defined in code with an adapter -->
    <ListView
        android:id="@+id/main_listview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="20dp"/>



    <!-- Closing tag for the horizontal nested layout -->
</LinearLayout>