How to use android:scaleType to show a picture

Question

I use ImageView to show a picture, I want picture to show in a rect, which is smaller than its real size, but I want picture can completely show in the rect. I set other scaleType, such as 'centerInside', then the picture cannot show in the rect, but 'center' can. I wanna know that how to code that can show a picture in a rect which is smaller then itself.

<ImageView
        android:id="@+id/imageView2"
        android:layout_width="20.0dip"
        android:layout_height="20.0dip"
        android:adjustViewBounds="true"
        android:contentDescription="@string/boy"
        android:paddingLeft="20.0dip"
        android:paddingTop="40.0dip"
        android:scaleType="center"
        android:src="@drawable/boy" />

'center' just show part of the picture, not the full picture. — user2682897, Oct 04 '13 at 09:34

score 0 · Answer 1 · answered Oct 04 '13 at 09:31

0

Two options.-

If the drawable has the same aspect ratio of your ImageView, set scaleType to fitXY
Else, I'd go for centerCrop

Just in case you didn't know it, more about scaleTypes here.

answered Oct 04 '13 at 09:31

ssantos

16,001
7
50
70

I know the web site, and read it, but I don't know why using other scaleType cannot make the picture show in the rect. – user2682897 Oct 04 '13 at 09:37

score 0 · Accepted Answer · answered Oct 04 '13 at 09:31

According to ImageView scale type documentation, centerInside also includes the padding for the size.

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).

Since your padding is same/bigger than the ImageView's size, then the image cannot be displayed (actually, it's pushed outside the bound).

Use android:scaleType="centerInside" and consider to use android:layout_margin instead of android:padding.

score 0 · Answer 3 · edited Oct 04 '13 at 09:41

you should use android:scaleType="centerInside"

public static final ImageView.ScaleType 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".

see here for details

score 0 · Answer 4 · answered Oct 04 '13 at 09:36

As I undestand you have problem with using scaleType with ImageView. Put your ImageView inside (for example) FrameLayout and check my examples.

First example:

 <?xml version="1.0" encoding="utf-8"?>  
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent">  
   <ImageView android:layout_width="200dp"  
               android:layout_height="200dp"  
               android:layout_gravity="center"  
               android:src="@drawable/something"  
               android:scaleType="centerInside">  
   </ImageView>  
 </FrameLayout>

Second (fullscreen scaling):

 <?xml version="1.0" encoding="utf-8"?>  
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent">  
   <ImageView android:layout_width="fill_parent"  
               android:layout_height="fill_parent"  
               android:layout_gravity="center"  
               android:src="@drawable/something"  
               android:scaleType="centerInside">  
   </ImageView>  
 </FrameLayout>

score 0 · Answer 5 · edited May 23 '17 at 11:50

Try out image with rounded corners @ http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/

Found the below @ How to make an ImageView with rounded corners?

http://ruibm.com/?p=184.

public class ImageHelper {
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
            .getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    final float roundPx = pixels;

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
}
}

You can also check the implementation of the demo for RoundCornerImageView

score 0 · Answer 6 · answered Oct 04 '13 at 09:42

0

use scaleType="fitXY" instead of center

answered Oct 04 '13 at 09:42

user8938

559
1
4
12

How to use android:scaleType to show a picture

6 Answers6