Search code examples
androidandroid-imageviewandroid-5.0-lollipopandroid-4.4-kitkatandroid-cardview

ImageView scaleType="fitXY" is not working in pre-lollipop device inside the Cardview | Android


I have ImageView which is inside the CardView as below in my code. My ImageView scaleType="fitXY" is not working on pre-lollipop devices.But it looks better on Lollipop devices. Please look at below images.
Image As we see in above image there is white padding around the imageview which i want to remove, I want to look alike image on both pre-lolipop and post lolipop devices. Please help me to short out from the problem. Thanks :)

 <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="6dp"
                app:cardCornerRadius="10dp"
                card_view:cardUseCompatPadding="false"
                >

                <ImageView
                    android:id="@+id/imgChat"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="fitXY"
                    />
            </android.support.v7.widget.CardView>

Solution

  • As the problem is not short out in pre-lollipop devices, We can customize the ImageView in rounded Imageview(As in Lollipop devices). We can make the check of the OS and customize the imageview according it.

    Basically we can use the Universal image loader this OR Glide image loader this to create the application.

    Universal image loader provided the default RoundedCorners to create the corner of ImageView like this

     ImageLoader imageLoader = ImageLoader.getInstance();
            imageLoader.init(ImageLoaderConfiguration.createDefault(MainActivity.this));
            DisplayImageOptions options = new DisplayImageOptions.Builder()
                    .displayer(new RoundedBitmapDisplayer(20))/// RoundedBitmapDisplayer IS THE CLASS BY  WHICH , WE CAN CREATE THE ROUNDED CORNER OF THE IMAGEVIEW
                    .cacheInMemory(true)
                    .cacheOnDisk(true)
                    .build();
            imageLoader.displayImage("http://thedeveloperworldisyours.com/wp-content/uploads/scareface.jpeg", YOUR_IMAGEVIEW,options);
    

    In Glide image loader , we need to create the Custom class to create the arc of the Imageview ,In this link you find the Custom rounded class to create the rounded arc around the ImageView

    Glide.with(this)
                    .load("http://thedeveloperworldisyours.com/wp-content/uploads/scareface.jpeg")
                    .bitmapTransform(new RoundedCornersTransformation( MainActivity.this,15, 2)) ///RoundedCornersTransformation IS THE CLASS, WHICH YOU NEED TO COPY INSIDE YOURS PROJECT, PLEASE FIND THIS CLASS ON ABOVE LINK AND I AM ALSO PROVIDING THE CLASS FOR IT
                    .into(YOUR_IMAGEVIEW);
    

    For creating the rounded corner in glide , we need to copy the below class in our project, I have got this class from this link

    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.BitmapShader;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.graphics.RectF;
    import android.graphics.Shader;
    
    import com.bumptech.glide.Glide;
    import com.bumptech.glide.load.Transformation;
    import com.bumptech.glide.load.engine.Resource;
    import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
    import com.bumptech.glide.load.resource.bitmap.BitmapResource;
    
    /**
     * Created by javiergonzalezcabezas on 2/4/16.
     */
    public class RoundedCornersTransformation implements Transformation<Bitmap> {
    
        public enum CornerType {
            ALL,
            TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,
            TOP, BOTTOM, LEFT, RIGHT,
            OTHER_TOP_LEFT, OTHER_TOP_RIGHT, OTHER_BOTTOM_LEFT, OTHER_BOTTOM_RIGHT,
            DIAGONAL_FROM_TOP_LEFT, DIAGONAL_FROM_TOP_RIGHT
        }
    
        private BitmapPool mBitmapPool;
        private int mRadius;
        private int mDiameter;
        private int mMargin;
        private CornerType mCornerType;
    
        public RoundedCornersTransformation(Context context, int radius, int margin) {
            this(context, radius, margin, CornerType.ALL);
        }
    
        public RoundedCornersTransformation(BitmapPool pool, int radius, int margin) {
            this(pool, radius, margin, CornerType.ALL);
        }
    
        public RoundedCornersTransformation(Context context, int radius, int margin,
                                            CornerType cornerType) {
            this(Glide.get(context).getBitmapPool(), radius, margin, cornerType);
        }
    
        public RoundedCornersTransformation(BitmapPool pool, int radius, int margin,
                                            CornerType cornerType) {
            mBitmapPool = pool;
            mRadius = radius;
            mDiameter = mRadius * 2;
            mMargin = margin;
            mCornerType = cornerType;
        }
    
        @Override
        public Resource<Bitmap> transform(Resource<Bitmap> resource, int outWidth, int outHeight) {
            Bitmap source = resource.get();
    
            int width = source.getWidth();
            int height = source.getHeight();
    
            Bitmap bitmap = mBitmapPool.get(width, height, Bitmap.Config.ARGB_8888);
            if (bitmap == null) {
                bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
            }
    
            Canvas canvas = new Canvas(bitmap);
            Paint paint = new Paint();
            paint.setAntiAlias(true);
            paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
            drawRoundRect(canvas, paint, width, height);
            return BitmapResource.obtain(bitmap, mBitmapPool);
        }
    
        private void drawRoundRect(Canvas canvas, Paint paint, float width, float height) {
            float right = width - mMargin;
            float bottom = height - mMargin;
    
            switch (mCornerType) {
                case ALL:
                    canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, paint);
                    break;
                case TOP_LEFT:
                    drawTopLeftRoundRect(canvas, paint, right, bottom);
                    break;
                case TOP_RIGHT:
                    drawTopRightRoundRect(canvas, paint, right, bottom);
                    break;
                case BOTTOM_LEFT:
                    drawBottomLeftRoundRect(canvas, paint, right, bottom);
                    break;
                case BOTTOM_RIGHT:
                    drawBottomRightRoundRect(canvas, paint, right, bottom);
                    break;
                case TOP:
                    drawTopRoundRect(canvas, paint, right, bottom);
                    break;
                case BOTTOM:
                    drawBottomRoundRect(canvas, paint, right, bottom);
                    break;
                case LEFT:
                    drawLeftRoundRect(canvas, paint, right, bottom);
                    break;
                case RIGHT:
                    drawRightRoundRect(canvas, paint, right, bottom);
                    break;
                case OTHER_TOP_LEFT:
                    drawOtherTopLeftRoundRect(canvas, paint, right, bottom);
                    break;
                case OTHER_TOP_RIGHT:
                    drawOtherTopRightRoundRect(canvas, paint, right, bottom);
                    break;
                case OTHER_BOTTOM_LEFT:
                    drawOtherBottomLeftRoundRect(canvas, paint, right, bottom);
                    break;
                case OTHER_BOTTOM_RIGHT:
                    drawOtherBottomRightRoundRect(canvas, paint, right, bottom);
                    break;
                case DIAGONAL_FROM_TOP_LEFT:
                    drawDiagonalFromTopLeftRoundRect(canvas, paint, right, bottom);
                    break;
                case DIAGONAL_FROM_TOP_RIGHT:
                    drawDiagonalFromTopRightRoundRect(canvas, paint, right, bottom);
                    break;
                default:
                    canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, paint);
                    break;
            }
        }
    
        private void drawTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
            canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter),
                    mRadius, mRadius, paint);
            canvas.drawRect(new RectF(mMargin, mMargin + mRadius, mMargin + mRadius, bottom), paint);
            canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint);
        }
    
        private void drawTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
            canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius,
                    mRadius, paint);
            canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint);
            canvas.drawRect(new RectF(right - mRadius, mMargin + mRadius, right, bottom), paint);
        }
    
        private void drawBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
            canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom),
                    mRadius, mRadius, paint);
            canvas.drawRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom - mRadius), paint);
            canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint);
        }
    
        private void drawBottomRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
            canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius,
                    mRadius, paint);
            canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint);
            canvas.drawRect(new RectF(right - mRadius, mMargin, right, bottom - mRadius), paint);
        }
    
        private void drawTopRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
            canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius,
                    paint);
            canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right, bottom), paint);
        }
    
        private void drawBottomRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
            canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius,
                    paint);
            canvas.drawRect(new RectF(mMargin, mMargin, right, bottom - mRadius), paint);
        }
    
        private void drawLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
            canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius,
                    paint);
            canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint);
        }
    
        private void drawRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
            canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius,
                    paint);
            canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint);
        }
    
        private void drawOtherTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
            canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius,
                    paint);
            canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius,
                    paint);
            canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), paint);
        }
    
        private void drawOtherTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
            canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius,
                    paint);
            canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius,
                    paint);
            canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom - mRadius), paint);
        }
    
        private void drawOtherBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
            canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius,
                    paint);
            canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius,
                    paint);
            canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mRadius, bottom), paint);
        }
    
        private void drawOtherBottomRightRoundRect(Canvas canvas, Paint paint, float right,
                                                   float bottom) {
            canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius,
                    paint);
            canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius,
                    paint);
            canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), paint);
        }
    
        private void drawDiagonalFromTopLeftRoundRect(Canvas canvas, Paint paint, float right,
                                                      float bottom) {
            canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter),
                    mRadius, mRadius, paint);
            canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius,
                    mRadius, paint);
            canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mDiameter, bottom), paint);
            canvas.drawRect(new RectF(mMargin + mDiameter, mMargin, right, bottom - mRadius), paint);
        }
    
        private void drawDiagonalFromTopRightRoundRect(Canvas canvas, Paint paint, float right,
                                                       float bottom) {
            canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius,
                    mRadius, paint);
            canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom),
                    mRadius, mRadius, paint);
            canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), paint);
            canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), paint);
        }
    
        @Override public String getId() {
            return "RoundedTransformation(radius=" + mRadius + ", margin=" + mMargin + ", diameter="
                    + mDiameter + ", cornerType=" + mCornerType.name() + ")";
        }
    }