Develop Reference

relativelayout align issue about text and image overlap

I have the circle icon , it build up by one text view and one image view .
I want text and image can overlap , so i use relativeLayout.
When i run the app , i found it's align out of my control from different screen size.
Is there any better way to design the layout ?
I set the layout like this:
<LinearLayout 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:orientation="vertical"
tools:context=".PageFragment.ActivityHomePage">
<LinearLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
android:padding="15dp"
android:orientation="vertical">
<TextView
android:id="#+id/activityHpEduin"
android:textSize="15dp"
android:textColor="#66CDAA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test" />
<TextView
android:id="#+id/activityHpTitle"
android:layout_marginTop="5dp"
android:textSize="20dp"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test" />
<TextView
android:textSize="18dp"
android:layout_marginTop="5dp"
android:textColor="#6666ff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7.16.2016-2/12.2017"
android:id="#+id/activityHpDate" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/circleNews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/btn_news" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginTop="70dp"
android:textColor="#android:color/white"
android:gravity="center"
android:text="#string/circleNews" />
<ImageView
android:id="#+id/circleActivityContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/circleNews"
android:src="#drawable/btn_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="140dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleActivityContent" />
<ImageView
android:id="#+id/circleSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/circleActivityContent"
android:src="#drawable/btn_apply" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="252dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleSignUp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<ImageView
android:id="#+id/circlePresenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/btn_speakers" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circlePresenter" />
<ImageView
android:id="#+id/circleHotel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/circlePresenter"
android:src="#drawable/btn_accommodation" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="138dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleHotel" />
<ImageView
android:id="#+id/circleTransportation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/circleHotel"
android:src="#drawable/btn_traffic" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="252dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleTransportation" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<ImageView
android:id="#+id/circleSponsor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="117dp"
android:src="#drawable/btn_sponsors" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="146dp"
android:layout_marginTop="70dp"
android:textColor="#android:color/white"
android:gravity="center"
android:text="#string/circleSponsor" />
</RelativeLayout>
</LinearLayout>

Try this sample code it is similar to what you want.
First here is the xml file code here i have a imageview and below it a text together they are in relative layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView3"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_weight="1"
android:src="#drawable/user_icon" />
<TextView
android:id="#+id/tv_email"
android:layout_width="200dp"
android:layout_height="45dp"
android:layout_alignStart="#+id/imageView3"
android:layout_below="#+id/imageView3"
android:layout_gravity="center_horizontal"
android:textColor="#color/White"
android:textSize="18sp" />
</RelativeLayout>
The output is like below:
another answer with new requirement:
xml code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="119dp"
android:layout_marginTop="50dp">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#drawable/banner_bg" />
<TextView
android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fontFamily="#string/font_family_universal"
android:gravity="center"
android:padding="20dp"
android:text="hello world"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="25dp"
android:textStyle="normal"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
screenshot of above code:
Remember its a sample code change background path accordingly and other properties.Here there is image and above it there is textview as required.

try to bring your textview on front like this
tv_shimmer_tv_gooffline.bringToFront();

Use SDP. It help me more for such designing to support multiple screen sizes.
SDP - a scalable size unit.
An android SDK that provides a new size unit - sdp (scalable dp). This size unit scales with the screen size. It can help Android developers with supporting multiple screens.
for text views please refer to ssp which is based on the sp size unit for texts.
https://github.com/intuit/sdp

White space scrollview Android (content size of scrollview)

I'm struggling with the content size of a scrollview in Android Studio.
I've made a simple scrollview with some images in it and textviews.
Everything works perfectly, but I'm struggling with one thing: The content size of the scrollview (like on iOS). I can't get the content size of the scrollview under control..
Now I have a white space at the end of the scrollview, but I don't want the white space to be the end of my scrollview (I think this is because the content size of my scrollview is too high, but I don't know how to control this). I want an image to be the end of the scrollview.
Here is my .xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView
android:layout_width="285dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="De schoen heeft u als bescherming van uw voet:"
android:id="#+id/textView"
android:layout_marginLeft="20dp"
android:layout_marginTop="15dp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/imageView7"
android:background="#drawable/inhousebtn"
android:layout_marginLeft="10dp"
android:layout_marginTop="15dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="- Dus ook in huis, schoen aan!"
android:id="#+id/textView5"
android:layout_marginLeft="77dp"
android:layout_marginTop="-40dp"
android:textSize="17dp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/imageView8"
android:background="#drawable/nietblotevoet"
android:layout_marginLeft="10dp"
android:layout_marginTop="40dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="- Nooit op blote voeten lopen"
android:id="#+id/textView6"
android:layout_marginLeft="77dp"
android:layout_marginTop="-40dp"
android:textSize="17dp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/imageView9"
android:background="#drawable/nietsokken"
android:layout_marginLeft="10dp"
android:layout_marginTop="40dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="- Nooit op sokken lopen"
android:id="#+id/textView7"
android:layout_marginLeft="77dp"
android:layout_marginTop="-40dp"
android:textSize="17dp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/imageView10"
android:background="#drawable/noslippers"
android:layout_marginLeft="10dp"
android:layout_marginTop="40dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="- Geen slippers/sandalen"
android:id="#+id/textView8"
android:layout_marginLeft="77dp"
android:layout_marginTop="-40dp"
android:textSize="17dp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/imageView12"
android:background="#drawable/zittenddouchen"
android:layout_marginLeft="10dp"
android:layout_marginTop="40dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="- Zittend douchen"
android:id="#+id/textView9"
android:layout_marginLeft="77dp"
android:layout_marginTop="-40dp"
android:textSize="17dp" />
<ImageView
android:layout_width="340dp"
android:layout_height="55dp"
android:id="#+id/imageView"
android:background="#drawable/underthingbescherming"
android:layout_gravity="center"
android:layout_marginTop="30dp" />
</LinearLayout>
</ScrollView>
Unfortunately I don't have the reputation to post images (If I had, this would be clearer).

Remove this
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
or change it to
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
let me know if you still have problems after that.

Android button height is different

I have two buttons inside a linear layout which have same properties defined. But to my surprise, both have different height. Please see the xml code below
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
Can you please help me to have the same height. I am wondering as to how both behaves differently. Also added includeFontPadding for the button. But no hope :(.

Your background drawables have different padding or height. check #drawable/btn_large_gray and #drawable/login_button_selector

put both the button inside linear layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/btn_large_gray"
android:text="#string/skip" />
</LinearLayout>
</LinearLayout>
and adjust both linear layouts as you like it

Try defining property android:layout_weight for each element in your LinearLayout, so they can have the same height.
For example :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="5dp" >
<ImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_weight="1"
android:layout_margin="5dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:src="#drawable/default_people_thumb" />
<TextView
android:id="#+id/tvUploadHeader"
style="#style/Text.Quaternary.Small.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/choose_a_profile_photo" />
<TextView
android:id="#+id/tvDescription"
style="#style/Text.Quaternary.ExtraSmall.Bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="#string/photo_upload_initial" />
<Button
android:id="#+id/btnChoosePhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
<Button
android:id="#+id/btnSkip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#drawable/login_button_selector"
android:text="#string/choose_photo_from_gallery" />
</LinearLayout>
The idea is to give as much space to each element. Your LinearLayout contains different elements so by choosing wrap_content in the android:layout_height and android:layout_width, space available will be allocated for each element added. And as you TextViews and Buttons are not the same...
Hope it'll help

You are using different style for both the buttons,
i.e. "#style/Text.Quaternary.Small.Bold" and "#style/Text.Quaternary.ExtraSmall.Bold" you should use only one style for both buttons

I can't get the button to the bottom of the layout

I'm trying to get the button to the bottom the layout, and it just won't work...
The button is displaying it self on the image that should be above it.
Here is the xml code:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_gravity="center"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp" />
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold" />
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal" />
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:text=""
android:width="600px"
android:maxLines="10"
android:scrollbars = "vertical"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppDesc"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:layout_toRightOf="#+id/imageView3"
android:visibility="visible" />
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/imageview4"
android:text="Download & Install" />
</RelativeLayout>
</ScrollView>
And the result is:
Thanx upfront.

You used android:layout_alignBottom="#+id/imageview4"
This means you align the bottom of your button with the bottom of your image.
You have to use android:layout_below="#+id/imageview4"
EDIT: I don't say this is the best solution, because of multiple layouts (for optimisation...) but this should work:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_gravity="center"
>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp"/>
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold"/>
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal"/>
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:text=""
android:width="600px"
android:maxLines="10"
android:scrollbars="vertical"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppDesc"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:layout_toRightOf="#+id/imageView3"
android:visibility="visible"/>
</RelativeLayout>
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Download & Install"/>
</LinearLayout>
</ScrollView>
I added a linear layout in which I put the content, and the button.
Hope this will work.

Do you just want the image that the button is over to shrink in order to make room for it? If so, you need to put the Imageview that contains that image as the very last item in your relative layout. It's going to allocate space for everything but the image, and then give the remaining space to the image, which is why it needs to be last.
Also, I suggest giving your imageViews more informative names than "imageView#", since it's kind of difficult to tell which is which.

You might want to wrap you images in a HorizontalScrollView to maintain full height and width of all your images. I changed a lot of the ViewGroups' widths and heights to accommodate the HorizontalScrollView, finally I set the Button below the images:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fillViewport="true" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp" />
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold" />
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal" />
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:maxLines="10"
android:scrollbars="vertical"
android:text=""
android:width="600px" />
<HorizontalScrollView
android:id="#+id/images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</HorizontalScrollView>
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/images"
android:layout_centerHorizontal="true"
android:text="Download & Install" />
</RelativeLayout>
</ScrollView>
Understand that nesting a HorizontalScrollView inside a ScrollView (or vica versa) does not create a smooth scrolling effect in the x & y directions simultaneously. But you can create this effect as discussed here: Scrollview vertical and horizontal in android.

Relative Layout Scaling?

I want to create a layout that appears on all devices as it does on my phone. I have tried to make it work for tablets, but it looks awful.
Here is what it should look like:
But here is how it appears on this tablet emulator:
What can I do to make it appear on all screen sizes like it is on my phone? I am currently using a RelativeLayout.
Here is my code:
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout02"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/terranlogo1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:src="#drawable/terranlogo" />
<ImageView
android:id="#+id/protosslogo1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:src="#drawable/protosslogo" />
<ImageView
android:id="#+id/zerglogo1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:src="#drawable/zerglogo" />
<CheckBox
android:id="#+id/ck_t1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/terranlogo1"
android:layout_centerHorizontal="true" />
<CheckBox
android:id="#+id/ck_p1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/protosslogo1"
android:layout_below="#id/protosslogo1"
android:layout_marginLeft="25dp" />
<CheckBox
android:id="#+id/ck_z1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/zerglogo1"
android:layout_below="#id/zerglogo1"
android:layout_marginLeft="25dp" />
<ImageView
android:id="#+id/terranlogo2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="#id/ck_t1"
android:layout_centerHorizontal="true"
android:src="#drawable/terranlogo" />
<ImageView
android:id="#+id/protosslogo2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:layout_below="#id/ck_p1"
android:src="#drawable/protosslogo" />
<ImageView
android:id="#+id/zerglogo2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_below="#id/ck_z1"
android:src="#drawable/zerglogo" />
<CheckBox
android:id="#+id/ck_t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/terranlogo2"
android:layout_centerHorizontal="true" />
<CheckBox
android:id="#+id/ck_p2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/protosslogo1"
android:layout_below="#id/protosslogo2"
android:layout_marginLeft="25dp" />
<CheckBox
android:id="#+id/ck_z2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/zerglogo1"
android:layout_below="#id/zerglogo2"
android:layout_marginLeft="25dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/ck_t2"
android:layout_marginRight="18dp"
android:layout_marginTop="17dp"
android:gravity="center_vertical|center_horizontal"
android:text="Choose your opponets race(s) and your race(s)"
android:textSize="30dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Game Length"
android:textSize="15dp" />
<Spinner
android:id="#+id/s_answertime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView1"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView4" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/terranlogo2"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:text="Mistakes Allowed"
android:textSize="15dp" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Answer Time"
android:textSize="15dp" />
<Spinner
android:id="#+id/s_mistakenumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/s_answertime"
android:layout_alignTop="#+id/s_answertime"
android:layout_toLeftOf="#+id/s_gametime"
android:layout_toRightOf="#+id/s_answertime" />
<Spinner
android:id="#+id/s_gametime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView3"
android:layout_alignLeft="#+id/protosslogo2"
android:layout_alignTop="#+id/s_mistakenumber" />
</RelativeLayout>
All help is appreciated, Lijap.

The spinners are stretched because you set layout_above and layout_below, so they stretch to accomodate both criteria. Remove one of these (probably layout_above) and set a reasonable fixed height for them (75dp?).
Also, your left/right most icon/checkboxes would probably look better with a nice healthy margin_left/right=50dp, to keep them from stretching all the way to the edge of the screen.