Imageview to fit layout with border and rounded corners

Question

I was wondering if you could help me with something. I have a relative layout with an imageview at the top. Around the relative layout I have a border (layout_bg.xml). As you can see from the image I attached, the border doesn't continue around the image, which is what I want it to do. I know I need some extra code here but as I am quite new to java I haven't been able to figure it out or find a solution online, and I was hoping you could help me or point me in the right direction.

What I want to do:

Have the image fit my frame but with border and rounded top left and right corners.

image

enter image description here

layout_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<corners android:radius="8dp"/>
<stroke android:width="3dp" android:color="#50A4A4A4" />
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>

item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:geekui="http://schemas.android.com/apk/res-auto"
android:background="@drawable/layout_bg"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="70dp">

<ImageView
    android:id="@+id/imageView_player"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"
    android:layout_width="match_parent"
    android:layout_height="225dp"
    android:layout_alignParentTop="true" />

</RelativeLayout>

http://stackoverflow.com/questions/2459916/how-to-make-an-imageview-with-rounded-corners — mpkuth, Dec 15 '14 at 01:40

score 5 · Accepted Answer · answered Dec 15 '14 at 03:46

Check out code below, which make an ImageView have round corners on top-left and top-right.

public class TopRoundImageView extends ImageView {

    public TopRoundImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public TopRoundImageView(Context context) {
        super(context);
        init();
    }

    private final RectF roundRect = new RectF();
    private float rect_adius = 7;
    private final Paint maskPaint = new Paint();
    private final Paint zonePaint = new Paint();

    private void init() {
        maskPaint.setAntiAlias(true);
        maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        zonePaint.setAntiAlias(true);
        zonePaint.setColor(Color.WHITE);
        float density = getResources().getDisplayMetrics().density;
        rect_adius = rect_adius * density;
    }

    public void setRectAdius(float adius) {
        rect_adius = adius;
        invalidate();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        int w = getWidth();
        int h = getHeight();
        roundRect.set(0, 0, w, h + rect_adius);
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.saveLayer(roundRect, zonePaint, Canvas.ALL_SAVE_FLAG);
        canvas.drawRoundRect(roundRect, rect_adius, rect_adius, zonePaint);
        canvas.saveLayer(roundRect, maskPaint, Canvas.ALL_SAVE_FLAG);
        super.draw(canvas);
        canvas.restore();
    }

score 1 · Answer 2 · answered Dec 15 '14 at 03:58

You could use the RoundedBitmapDrawableFactory RoundedBitmapDrawable classes like this

RoundedBitmapDrawable roundedDrawable = RoundedBitmapDrawableFactory.create(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.your_drawable_resource));

To set the corner radius, do this

roundedDrawable.setCornerRadius(5.0f);

and then set it on your ImageView like this

imageView.setDrawableResource(roundedDrawable)

Click HERE to learn more about the RoundedBitmapDrawableFactory class.

and HERE for the RoundedBitmapDrawable class

Hope this helps.

Tried the other code first, and since it worked i haven't tried this one yet but i do appreciate your help and quick response. Thanks! — Stansley, Dec 15 '14 at 13:04

Imageview to fit layout with border and rounded corners

layout_bg.xml

item.xml

2 Answers2