Two ImageViews side by side with different image sizes but wanting to maintain same aspect ratio and sizes

Question

This has been stumping me for a while, and I'm not sure how to fix it.

Supposing I have the following layout: 2 ImageViews with a TextView under each ImageView. The images are being retrieved remotely. I would like each ImageView to take about 40% of the width of the Activity they're in, with white space under them. The TextViews will be about 5% smaller, centered below each ImageView.

What I tried:

Put each pair of ImageView and TextView in their own LinearLayout, so 2 LinearLayouts, with each LinearLayout's layout_width set to fill_parent and equal layout_weight (0.5) for both. Each ImageView had a layout_width of fill_parent and a layout_margin of 15dip. layout_height was set to wrap_content (this was the parameter I wasn't sure how to set).

That worked fine but the problem was that all the incoming images were of different sizes and ratios, so they looked weird side by side.

I proceeded to set: android:scaleType="centerCrop" android:adjustViewBounds="true"

That helped but each ImageView was still different size sometimes. At this point, I just put each ImageView at a fixed width 100 dip or so to both ImageViews, and that helped, but of course with bigger size devices this will look weird. How can I achieve what I'm trying to accomplish?

nsemeniuk nsemeniuk · Accepted Answer · 2012-11-15T22:00:28

On the second option, try it without "AdjustViewBounds" remember:

Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.

But here is what i would do in your case:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="0.5"
    android:orientation="vertical" >


    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:scaleType="center"
        android:src="@drawable/99" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:text="TextView" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="0.5"
    android:orientation="vertical" >


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:scaleType="center"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="TextView" />
</LinearLayout>

And it will look like on larger screens:

Test1

And on smaller screens:

test2

I prefer center in this case, because if you have smaller pictures then they will look better. I try to avoid fixed sizes if you can, because as you said it won't look good on larger devices.

You can also make different layouts for each sceen size. But you will have to mantain all of them. Check Supporting Multiple Screen Sizes (if you haven't already ;)).

Two ImageViews side by side with different image sizes but wanting to maintain same aspect ratio and sizes

1 Answers