Resizing image to fill width of screen

Question

I am trying to set an Image that I am downloading from the web. I am using a library to help me do this called ion. The problem is that I need to resize the image to fit my screen and keep the aspect ration. The height seems to be working fine however I want to set the width of the bitmap to fit the whole width of the devicewhile keeping the aspect ratio. But it is not working and the image is cut short on both sides...

  <ImageView
    android:id="@+id/imageView"
    android:layout_width="fill_parent"
    android:layout_height="@dimen/_height" />

Code:

DisplayMetrics metrics = getResources().getDisplayMetrics();
mWidth = metrics.widthPixels;
mHieght = (int) getResources().getDimension(R.dimen._height);
Ion.with(imageView).resize(mWidth, mHieght).load(url)

enter image description here

Edit: This is with android:scaleType="centerCrop"

enter image description here

Onur · Accepted Answer · 2014-06-01T10:20:23.317

0

ImageView has scale type feature. Check ImageView.ScaleType. I think centerInside or fitCenter is what you are looking for.

Update

Sorry didn't realize you have a fixed height at first. centerCrop should be the answer.

edited Jun 01 '14 at 10:20

answered Jun 01 '14 at 09:16

Onur

5,617
3
26
35

@user1163234 totaly my bad. `centerCrop` – Onur Jun 01 '14 at 10:20
I did this see above image. It looks like it is chopping the top and bottom of the image... – user1163234 Jun 01 '14 at 10:26
Well that is the expected outcome. I mean you can't both want to keep the aspect ratio and be able to show all of the image with a fixed height. Iether you crop the image or give up the aspect ratio. – Onur Jun 01 '14 at 10:33

Lampione · Answer 2 · 2014-06-01T10:05:57.010

If you have a known max size for your images, you can set the width of your layout equal to the largest width of your images set, then take all centered. This worked for me:

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<RelativeLayout
    android:layout_width="1920px"
    android:layout_height="fill_parent"
    android:layout_gravity="center">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:background="@drawable/your_image" />
</RelativeLayout>
</FrameLayout>

Where 1920px is the largest width of your images set. The result is acceptable, EDIT: Image is perfectly centered.

Tey Kar Shiang · Answer 3 · 2018-11-24T00:12:22.047

I achieved this using "paddingLeft" and "paddingRight" on parent layout; while apply a negative value to padding and margins to the child layout / ImageView. "android:clipToPadding" flag must be false to prevent the clipping.

<LinearLayout
    ...
    android:paddingLeft="10sp"
    android:paddingRight="10sp"
    android:clipToPadding="false"
    ...>

    <ImageView
        android:layout_marginLeft="-10sp"
        android:layout_marginRight="-10sp"
        android:paddingRight="-10sp"
        android:paddingLeft="-10sp"
        ...>

Resizing image to fill width of screen

3 Answers3