Android View Clipped below certain point

Question

I am developing an Android app (see screenshots).

I have a layout that looks fine in the graphical editor. However, the bottom 1/4 of the screen is clipped from view when the app is run in the emulator, as well as on an android phone. The app has several activities, and the problem seems to be widespread to all of them.

Here's the layout I'm using.

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android" android:clipChildren="false" android:clipToPadding="false" android:layout_height="fill_parent">
    <ImageView android:layout_height="wrap_content" android:src="@drawable/simpsonstextblack" android:layout_width="fill_parent" android:id="@+id/TitleImage" android:paddingBottom="25dp"></ImageView>
    <RelativeLayout android:layout_below="@+id/TitleImage" android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/RelativeLayout1" android:padding="5dp">
        <Button android:text="Take the Simpsons Challenge" android:gravity="center" android:clickable="true" android:id="@+id/ChallengeButton" android:layout_width="fill_parent" android:textSize="20dp" android:background="@drawable/buttonbackgroundblue" android:layout_height="50dp"></Button>
        <TextView android:layout_width="fill_parent" android:layout_below="@+id/ChallengeButton" android:layout_alignLeft="@+id/ChallengeButton" android:id="@+id/spacer1" android:layout_height="6dp"></TextView>
        <Button android:layout_width="fill_parent" android:text="Free Play" android:clickable="true" android:id="@+id/FreePlayButton" android:layout_height="50dp" android:textSize="20dp" android:background="@drawable/buttonbackgroundblue" android:layout_below="@+id/spacer1"></Button>
        <TextView android:layout_width="fill_parent" android:id="@+id/spacer2" android:layout_below="@+id/FreePlayButton" android:layout_alignLeft="@+id/FreePlayButton" android:layout_height="6dp"></TextView>
        <Button android:layout_height="50dp" android:textSize="20dp" android:id="@+id/HighScoreButton" android:background="@drawable/buttonbackgroundblue" android:layout_width="fill_parent" android:text="High Scores" android:layout_below="@+id/spacer2"></Button>
        <TextView android:layout_width="fill_parent" android:id="@+id/spacer3" android:layout_below="@+id/HighScoreButton" android:layout_alignLeft="@+id/HighScoreButton" android:layout_height="6dp"></TextView>
        <Button android:layout_height="50dp" android:textSize="20dp" android:id="@+id/HelpButton" android:background="@drawable/buttonbackgroundblue" android:layout_width="fill_parent" android:text="Help" android:layout_below="@+id/spacer3"></Button>
    </RelativeLayout>
    <RelativeLayout android:layout_below="@+id/RelativeLayout1" android:layout_width="fill_parent" android:id="@+id/RelativeLayout2" android:clipChildren="false" android:clipToPadding="false" android:layout_height="fill_parent">
        <TextView android:id="@+id/spacer1" android:layout_width="fill_parent" android:layout_height="30dp"></TextView>
        <TextView android:layout_below="@+id/spacer1" android:layout_height="wrap_content" android:layout_width="fill_parent" android:textAppearance="?android:attr/textAppearanceMedium" android:id="@+id/QuoteText" android:text='"A woman is a lot like a refrigerator. Six feet tall, 300 pounds…it makes ice. Heres some extra filler text just to demonstrate to you that if you add enough text it will most likely get clipped at some random point in the screen seemingly for no reason."'></TextView>
    </RelativeLayout>
</RelativeLayout>

Answer 1

My guess is that your app runs in compatability mode. Try setting following in the manifest:

<supports-screens android:smallScreens="true"
    android:normalScreens="true" 
    android:largeScreens="true"
    android:anyDensity="true" />

If it is the issue you can read more about it here: http://developer.android.com/guide/topics/manifest/supports-screens-element.html. In short android:largeScreens default value varies accros versions :)

Answer 2

The issue is that your last TextView (@+id/QuoteText) is set to android:visibility="invisible". This means that the contents are invisible, but it still takes up space. You want to use android:visibility="gone" instead.

I apologize for stating that it did not work correctly on my phone before. Because the text did not reach the bottom of the screen on my device, I added space to the ImageView at the top, however that pushed the TextView which is blocking the text off the screen, so it appeared to work for me. Hope this helps!

Edit:

That was not the issue either. I believe the problem is that your bottom RelativeLayout is defined as

<RelativeLayout
    android:layout_width="fill_parent"
    android:id="@+id/RelativeLayout1"
    android:layout_height="200dp">

which gives the bottom panel a fixed height. When I change android:layout_height="200dp" to android:layout_height="fill_parent" the clipping problem goes away for me. Perhaps you have the same problem with your other activities?

I don't see why your layout isn't working, but I do think that you can achieve the same thing more easily and efficiently by using LinearLayouts instead of RelativeLayouts. And perhaps it will solve your problem along the way. Instead of using your spacer views, I think it is better to use padding. Here's what I mean:

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

    <ImageView
        android:id="@+id/TitleImage"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        android:src="@drawable/simpsonstextblack" >
    </ImageView>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/TitleImage"
        android:orientation="vertical"
        android:padding="5dp" >

        <Button
            android:id="@+id/ChallengeButton"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:clickable="true"
            android:paddingLeft="6dp"
            android:paddingRight="6dp"
            android:text="Take the Simpsons Challenge"
            android:textSize="20dp" >
        </Button>

        <Button
            android:id="@+id/FreePlayButton"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:clickable="true"
            android:paddingLeft="6dp"
            android:paddingRight="6dp"
            android:text="Free Play"
            android:textSize="20dp" >
        </Button>

        <Button
            android:id="@+id/HighScoreButton"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:paddingLeft="6dp"
            android:paddingRight="6dp"
            android:text="High Scores"
            android:textSize="20dp" >
        </Button>

        <Button
            android:id="@+id/HelpButton"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:paddingLeft="6dp"
            android:paddingRight="6dp"
            android:text="Help"
            android:textSize="20dp" >
        </Button>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/QuoteText"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingTop="30dp"
            android:text="&quot;A woman is a lot like a refrigerator. Six feet tall, 300 pounds…it makes ice. Heres some extra filler text just to demonstrate to you that if you add enough text it will most likely get clipped at some random point in the screen seemingly for no reason. &quot;"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </LinearLayout>
</LinearLayout>