ImageView fill width of parent, clip any extra height

Question

I have an ImageView that's displaying a rectangular image. I want to display a review of an image captured from a custom camera activity.

The issue is that the captured image is larger (in height) than the view and so is scaling by X to fit the Y.

enter image description here

As seen in the image, there's a white stripe along the right side of the image. What I want is for the image to fill the width of the view and just clip or hide the extra at the bottom.

I've tried a bunch of different configurations but can't seem to get it to work. Currently I have:

<FrameLayout 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"
     android:clipChildren="true"
     android:clipToPadding="true">
     <ImageView
          android:id="@+id/camera_review"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:scaleType="fitStart" />
     ....
</FrameLayout>

The image is going to be cropped into the square view-port so it's important that the image be displayed from top|left, and fill the width.

One way I was able to get it to work was to put the ImageView into a ScrollView, but then I have to hide the scrollbars, and figure out how to disable scrolling.

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

According to Moradiya Akash answer, the image will fit your ImageView but no accuracy of aspect ratio. Steve Haley had an answer on maintaining the aspect ratio.

Make sure you're setting the image to the ImageView using android:src="..." rather than android:background="...". src= makes it scale the image maintaining aspect ratio, but background= makes it scale and distort the image to make it fit exactly to the size of the ImageView . More here

edited May 23 '17 at 12:05

Community

1
1

answered Nov 14 '14 at 09:17

Jibran Khan

3,236
4
37
50

Awesome! Thank you very much for explaining, and pointing to other link. Wish I could give answers to both. – Townsfolk Nov 14 '14 at 09:23
No problem. If it helps, thats all we do here :) btw you can still vote up – Jibran Khan Nov 14 '14 at 09:25

score 0 · Accepted Answer · edited Nov 14 '14 at 09:44

0

Chnage your code like this. It may help you.

<FrameLayout 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"
         android:clipChildren="true"
         android:clipToPadding="true">
         <ImageView
              android:id="@+id/camera_review"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
               android:adjustViewBounds="true"
                android:scaleType="fitXY" />
         ....
    </FrameLayout>

edited Nov 14 '14 at 09:44

MarchingHome

1,184
9
15

answered Nov 14 '14 at 09:04

Akash Moradiya

3,318
1
14
19

This works for me, and I will select as answer in a few minutes (need to wait 10 min before I can?), but can you explain why this works a little bit? I didn't try fitXY because my understanding of it is that that setting doesn't keep the aspect ratio? – Townsfolk Nov 14 '14 at 09:08
Yes this does not keeps the aspect ratio, but will fit the entire image to ImageView area. – Jibran Khan Nov 14 '14 at 09:11
But, I also need to keep the aspect ratio, or the photo will appear stretched or squashed depending on the camera's capture size, no? – Townsfolk Nov 14 '14 at 09:18
See my answer including link for more clarification. – Jibran Khan Nov 14 '14 at 09:19
adjustViewBounds together with setting src attribute seems to work – Jibran Khan Nov 14 '14 at 09:21

score 0 · Answer 3 · answered Nov 14 '14 at 09:16

0

change the tag in your image view "fitStart" to "fitXY"

android:scaleType="fitXY"

answered Nov 14 '14 at 09:16

balaji koduri

1,321
9
25

ImageView fill width of parent, clip any extra height

3 Answers3