Question

I am trying to create an Activity for an Android app with two imageViews aligned side-by-side. my current layout config is as follows:

<LinearLayout android:orientation="horizontal"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:paddingTop="15dip" android:paddingBottom="15dip"
    android:background="@drawable/dark_bg">

    <ImageView android:id="@+id/numberDays"  
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:scaleType="fitStart"
        android:src="@drawable/counter_01" />
    <ImageView android:src="@drawable/counter_days" 
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:scaleType="fitStart" 
        android:id="@+id/daysText"></ImageView>

</LinearLayout>

The first image will be a square (lets say 100×100) and the second image will be rectangular (300×100) – and I want them to be aligned next to each other but always be scaled to fit within the width of the device – is this possible just with layout config?

The current config just shows the first image the entire width (and almost height) of the screen and the second image is not shown at all. I have tried changing wrap_content with fill_parent and hardocding widths but that has just resulted in the both images being shown but the first image on top of the second image (both anchored left).

Thanks

---

UPDATED AGAIN:

I have updated my layout to look like this now including the ScrollView as recommended but no joy:

<?xml version="1.0" encoding="utf-8"?>

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

<!-- Header for activity - this has the countdown in it -->
<ScrollView android:id="@+id/ScrollView01" android:layout_height="wrap_content" android:layout_width="fill_parent">
    <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:gravity="right"
        android:background="@drawable/dark_bg" android:orientation="horizontal">

        <ImageView android:id="@+id/numberDays"  
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_weight="2"
            android:src="@drawable/counter_01" />

        <ImageView android:src="@drawable/counter_days" 
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_weight="1" 
            android:id="@+id/daysText"/>

    </LinearLayout>

</ScrollView>


<!--  main body for the rest of the info -->
    <LinearLayout android:orientation="horizontal" android:gravity="center"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:background="@drawable/light_bg">
    </LinearLayout>

</LinearLayout>

Using the layout_weight as suggested has given both the images the right ratios and appear to be scaled perfectly, however, I am still having the problem whereby they are both anchored to the far left of the screen, so the first image is actually overlaid on top of the second image, rather than having them side by side.

Below is a screenshot of the Eclipse display:

Answer 1

try using layout_weight for both of the ImageView components. So something like:

<LinearLayout android:orientation="horizontal"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:paddingTop="15dip"
    android:paddingBottom="15dip"
    android:background="@drawable/dark_bg">
    <ImageView android:id="@+id/numberDays"  
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        android:layout_weight="1"
        android:src="@drawable/counter_01" />
    <ImageView android:src="@drawable/counter_days" 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"
        android:scaleType="fitStart" 
        android:layout_weight="1"
        android:id="@+id/daysText"></ImageView>
</LinearLayout>

i added android:layout_weight="1" to each of them. Read up on layout_weight for LinearLayout definitions, it’s very useful!