Android Image scaling, how to get rid of black stripes

Question

I'am working on some Android stuff and I have encountered weird problem with image scaling. The image that you you can see in the image below has:

<ImageView
            android:id="@+id/imagePreview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/editor_placeholder"
            android:contentDescription="@string/stfu" />

And i keep asking myself why are those black stripes present. Can i make it to display the image without those stripes?

SOLUTION:

android:adjustViewBounds="true"

Got rid off unnecessary stripes.

use `android:scaleType`. There are different enums that will do different things. Have a look at http://developer.android.com/reference/android/widget/ImageView.ScaleType.html and http://www.techrepublic.com/article/clear-up-ambiguity-about-android-image-view-scale-types-with-this-guide/ — kha, Nov 17 '15 at 16:27

kandroidj · Accepted Answer · 2015-11-17T16:36:05.250

Sure you can do this a few different ways. If you want the image to fit and don't care about the crop of the image you can do something like:

   <ImageView
        android:id="@+id/imagePreview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/editor_placeholder"
        android:contentDescription="@string/stfu" />

there are various different ImageView.ScaleType for an ImageView:

CENTER -> Center the image in the view, but perform no scaling. From XML, use this syntax: android:scaleType="center".

CENTER_CROP -> Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). The image is then centered in the view. From XML, use this syntax: android:scaleType="centerCrop".

CENTER_INSIDE -> Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). The image is then centered in the view. From XML, use this syntax: android:scaleType="centerInside".

FIT_CENTER -> Scale the image using CENTER. From XML, use this syntax: android:scaleType="fitCenter".

FIT_END -> Scale the image using END. From XML, use this syntax: android:scaleType="fitEnd".

FIT_START -> Scale the image using START. From XML, use this syntax: android:scaleType="fitStart".

FIT_XY -> Scale the image using FILL. From XML, use this syntax: android:scaleType="fitXY".

FIT_MATRIX -> Scale using the image matrix when drawing. The image matrix can be set using setImageMatrix(Matrix). From XML, use this syntax: android:scaleType="matrix".

Here is a nice article from the developer site to help with programmatic scaling

I used fit start/end and it kinda works. Kinda.. It still has black stripes but they are accumulated on the bottom or the top. — Haito, Nov 17 '15 at 16:34
@Haito try just using `android:scalyType="fitXY"` with `android:layout_width="fill_parent"` — kandroidj, Nov 17 '15 at 16:35
Well... I found android:adjustViewBounds="true" which made it. — Haito, Nov 17 '15 at 17:03
@Haito yes, this is also a nice helper to maintain the aspect ratio — kandroidj, Nov 17 '15 at 17:05

score 0 · Answer 2 · answered Nov 17 '15 at 16:29

0

use android imageview scale type property inside imageview in xml file ..

android:scaleType="fitXY".

answered Nov 17 '15 at 16:29

vishal jangid

2,967
16
22

It destroys ratios and messes the image. – Haito Nov 17 '15 at 16:31
@Haito then you can use different type of property like centerCrop is best option – vishal jangid Nov 17 '15 at 16:33
centerCrop crops, which is opposite of what i want – Haito Nov 17 '15 at 16:43
then you should maintain the aspect ratio of image may be use this link http://stackoverflow.com/questions/8232608/fit-image-into-imageview-keep-aspect-ratio-and-then-resize-imageview-to-image-d – vishal jangid Nov 17 '15 at 16:48
If you're updating your answer please edit the relevant information into the post. – SuperBiasedMan Nov 17 '15 at 17:41
@SuperBiasedMan this link is the good and proper answer to maintain aspect ratio – vishal jangid Nov 17 '15 at 17:44
@vishaljangid If it is that's great, but please put all the relevant info into the answer. Comments are second class citizens and likely not to be read. – SuperBiasedMan Nov 17 '15 at 17:46

score 0 · Answer 3 · answered Nov 17 '15 at 16:39

Try this

<ImageView
        android:id="@+id/imagePreview"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/editor_placeholder"
        android:contentDescription="@string/stfu" />

Android Image scaling, how to get rid of black stripes

3 Answers3