Android - two ImageViews side by side

Question

I am trying to create an Activity app for Android with two images aligned side by side. my current configuration layout 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 (say 100x100), and the second image will be rectangular (300x100) - and I want them to be aligned next to each other, but always scaled to fit the width of the device - is this possible using the configuration layout ?

The current configuration simply shows the first image of the entire width (and almost height) of the screen, and the second image is not displayed at all. I tried changing wrap_content using fill_parent and hardcding width, but it just showed that both images are displayed, but the first image is on top of the second image (both are pinned to the left).

thanks

---

UPDATED:

I updated my layout to look the way it is now, including ScrollView as recommended, but without 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 layout_weight, as suggested, gave both images the right relationship and seemed to scale perfectly, however I still have a problem where they are both tied to the far left edge of the screen, so the first image is actually overlaid on top of the second image. instead of having them next to each other.

Below is a screenshot of the Eclipse display:

Answer 1

try using layout_weight for both components of ImageView . 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 in layout_weight for LinearLayout definitions, this is very useful !

Answer 2

You can try creating a horizontal ScrollView with a layout_width pixel value larger than two combined ImageViews rather than fill_parent . Then place LinearLayout inside it.