We have built an online shopping app.
We have two layouts for gridview.
The first one:
<RelativeLayout 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:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
tools:context=".HomeActivity">
<GridView
android:id="#+id/gridView"
android:numColumns="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
</RelativeLayout>
And the second one for each gridview cell:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/singleCell"
android:layout_width="345px"
android:layout_height="400px"
android:background="#E6E6E6">
<ImageView
android:contentDescription="#string/hello_world"
android:id="#+id/profileImg"
android:layout_width="fill_parent"
android:layout_height="330px"
android:scaleType="fitXY"
android:layout_marginLeft="1px"
android:layout_marginTop="2px"/>
<TextView
android:id="#+id/friend_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Name"
android:textColor="#000000"
android:textStyle="bold"
android:layout_marginTop="340px"
android:layout_marginLeft="20px"
android:textSize="13sp">
</TextView>
</FrameLayout>
The problem is that in some devices the gridview is displayed correctly like this and the ratio is ok.
gridview is displayed correctly on some devices
but in several other devices, the images height and ratio changes and the image is displayed incorrectly.
gridview is displayed incorrectly on some devices
We would be happy if you give us a solution and help us. This is a critical problem as the gridcell image height changes and gets longer in some devices.
You can try with changing the scale type of Imageview. Write this line
android:scaleType="centerCrop"
instead of
android:scaleType="fitXY"
#nazmul-hasan-masum, Thanks. I used your solution but at first the problem didn't get solved so I changed the imageview and text unit from px to the equivalent dp and everything is ok right now.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/singleCell"
android:layout_width="345px"
android:layout_height="400px"
android:background="#E6E6E6">
<ImageView
android:contentDescription="#string/hello_world"
android:id="#+id/profileImg"
android:layout_width="fill_parent"
android:layout_height="128dp"
android:scaleType="centerCrop"
android:layout_marginLeft="1px"
android:layout_marginRight="1px"
android:layout_marginTop="2px"/>
<TextView
android:id="#+id/friend_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Name"
android:textColor="#000000"
android:textStyle="bold"
android:layout_marginTop="130dp"
android:layout_marginLeft="20px"
android:textSize="13sp">
</TextView>
</FrameLayout>
Related
I am new to android programming but I know how everything works, recently I was trying to create an app just like uber after I finished creating the launch activity i tested it on my actual device just to check whether everything looks fine but when I launched it on my device everything (layouts, imageViews, Textviews..etc) were misplaced, I have never had this problem before its just this time. could anyone please tell me where am I going wrong?
I am attaching screenshots below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context="com.example.keyur.uber.MainActivity">
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/layout1"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/showtext"
android:layout_width="300dp"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="20dp"
android:background="#ffffff"
android:fontFamily="monospace"
android:text="#string/get_moving_with_uber"
android:textColor="#000000"
android:textSize="20sp"
android:typeface="monospace" />
<ImageView
android:layout_width="40dp"
android:id="#+id/imgv"
android:layout_height="30dp"
android:layout_below="#id/showtext"
android:layout_marginLeft="30dp"
android:background="#drawable/india"
/>
<TextView
android:layout_width="40dp"
android:id="#+id/countrycode"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginStart="13dp"
android:layout_toEndOf="#+id/imgv"
android:text="#string/_91"
android:textColor="#000000"
android:textSize="22sp"
android:fontFamily="monospace"
/>
<EditText
android:id="#+id/editText"
android:layout_width="250dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:background="#ffffff"
android:fontFamily="monospace"
android:hint="#string/enter_your_mobile_number"
android:textColor="#000000"
android:textColorHint="#484848"
android:textSize="17sp"
android:inputType="number"
/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imgone"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#drawable/layoutbg" />
</RelativeLayout>
</LinearLayout>
screenshots-
this is what the app looks on pixel 4 as it is set on default.
enter image description here
this is what it looks when I switch it to pixel xl, everything gets messed up
enter image description here
Due do you are fixing the layout hight an width so each and very device have different screen size. You should use match_parent and wrap_content. If you want to split all device space in the same manner, you have to use weight.
How to use weight reference
Either you can go for "Weight Sum", or you should set your
TextView for country-code "layout_toRightOf" to image view
instead of "layout_toEndOf".
I read this Android Studio documentation: https://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts
Well the documentation is pretty obvious, to support different screens.
Use match_parent, wrap_content, create layout-sw folders.. Hmm, eazy task.. Yep, I made 5 layout-sw300dp-700dp folders, every layout owns match-parent and wrap content characteristic.. But somehow my image isn't getting scaled and all I want to do is to scale the image in one of my LinearLayouts..
I know theres a lot of answer out there on the forum, but as you can see its not confusing for me, but I'm sure I'm missing something important to end the screen support..
Should I create different size images and place them in a drawable folder?
Because whenever I'm reviewing another layout file for example sw600dp the image isnt scaled there.. Even the layouts aren't getting scaled..
Should I configure every layout-sw folders? I mean to place bigger image, to resize layouts.
I need to fill up the LinearLayout with the image. Now there's white spaces on the left and right side of the LinearLayout
The code belongs to the RelativeLayout, which has match-parents aswell.
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:padding="15dp"
android:text="This is random text"
android:textColor="#000000"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.39"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</TextView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="50dp"
android:id="#+id/linearLayout"
android:layout_above="#+id/linearLayout2"
android:layout_alignParentEnd="true">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="50dp"
android:id="#+id/linearLayout2"
android:layout_above="#+id/linearLayout4"
android:layout_alignParentStart="true"
android:layout_marginTop="15dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="50dp"
android:layout_marginTop="15dp"
android:id="#+id/linearLayout4"
android:layout_above="#+id/linearLayout5"
android:layout_alignParentStart="true">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="15dp"
android:id="#+id/linearLayout5"
android:gravity="fill">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/info1"
android:layout_gravity="fill_horizontal"
android:contentDescription="" />
</LinearLayout>
I have 2 devices: Asus Zenfone 2 (6.0.1) and Galaxy Note 3 (5.0)
In my app I take photo and on the next screen I show it on ImageView and add some information on it. Here is xml layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:background="#android:color/black">
<LinearLayout
android:id="#+id/preview_buttons"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#android:color/black">
<TextView
android:id="#+id/tv_cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:textSize="16sp"
android:text="CANCEL"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"/>
<TextView
android:id="#+id/tv_accept"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:textSize="16sp"
android:text="ACCEPT"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/preview_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#android:color/holo_blue_bright"
android:layout_above="#id/preview_buttons">
<ImageView
android:id="#+id/image_preview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
/>
<TextView
android:id="#+id/preview_top_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:layout_alignRight="#id/image_preview"
android:layout_alignTop="#id/image_preview"
android:gravity="right"
android:background="#drawable/top_text_background"
android:textSize="16sp"
android:textColor="#android:color/white"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginBottom="8dp"
android:layout_alignLeft="#id/image_preview"
android:layout_alignBottom="#id/image_preview"
android:src="#drawable/ic_verified_grey600"/>
<TextView
android:id="#+id/preview_bottom_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="16dp"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:layout_alignRight="#id/image_preview"
android:layout_alignBottom="#id/image_preview"
android:gravity="right"
android:background="#drawable/bottom_text_background"
android:textSize="16sp"
android:textColor="#android:color/white"/>
</RelativeLayout>
</RelativeLayout>
UPD. I have problem with RelativeLayout "preview_container"
From this layout I expect its width would wrap, if ImageView's width doesn't fill whole screen and be on the screen center. And it works nice on GN3, but on my AZ2 I get space at right side (No reputation to insert image, it's here http://i.imgur.com/cSujbAp.png)
UPD2. What I expect: RelativeLayout wraped correctly, so I don't see background. Example from my GN3 here (http://i.imgur.com/vKGQq8r.jpg). Transparent background also can't help because after that I need to get drawing cache of this layout and work with it
I know about alignParent issue, but I don't use it now and my extra views placed correct.
Please help me, what's wrong?
<ImageView
android:id="#+id/image_preview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
/>
android:layout_height="match_parent" should not be match_parent.
Your preview_top_text has the width set to match_parent so it means that, since her container is the same of the image, it will stretch way to contain also the textview and not only the imageview.
Add the android:layout_centerHorizontal="true" parameter to the imageview and it should be centered.
Hope it helped
UPDATE POINT 2
two possibilities:
change the sizes of the TextViews to wrap_content
change the background of the second relativelayout to transparent
As part of the on-boarding for my app, I have a series of translucent overlays that highlight the UI. Each one is a LinearLayout, initially invisible (actually "gone"), that I make visible in turn. I am having a very tough time getting one of these to display correctly on both tablets and phones, in both portrait and landscape. I can tune it to work on the phone, but then it doesn't display well on tablet-portrait.
The images here are set up to work well on 10" tablets in portrait, and they work for 7" tablets and phones in portrait, but not in landscape. In the images below, I would like the arrows (two ImageViews) to resize as needed to make room for the text. However, the Layout seems to give priority to the ImageViews no matter what I do.
(Note that I do realize I could make this work, in a way, with a RelativeLayout, however, I cannot get the translucent backgrounds to work, filling the screen, using a RelativeLayout, as far as I know.)
My question in brief: Is there a way to make LinearLayout prioritize the TextViews, giving them enough space, and resizing the ImageViews to fit the rest?
Here is a good layout (10" tablet, portrait, shown at reduced scale):
Here is a bad one with some of the text cut off (10" tablet, landscape, reduced scale):
Here is another bad one (phone):
I don't have a screenshot of the other tuning, but it displayed big arrows and no central "Tap to Continue" button.
Here is my current XML:
<RelativeLayout
android:id="#+id/main_holder"
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">
<LinearLayout
android:id="#+id/intro3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone"
android:onClick="introClicked"
android:clickable="true">
<LinearLayout
android:id="#+id/intro3_top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="top|center_horizontal"
android:orientation="vertical"
android:gravity="top|center_horizontal">
<TextView
android:id="#+id/textViewIntro3_1"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe up to mark a spark completed."
android:layout_gravity="center_horizontal|top"
android:gravity="center"
android:layout_weight="1"
android:paddingBottom="5dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:adjustViewBounds="false"
android:background="#drawable/grad_bottom"
android:padding="10dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/arrow_up"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:layout_weight="0"
android:background="#85000000"
android:gravity="center">
<TextView
android:id="#+id/button_intro3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alpha="0"
android:background="#drawable/roundrect"
android:onClick="introClicked"
android:padding="10dp"
android:text="Tap to Continue"
android:clickable="true"
android:enabled="true"
android:textColor="#FFFFF6C3"
android:textSize="24sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/intro3_bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="bottom|center_horizontal"
android:gravity="bottom|center_horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:adjustViewBounds="false"
android:background="#drawable/grad_top"
android:layout_weight="1"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_down"/>
<TextView
android:id="#+id/textViewIntro3_2"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe down to reject.\n "
android:layout_gravity="center_horizontal|bottom"
android:gravity="center"
android:layout_weight="1"
android:paddingBottom="0dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
There're several possible way of doing it. I've updated your layout a bit, so now it should meet your expectations:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/main_holder"
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">
<RelativeLayout
android:id="#+id/intro3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
android:onClick="introClicked"
android:clickable="true">
<TextView
android:id="#+id/textViewIntro3_1"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe up to mark a spark completed."
android:gravity="center"
android:layout_alignParentTop="true"
android:paddingBottom="5dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button_intro3"
android:layout_below="#+id/textViewIntro3_1"
android:adjustViewBounds="false"
android:background="#drawable/grad_bottom"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_up"/>
<TextView
android:id="#+id/button_intro3"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alpha="0"
android:background="#drawable/roundrect"
android:onClick="introClicked"
android:padding="10dp"
android:text="Tap to Continue"
android:clickable="true"
android:enabled="true"
android:textColor="#FFFFF6C3"
android:textSize="24sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:background="#drawable/grad_top"
android:layout_below="#+id/button_intro3"
android:layout_above="#+id/textViewIntro3_2"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_down"/>
<TextView
android:id="#+id/textViewIntro3_2"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe down to reject.\n "
android:gravity="center"
android:layout_alignParentBottom="true"
android:paddingBottom="0dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
</RelativeLayout>
</RelativeLayout>
What I did here is to rewrite the layout with RelativeLayout instead of LinearLayouts. It suits better here, in my humble opinion.
I hope, it helps.
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>
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 :)
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=""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. ""
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>