Relative Layout Scaling? - android

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.

Related

android:layout_alignBottom not working properly

In my layout, there are an ImageView and a Button (they have botonordenes, and imagelogo as id:
<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:background="#drawable/fondo_descripcion_campania"
tools:context=".AlertDetailActivity" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/logotipo_high_density_vinceri_movil" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:src="#drawable/titulo_orden_trabajo_oncheck_high_density_vinceri_movil" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/footer" />
<Button
android:id="#+id/botonrechaza"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/botonacepta"
android:layout_alignBottom="#+id/botonacepta"
android:layout_toRightOf="#+id/botonacepta"
android:background="#drawable/rechazar_azafata_orden_trabajo_oncheck_high_density_vinceri_movil" />
<Button
android:id="#+id/botonacepta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView6"
android:layout_alignParentLeft="true"
android:background="#drawable/aceptar_azafata_orden_trabajo_oncheck_high_density_vinceri_movil" />
<Button
android:id="#+id/botonordenes"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_toRightOf="#+id/imagelogo"
android:layout_below="#+id/nombrecampaign"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:background="#drawable/btn_ver_ordenes_trabajo" />
<ImageView
android:id="#+id/botonalertdetailshome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView4"
android:layout_alignParentRight="true"
android:src="#drawable/home_high_density_vinceri_movil" />
<ImageView
android:id="#+id/botonalertdetailsos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/botonrechaza"
android:layout_alignParentTop="true"
android:src="#drawable/icono_sos_vinceri_movil_azafatas" />
<TextView
android:id="#+id/nombrecampaign"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/botonordenes"
android:layout_below="#+id/imageView4"
android:text="Nombre Campaña"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/botonubicaciones"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignBottom="#+id/imageView2"
android:layout_alignLeft="#+id/botonordenes"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/btn_ver_ubicaciones_campania" />
<TextView
android:id="#+id/textdescenc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_toRightOf="#+id/imageView5"
android:layout_alignBottom="#+id/imageView5"
android:text="#string/desc"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:layout_toLeftOf="#+id/textofechainicioenc"
android:src="#drawable/icono_calendario" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView3"
android:layout_below="#+id/imageView3"
android:layout_marginTop="14dp"
android:src="#drawable/icono_descripcion" />
<TextView
android:id="#+id/textdetailfechainicio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_toRightOf="#+id/textofechainicioenc"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_above="#+id/botonrechaza"
android:layout_alignLeft="#+id/imageView3"
android:layout_alignParentRight="true"
android:layout_below="#+id/textdescenc"
android:orientation="vertical" >
<TextView
android:id="#+id/textdescdetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<TextView
android:id="#+id/textofechainicioenc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_alignRight="#+id/imageView1"
android:layout_marginRight="15dp"
android:text="#string/fechainicio"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imagelogo"
android:layout_marginTop="10dp"
android:src="#drawable/icono_mapa_ubicacion" />
<ImageView
android:id="#+id/imagelogo"
android:layout_width="69dp"
android:layout_height="65dp"
android:layout_alignBottom="#+id/botonordenes"
android:layout_alignRight="#+id/imageView2" />
As you can see, the image has android:layout_alignBottom="#+id/botonordenes". The problem is, the alignbottom is not working properly. In the emulator it is seen ok, but not in my device. The bottom line of the image is not aligned with the bottom line of the Button. The difference is not a lot, but it is visible. Why are not aligned? I tried to set a margin hoping it would push the image a bit to be aligned, but dont works. Anybody knows why this happens, and how to solve it? Thank you.

It either has to do with the predefined margins on Buttons or your hardcoded height and width values on the ImageView

What you are probably seeing is the difference between default android and what is implemented on your device for the image used on the default button. Try using one of the Holo themes and see if you still have the same issue.

How can i fit RelativeLayout to screen?

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>

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.

Android views not scaling on different sized devices

I am using eclipse I have views with images and buttons with their width and height set in dp:
<Button
android:id="#+id/btn_menu_games"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_games"
android:onClick="goToGames" />
But when I use a different device the images and buttons do not scale relative to the screen, so they are really big on a small screen and really small on a big screen. Am I doing something wrong in the view? Do I need to set anything in the Manifest?
Thanks.
Full code:
<?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:background="#drawable/bg_portrait"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="234dp"
android:layout_height="156dp"
android:layout_marginBottom="15dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:src="#drawable/flag" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginRight="20dp" >
<Button
android:id="#+id/btn_menu_games"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_games"
android:onClick="goToGames" />
<com.academyGeneric.MyTextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#8c0101"
android:text="Games"
android:layout_marginBottom="5dp"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/btn_menu_lessons"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_lessons" />
<com.academyGeneric.MyTextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Lessons"
android:layout_marginBottom="5dp"
android:textColor="#8c0101"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/btn_menu_settings"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_settings"
android:onClick="goToSettings" />
<com.academyGeneric.MyTextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Settings"
android:textColor="#8c0101"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="20dp" >
<Button
android:id="#+id/btn_menu_dictionary"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_dictionary"
android:onClick="goToDictionary" />
<com.academyGeneric.MyTextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Dictionary"
android:layout_marginBottom="5dp"
android:textColor="#8c0101"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/btn_menu_statistics"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_stats" />
<com.academyGeneric.MyTextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Statistics"
android:layout_marginBottom="5dp"
android:textColor="#8c0101"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<Button
android:id="#+id/close"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/ico_exit"
android:onClick="exit" />
<com.academyGeneric.MyTextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Exit"
android:textColor="#8c0101"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

If you really need it to have a certain aspect ratio, you should definitely consider using weights.
If there are two buttons in a linear layout parent, with both weight 1, they will both take up
1/2 the width of the screen
proportion of button relative to screen = (view_weight/(total_weights of all views)
Take a look here: http://blog.stylingandroid.com/archives/297
Otherwise, DP is correct.

Categories

Resources