Android Development - Graphical Layout looks different from actual XML

Question

Alright so I quickly created an XML file with the following contents:

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

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Text View 1"
                android:textSize="30dp" />

            <ListView
                android:id="@+id/listView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                >
            </ListView>

                        <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Text View 2"
                android:textSize="30dp" />


            <ListView
                android:id="@+id/listView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                >
            </ListView>

                <TextView
                android:id="@+id/textView3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Text View 3"
                android:textSize="30dp" />


            <ListView
                android:id="@+id/listView3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                >
            </ListView>

        </LinearLayout>

    </ScrollView>

</LinearLayout> 

And the question is, is that why does it look so much different when I click on the "Graphical Layout" tab? What I imagined the graphical layout to look like would basically be 3 labels right under each other (this is because I set everything to wrap content, and because there are no items inside either of the ListViews, so I'd think that it wouldn't even be visible). But anyway, the graphical layout shows it to be:

I'm not sure if that's correct or not, and if I run it will it look like I imagine it to look? I basically want (everything inside 1 ScrollView) 3 TextView's, and 1 ListView immediately following each TextView. So the layout will look like this:

ScrollView
TextView
ListView
TextView
ListView
TextView
ListView
End of ScrollView

Something exactly like the layout shown above. Could someone please tell me what is wrong within my XML file for all the other labels not be showing on it?

Note: When I click on the components on the side, it seems that a few things are shifting. (When I tried clicking on the TextView2 (to try to search for the blue bounds box) it seemed like the TextView1 label got pushed down a bit, and the second TextView was still not visible. If anyone could please help me achieve the layout that I want, it would be greatly appreciated.

Answer 1

EDIT: take a look at this approach.

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

    <ScrollView 
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Text View 1"
            android:textSize="30dp" /> 


    </ScrollView>            

    <ScrollView 
        android:id="@+id/scrollView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/scrollView1">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Text View 2"
            android:textSize="30dp" /> 


    </ScrollView>



   <ScrollView 
        android:id="@+id/scrollView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/scrollView2" >

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Text View 3"
            android:textSize="30dp" /> 


    </ScrollView>

</RelativeLayout>

As for the ListView you should not put a ListView inside a ScrollView. Here is an explanation of why you should not put a ListView inside a ScrollView: Listview inside ScrollView