How to scale 3 images to fit screen width

Question

These is the result that I am after:

Basically I want to scale the 3 images so that they have the same height and all together fill the screen width. The original images will all have same height.

Can this be done using layout, without width calculations from code?

Answer 1

Just use Layout Weights.

In the main layout, or the layout which contains the ImageViews, put

android:weightSum="10"

and then in the individual ImageViews, put layout_weights as shown below, or upto your requirements.

This basically means the width of the images will be 25%, 55% and 20% respectively .

Answer 2

You can use a linear layout with weight attribute specified as shown below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="0dp"
        android:src="@drawable/bg_canvas"
        android:layout_height="300dp"
        android:layout_weight="0.33"/>
    <ImageView
        android:layout_width="0dp"
        android:src="@drawable/bg_canvas"
        android:layout_height="300dp"
        android:layout_weight="0.33"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="300dp"
        android:src="@drawable/bg_canvas"
        android:layout_weight="0.33"/>
</LinearLayout>

Comment below if you need any further info

Answer 3

try this:

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_weight="3"
  android:orientation="horizontal">

  <ImageView
    android:id="@+id/imageView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    .../>
  <ImageView
    android:id="@+id/imageView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    .../>
  <ImageView
    android:id="@+id/imageView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    .../>
</LinearLayout>

the "magic" is in the weight component. you define a total weight of 3 in the layout and your image views should take a third of it, so the value is 1.

Answer 4

For my case the images needed to be updated at runtime, so none of the answers were exact fit. I ended up extending LinearLayout and writing a small routine that unifies all images heights and make sure that all images together fill the LinearLayout width. In case someone is trying to achieve the same, my code looks like this:

public class MyImgLayout extends LinearLayout
{

public MyImgLayout(Context context)
{
  super(context);
}

public void setup(ArrayList<String> images)
{
        this.setOrientation(LinearLayout.HORIZONTAL);
    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0);
    this.setLayoutParams(layoutParams); //set 0 height until we calculate it in onMeasure

    for (String image : images) {
        ImageView ivArticle = new ImageView(getContext());
        setImageFromName(image, ivArticle); //this where you set the image
        this.addView(ivArticle);
    }

}

private void scaleImages()
{
    if(getMeasuredHeight() == 0 && getMeasuredWidth() > 0) {
        if (isHorizontal) {
            double childRatioSum = 0;
            int images = 0;
            for (int i = 0; i < getChildCount(); i++) {
                ImageView iv = (ImageView) getChildAt(i);
                double width = iv.getDrawable().getIntrinsicWidth();
                double height = iv.getDrawable().getIntrinsicHeight();
                if (height > 0) {
                    childRatioSum += width / height;
                    images++;
                }
            }

            if (childRatioSum > 0 && images == getChildCount()) {
                //all images are downloaded, calculate the container height
                //(add a few pixels to makes sure we fill the whole width)
                double containerHeight = (int) (getMeasuredWidth() / childRatioSum) + images * 0.5;

                for (int i = 0; i < getChildCount(); i++) {
                    ImageView iv = (ImageView) getChildAt(i);
                    double width = iv.getDrawable().getIntrinsicWidth();
                    double height = iv.getDrawable().getIntrinsicHeight();
                    iv.setLayoutParams(new LinearLayout.LayoutParams((int) (width * (containerHeight / height)), (int) containerHeight));
                    iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
                }

                LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) this.getLayoutParams();
                params.width = LayoutParams.MATCH_PARENT;
                params.height = (int) containerHeight;
                this.setLayoutParams(params);
                requestLayout();
            }
        }
    }
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    scaleImages();
}
}