How to keep images in Android layout proportional like in the original?

Question

I need to place an image (a logo) on top of the android screen and I need it to be as wide as the entire screen and I need its' height to be proportional to the width, the same proportion as in the original image. So far, everything I've tried resulted in misproportioned images or images covering the entire screen. How do I fix this?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@color/blue">




    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/linearLayout"
        android:layout_centerVertical="true"
        >

        <EditText
            android:id="@+id/username"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:layout_marginLeft="@dimen/margin_main"
            android:layout_marginRight="@dimen/margin_main"
            android:hint="@string/username"
            android:textColorHint="#fff"
            android:gravity="center"
            android:background="@drawable/input_background"
            android:layout_marginBottom="@dimen/margin_main"
            android:textColor="#fff"
            />

        <EditText
            android:id="@+id/password"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:inputType="textPassword"
            android:layout_marginLeft="@dimen/margin_main"
            android:layout_marginRight="@dimen/margin_main"
            android:hint="@string/password"
            android:textColorHint="#fff"
            android:gravity="center"
            android:background="@drawable/input_background"
            android:layout_marginBottom="@dimen/margin_main"
            android:textColor="#fff"/>


        <Button
            android:id="@+id/login_button"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:text="@string/login"
            android:layout_marginLeft="@dimen/margin_main"
            android:layout_marginRight="@dimen/margin_main"
            android:background="@drawable/button_yellow_background"
            android:textStyle="bold"
            android:textSize="20sp"
            android:textColor="@color/blue"/>

    </LinearLayout>

    <ImageView
        android:id="@+id/logo"
        android:layout_width="315dp"
        android:layout_height="100dp"
        android:background="@drawable/logo"/>


</RelativeLayout>

The image in question is the logo.

please edit your question and add whatever relevant code you have at this time (it will only help the community to help you) — petey, Feb 03 '15 at 18:56
for starters, don't use `background` with ImageView. use `src`. And `scaleType` — njzk2, Feb 03 '15 at 19:31

score 4 · Answer 1 · answered Feb 03 '15 at 19:42

All you need to do is change

<ImageView
        android:id="@+id/logo"
        android:layout_width="315dp"
        android:layout_height="100dp"
        android:background="@drawable/logo"/>

to

<ImageView
        android:id="@+id/logo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/logo"/>

Note: Doing this might result in a stretch image if your image is smaller than the screen width.

score 0 · Answer 2 · answered Feb 03 '15 at 18:56

0

Try to set scaleType to fitXY:

<ImageView
    android:id="@+id/fullImg"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/your_image_resource"
    android:scaleType="fitXY" />

answered Feb 03 '15 at 18:56

Juanjo Vega

1,410
1
12
20

Didn't work. The image still fills much more of the screen vertically than it should... :( – Orlando Bloom Feb 03 '15 at 19:01
If you fit width, height will scale proportionally, therefore you won't have control of it. If you want to fill a fixed width and height it won't keep aspect ratio. (A picture ilustrating what you try to get might help) – Juanjo Vega Feb 04 '15 at 09:26

score 0 · Answer 3 · edited May 23 '17 at 12:26

You should do that at runtime.

Solution 1

Display display = getWindowManager().getDefaultDisplay();
ImageView imageView = (LinearLayout) findViewById(R.id.imageView);
int width = display.getWidth(); 
int height = (int) width * 0.75; // 0.75 if image aspect ration is 4:3, change accordingly 
imageView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, height);

This would make the image to fill the screen width and height as per the aspect ratio of the original image. To use this method you need to hardcode the aspect ratio.

Solution 2 From Scale Image to fill ImageView width and keep aspect ratio

Create a custom image view and do this

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
try {
    Drawable drawable = getDrawable();

    if (drawable == null) {
        setMeasuredDimension(0, 0);
    } else {
        float imageSideRatio = (float)drawable.getIntrinsicWidth() / (float)drawable.getIntrinsicHeight();
        float viewSideRatio = (float)MeasureSpec.getSize(widthMeasureSpec) / (float)MeasureSpec.getSize(heightMeasureSpec);
        if (imageSideRatio >= viewSideRatio) {
            int width = MeasureSpec.getSize(widthMeasureSpec);
            int height = (int)(width / imageSideRatio);
            setMeasuredDimension(width, height);
        } else {
            int height = MeasureSpec.getSize(heightMeasureSpec);
            int width = (int)(height * imageSideRatio);
            setMeasuredDimension(width, height);
        }
    }
} catch (Exception e) {
    e.printStackTrace();
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

0.75 if image aspect ratio is 4:3,??what would be for 16:9? – young_08 Nov 22 '17 at 05:59 — young_08, Nov 22 '17 at 05:59

score 0 · Answer 4 · answered Feb 03 '15 at 19:29

If you want to do it at runtime you can do that:

// set the ratio (if it can change it's also possible get it from resource id)
double aspect_ratio = 16/9;
// getting a ref to your ImageView
ImageView yourImageView = (LinearLayout) findViewById(R.id.imageView);
// get DisplayMetrics to get screen sizes
DisplayMetrics met = new DisplayMetrics(); 
getWindowManager().getDefaultDisplay().getMetrics(met);
// if you have a "activity_horizontal_margin" in your style
int t = getResources().getDimensionPixelSize(R.dimen.activity_horizontal_margin);
int width = (int)((met.widthPixels-2*t)); 
// otherwise just
int width = (int)((met.widthPixels-2*t)); 
// go on calculate height
int height = width * aspect_ratio;
// ending with layour params setting
yourImageView.setLayoutParams(new LayoutParams(width, height);

else if you want to do it in xml, you could do something like that

<ImageView
    android:id="@+id/yourImageView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:src="@drawable/logo"
    android:scaleType="centerInside" />

How to keep images in Android layout proportional like in the original?

4 Answers4