How can i fit RelativeLayout to screen?

How can i fit RelativeLayout to screen? - android

I am facing with problem button shows outside the screen in RelativeLayout. ImageView doesn't o scale picture to give a button visible place.
What I have:
What I want:
Code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:textAppearance="#android:style/TextAppearance.Small"
android:textColor="?android:attr/textColorTertiary"
android:layout_centerHorizontal="true"
/>
<ru.mw.widget.DrawableImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
/>
<Button
android:id="#+id/processButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
/>
Problem when I change screen orientation:
If I use Arun C Thomas's method in landscape mode everything is ok, but in portrait mode I have this (image cropped by left/right edges):
What is expected:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:textColor="?android:attr/textColorTertiary"
android:textAppearance="#android:style/TextAppearance.Small"
android:layout_centerHorizontal="true"
/>
<ru.mw.widget.DrawableImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:layout_above="#+id/processButton"
/>
<Button
android:id="#+id/processButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
This is the solution
Now to achieve the Updated requirement add the above layout to layout-land folder in res (if you don't have one create a folder named layout-land in res ) now in default layout folder add this xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ru.mw.widget.DrawableImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
/>
<Button
android:id="#+id/processButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
android:text="#string/str" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView"
android:layout_centerHorizontal="true"
android:text="#string/str"
android:textColor="?android:attr/textColorTertiary" />
</RelativeLayout>
Thats it.

Try to add android:layout_alignParentBottom="true" to the button:
<Button
android:id="#+id/processButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
/>

Align the button to parent bottom using
layout_alignParentBottom="true".
Wrap the ImageView between the TextView and Button
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:textAppearance="#android:style/TextAppearance.Small"
android:textColor="?android:attr/textColorTertiary"
android:layout_centerHorizontal="true"
/>
<Button
android:id="#+id/processButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/str"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
/>
<ru.mw.widget.DrawableImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_above="#+id/processButton"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>

Related

Relativelayout property issue

I want to create my Toolbar layout like below image.
I written below code for create this view. Please see my xml Code.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:background="#color/black"
android:padding="#dimen/_5sdp">
<ImageView
android:id="#+id/toolbar_default_img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_menu" />
<TextView
android:id="#+id/toolbar_default_textview_title"
style="#style/textview_normal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/toolbar_default_img_menu"
android:layout_toStartOf="#+id/toolbar_default_img_search"
android:text="#string/app_name"
android:textColor="#color/white"
android:textSize="#dimen/_15ssp" />
<ImageView
android:id="#+id/toolbar_default_img_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/toolbar_default_img_filter_tag"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_search" />
<ImageView
android:id="#+id/toolbar_default_img_filter_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/toolbar_default_img_filter"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
<ImageView
android:id="#+id/toolbar_default_img_filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
</RelativeLayout>
After written this code i can see my view is correct in android studio preview but when i run my project it look like below image.
only left and right imageview on correct position but my textview and other two imageview is not set on correct position after run this code.
May be problem with android:layout_toEndOf and android:layout_toStartOf property of RelativeLayout.
I don't know why this problem create.Thank you for help.

Replace this code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:background="#color/black"
android:padding="#dimen/_5sdp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/toolbar_default_img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/_5sdp"
android:src="#drawable/ic_launcher_background" />
<TextView
android:id="#+id/toolbar_default_textview_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:maxEms="50"
android:text="#string/app_name" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/toolbar_default_img_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_search" />
<ImageView
android:id="#+id/toolbar_default_img_filter_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
<ImageView
android:id="#+id/toolbar_default_img_filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/_5sdp"
android:src="#drawable/icon_filter" />
</LinearLayout>
</RelativeLayout>
Do changes as per your requirement by padding and margin to make a proper design.

Try using layout_alignParentRight , layout_toLeftOf , layout_toRightOf ,layout_alignParentLeft instead of layout_alignParentEnd , layout_toStartOf , layout_toEndOf and layout_alignParentStart or use Both in the 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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/black"
android:padding="5dp">
<ImageView
android:id="#+id/toolbar_default_img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:padding="5dp"
android:src="#drawable/add_btn" />
<TextView
android:id="#+id/toolbar_default_textview_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/toolbar_default_img_menu"
android:layout_toLeftOf="#+id/toolbar_default_img_search"
android:text="#string/app_name"
android:textColor="#color/white"
android:textSize="15sp" />
<ImageView
android:id="#+id/toolbar_default_img_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/toolbar_default_img_filter_tag"
android:padding="5dp"
android:src="#drawable/add_btn" />
<ImageView
android:id="#+id/toolbar_default_img_filter_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/toolbar_default_img_filter"
android:padding="5dp"
android:src="#drawable/add_btn" />
<ImageView
android:id="#+id/toolbar_default_img_filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:padding="5dp"
android:src="#drawable/add_btn" />
</RelativeLayout>
</RelativeLayout>

you need to add them as action button on the appbar
https://developer.android.com/training/appbar/actions.html

You need to add
android:layout_toLeftOf
along with
android:layout_toStartOf
and
android:layout_toRightOf
with
android:layout_toEndOf

Add
android:layout_toLeftOf:
along with
android:layout_toStartOf:
and
android:layout_toRightOf:
with
android:layout_toEndOf:
because you need to support lower API versions.

Add background image while remain RelativeLayout

This is my *activity_login.xml*
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
tools:ignore="ExtraText" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/userid"
android:layout_centerHorizontal="true"
android:text="#string/userid"
android:textSize="20sp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/password"
android:layout_centerHorizontal="true"
android:text="#string/password"
android:textSize="20sp" />
<EditText
android:id="#+id/userid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView3"
android:layout_alignRight="#+id/password"
android:ems="10"
android:inputType="textPersonName" />
<Button
android:id="#+id/login"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_above="#+id/newuser"
android:layout_alignRight="#+id/textView3"
android:layout_marginBottom="27dp"
android:gravity="center"
android:text="#string/button_login" />
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/login"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"
android:ems="10"
android:inputType="textPassword" />
<Button
android:id="#+id/register"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="42dp"
android:gravity="center"
android:text="#string/button_register" />
<TextView
android:id="#+id/newuser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/register"
android:layout_centerHorizontal="true"
android:layout_marginBottom="14dp"
android:text="#string/newuser" />
</RelativeLayout>
I want pos_malaysia.png to be set as my login page background on the top center on the screen.. I saw some of them say use <bitmap> .
The thing is when I replace RelativeLayout with bitmap all the android:layout_above="#+id/userid" and android:layout_centerHorizontal="true" cannot be used since its only applies for RelativeLayout. what should I do to maintain the layout with added background?

There are 2 possible solutions for it.
1st add android:background="#drawable/[PIC]" to your Relative Layout.
2nd add ImageView as 1st layer (on bottom) of Relative Layout.
Depends on what kind of background (logo, image) you should consider using 9patch, so it will nicely scale.

Try
<RelativeLayout>
<ImageView
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true">
</ImageView>
</RelativeLayout>

Try this. You can same in linear layout as well
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
tools:ignore="ExtraText"
android:background="#drwable/your_bg_image"
>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/userid"
android:layout_centerHorizontal="true"
android:text="#string/userid"
android:textSize="20sp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/password"
android:layout_centerHorizontal="true"
android:text="#string/password"
android:textSize="20sp" />
<EditText
android:id="#+id/userid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView3"
android:layout_alignRight="#+id/password"
android:ems="10"
android:inputType="textPersonName" />
<Button
android:id="#+id/login"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_above="#+id/newuser"
android:layout_alignRight="#+id/textView3"
android:layout_marginBottom="27dp"
android:gravity="center"
android:text="#string/button_login" />
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/login"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"
android:ems="10"
android:inputType="textPassword" />
<Button
android:id="#+id/register"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="42dp"
android:gravity="center"
android:text="#string/button_register" />
<TextView
android:id="#+id/newuser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/register"
android:layout_centerHorizontal="true"
android:layout_marginBottom="14dp"
android:text="#string/newuser" />
</RelativeLayout>

try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
tools:ignore="ExtraText" >
<ImageView
android:id="#+id/imgv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/*****YOUR IMAGE NAME****"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

if you would like to add background use
android:background="#drawable/image_name"
(provided that the image you are planning to load is in the Project resources.)
in widget or RelativeLayout
if you would like to maintain its size create syle or just create imageView

Android button position changes while the screen rotating

Hai all I am new in android programming.....
For my application I am using image button and it successfully
installed on the device. But when I rotate the screen all the button
position get changed... and I need all the button placed at centre
of the screen.... And here is my code....
<TextView
android:id="#+id/testText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFCC99"
android:textSize="24dp" />
<ImageButton
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="124dp"
android:layout_marginTop="80dp"
android:src="#drawable/up" />
<ImageButton
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/up"
android:layout_marginRight="200dp"
android:layout_marginTop="150dp"
android:src="#drawable/left" />
<ImageButton
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/up"
android:layout_marginRight="50dp"
android:layout_marginTop="150dp"
android:src="#drawable/right" />
<ImageButton
android:id="#+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/up"
android:layout_alignParentRight="true"
android:layout_marginRight="124dp"
android:layout_marginTop="80dp"
android:src="#drawable/down" />
Please help............

Set android:gravity to center.
The following layout will do for you:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cool Button" />
</LinearLayout>
There are other ways to do it.
1. Using relative layout
2. Using 2 layouts : 1 one for portrait and and 1 for landscape.

You have to put all your widgets in a single container (LinearLayout) and center it. For that you can use the gravity attribute.
You can check this page:
http://developer.android.com/guide/topics/ui/layout/linear.html

I've made some modifications to your code. Please check whether this is the desired one.
<?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:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/testText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:text="Sample text"
android:textColor="#FFCC99"
android:textSize="24dp" />
<ImageButton
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:src="#drawable/left" />
<ImageButton
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:src="#drawable/right" />
</RelativeLayout>
<ImageButton
android:id="#+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down" />
</LinearLayout>

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.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How can i fit RelativeLayout to screen? - android

Related

Relativelayout property issue

Add background image while remain RelativeLayout

Android button position changes while the screen rotating

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

Relative Layout Scaling?

Categories

Resources