Placing two images to occupy the entire screen

Question

I would like to place two images in the respective image views so they occupy the entire screen. So far I have only gotten here :( (To add the device being tested I use an S3)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<ImageView
    android:id="@+id/white"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:onClick="onClick"
    android:src="@drawable/up" />

    <ImageView                
    android:id="@+id/blue"
    android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:src="@drawable/blue"
            android:onClick="onClick"
            android:layout_below="@id/white"/>

</RelativeLayout>

The images are 1080 X 1920 and scaled to screen. The problem is either the image below is scaled improperly or they dont connect properly. I have a black area on the top and bottom

I am sorry but the Images are not of the same size.

Take a look here:http://stackoverflow.com/questions/14773039/how-to-put-50-for-width — Guilherme Gregores, Feb 19 '13 at 16:56

Mohammad Imran · Answer 1 · 2013-02-19T17:30:31.083

You can achieve this by adding weightSum. Replace this xml

<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"
    tools:context=".MainActivity1" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:weightSum="1" >

        <ImageView
            android:id="@+id/white"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight=".5"
            android:onClick="onClick"
            android:src="@drawable/up" />

        <ImageView
            android:id="@+id/blue"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_below="@id/white"
            android:layout_weight=".5"
            android:onClick="onClick"
            android:src="@drawable/blue" />
    </LinearLayout>

</RelativeLayout>

it would look like as: enter image description here for more help.please add comments.

score 1 · Accepted Answer · answered Feb 19 '13 at 16:55

1

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="2" >

<ImageView
    android:id="@+id/white"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:onClick="onClick"
    android:src="@drawable/up" />

<ImageView
    android:id="@+id/blue"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:onClick="onClick"
    android:src="@drawable/blue" />

</LinearLayout>

answered Feb 19 '13 at 16:55

Triode

11,309
2
38
48

The images are not of same size I should have added this before. – Pavan K Feb 19 '13 at 16:58
This is not an issue you can set the scaleType for the images. if you want you can set the height values as your wish. One more addition set the orientation type for the linear lay out – Triode Feb 19 '13 at 17:00

score 0 · Answer 3 · answered Feb 19 '13 at 16:55

You should use a LinearLayout with layout_weight set:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<ImageView
    android:id="@+id/white"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:onClick="onClick"
    android:src="@drawable/up" />

<ImageView                
    android:id="@+id/blue"
    android:layout_height="0dp"
    android:layout_width="fill_parent"
    android:layout_weight="1"
    android:src="@drawable/blue"
    android:onClick="onClick"
    android:layout_below="@id/white"/>
</LinearLayout>

For the scaling issue, I'd recommend looking into scaleType

Placing two images to occupy the entire screen

3 Answers3