Question

So I am creating an android app to communicate with arduino over serial. It is going quite well, but I am having some problems with the layout. My TextView is overlapping on both the top and bottom, and I have no idea why!

https://www.dropbox.com/s/jaz8vbx63kd25ix/Screenshot_2012-09-27-18-53-24.png

Here is my main.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginBottom="20dp" >

    <TextView
        android:id="@+id/demoTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

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

        <TextView
            android:id="@+id/demoText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:typeface="monospace" />

    </ScrollView>

    <RelativeLayout
        android:id="@+id/send"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/sendButton"

        android:ems="10"
        android:hint="@string/send_text"
        android:inputType="text"
        android:singleLine="true" >
     </EditText>

    <Button
        android:id="@+id/sendButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button" />

    </RelativeLayout>

</FrameLayout>

Thanks in advance.

Answer 1

It’s likely because you’re using a FrameLayout, which “should be used to hold a single child view, because it can be difficult to organize child views in a way that’s scalable to different screen sizes without the children overlapping each other“. Try using a LinearLayout with a vertical orientation.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="20dp"
    android:orientation="vertical" >

    <TextView
    android:id="@+id/demoTitle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello" />

    <!-- ... -->

    </RelativeLayout>

</LinearLayout>