Question

I want to combine two images of arbitrary width and the same height in a layout (filling the device’s width).

This example sizes are:

• Dice: 427×427
• Domino: 900×427

Given a image with the domino and other with the dice the goal could be something like:

My initial code is:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#999999"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:src="@drawable/domino" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:src="@drawable/dice" />

    </LinearLayout>

For a xlarge screen the result is:

And for smaller screens the domino takes all the width and the dice don’t even appear.

Also tried to set weight of both images to 1 but the result is also wrong and varies depending on the screen size.

How can I solve this? Thanks!

Answer 1

See if this is the layout you want:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#999999" >

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/dice" />

    <ImageView
        android:id="@id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/imageView2"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/imageView2"
        android:src="@drawable/domino" />

</RelativeLayout>

You may need the android:scaleType attribute for the ImageViews to “stretch” the images.