5

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 100x100) and the second image will be rectangular (300x100) - 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:

enter image description here

rhinds
  • 9,976
  • 13
  • 68
  • 111

2 Answers2

14

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!

Community
  • 1
  • 1
james
  • 26,141
  • 19
  • 95
  • 113
  • Thanks - as noted in updated OP this the weight has scaled the images correctly, however I am still having problems with the first (and smaller) image appearing on top of the second rather than side by side - any ideas? – rhinds Jun 03 '11 at 13:49
  • try to enclose the `LinearLayout` in a `ScrollView` – james Jun 03 '11 at 15:06
  • still no joy with the scroll view - I have updated the OP to show the current configuration and a screenshot of how the UI currently looks – rhinds Jun 03 '11 at 20:04
  • Ok - seems like it may have been a eclipse issue - have run it on the emulator and the images are correctly aligned. Interestingly the top half with the two images on takes up most of the screen - I would have thought it would have only have been as big as the height of the images. – rhinds Jun 03 '11 at 20:15
  • I have accepted this answer, as the images are now displayed side by side. However, one question that still remains - whilst the two images are scaled down side-by-side, it seems as though the layout containing them (with the dark background) is still displaying full height rather than wrapping to the size of the scaled images - any ideas if i can avoid this? – rhinds Jun 03 '11 at 20:36
  • try giving the `LinearLayout` holding the 2 images a `layout_weight` of `0` – james Jun 03 '11 at 20:42
  • OK - have found the answer to the space above and below: http://stackoverflow.com/questions/2521959/how-to-scale-an-image-in-imageview-to-keep-the-aspect-ratio – rhinds Jun 05 '11 at 11:48
0

You can try creating a horizontal ScrollView with a layout_width of a pixel value greater than the two ImageViews combined, rather than fill_parent. Then place your LinearLayout inside of it.

Asynkronos
  • 195
  • 5