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.

The view from my eclipse editor The view from my android emulator

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>

I cannot reproduce this issue on my device. When you run on your device does it show the same thing as the emulator? — skynet, Oct 24 '11 at 18:17
Yes, the screenshot is taken from the emulator itself. Try adding a couple more lines of text to the bottom textview and see if they get clipped. — Rob, Oct 24 '11 at 18:57
What I was saying is that it may work properly on a physical device and not in the emulator, although it should work in the emulator. Just trying to rule out that possibility. I have added enough lines of text for it to scroll past the bottom of the screen, but it only clips it at the edge of the screen on my device. — skynet, Oct 24 '11 at 19:05
Interesting. I did try an older version of the layout on a friend's phone and had the same issue as the emulator, but perhaps some minor tinkering fixed it. I'll try it out. — Rob, Oct 24 '11 at 19:34
still no changes on the phone. The problem seems to be application wide, and apparently varies from phone to phone. Are there any application wide variables that might control this? I'm new to developing, so it's entirely possible that I've made a very silly mistake. — Rob, Oct 25 '11 at 04:09

score 2 · Accepted Answer · answered Oct 31 '11 at 21:04

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 :)

skynet · Answer 2 · 2011-10-26T04:02:10.633

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>

I'm aware of that textview being invisible. I should have taken that out, but that's not the issue (if I set it to gone, the screen still clips 75% down the screen and occludes the quote text. Again, the problem is widespread to all activities in the application, so the problem probably isn't with any individual view element. — Rob, Oct 25 '11 at 14:51
You are correct, that was not the issue. I have edited my answer, see if it helps. — skynet, Oct 25 '11 at 16:41
Could you update your XML layout to what you currently have? Also, what is the height of the image you use for your ImageButton? — skynet, Oct 25 '11 at 21:40
Layout is updated. Button image is a PNG 638 x 93. Could the issue have anything to do with removing the title bar / displaying full screen? — Rob, Oct 26 '11 at 00:57
Odd... I created a blank png of those dimensions, enabled fullscreen and disabled the title bar, and I still didn't see the issue on my device. I edited my answer with an example of using LinearLayouts to achieve the same layout you have, perhaps it will solve your issue. — skynet, Oct 26 '11 at 04:04
I originally was using linear layouts, and am using them on all the other activities. Could the issue have anything to do with targeting phones of certain sizes/pixel densities? I have not specifically configured anything to work differently depending on those factors. — Rob, Oct 26 '11 at 16:38

Android View Clipped below certain point

2 Answers2