Bitmap image with rounded corners with stroke

Question

I have a image with sharp edges. enter image description here

the tile_mode.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/background"
    android:tileMode="repeat">
</bitmap>

the back.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
       <item android:drawable="@drawable/tile_mode" />
    <item>
        <shape>
            <solid/>
            <stroke android:width="1dip" android:color="#225786" />
            <corners android:radius="10dip"/>
            <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
        </shape>
    </item>

layout.xml

<LinearLayout
                android:id="@+id/frame1"
                android:background="@drawable/back"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">
            </LinearLayout>

I am setting the image as a background to this layout and drawing a border to it but the problem is the image is square with sharp edges and the border which I am drawing in the xml is rounded corners. So how to make the image also with rounded corners?

score 20 · Accepted Answer · edited May 23 '17 at 12:24

This is one of solution in which you have to make round to your main layout background and inside keep your imageview with your desire image:

something like below:

back.xml

This will make your image to round corner

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
     <stroke android:width="1dp" android:color="#dd7b7a"/>
     <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" 
     android:topLeftRadius="10dp" android:topRightRadius="10dp"/> 
     <solid android:color="#dd7b7a"/>
 </shape>

tile_mode.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/background"
android:tileMode="repeat" />

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    >
<LinearLayout 
     android:padding="4dip"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/back"
    android:gravity="center_horizontal"
    >
<LinearLayout  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
   android:background="@drawable/tile_mode"
    />
</LinearLayout>  
</LinearLayout>

Updated

After digging lots, I came across on of solution which already posted on stackoverflow

Changing Image as Rounded Corner

How to make an ImageView to have rounded corners

step1@

main.xml

 <RelativeLayout 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:gravity="center"
        tools:context=".MainActivity" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"

          />

    </RelativeLayout>

Step2@

Make one function which make rounded to your bitmap using canvas.

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;
    }

step3@

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView image=(ImageView)findViewById(R.id.image);


        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.testing);


    image.setImageBitmap(getRoundedCornerBitmap(bitmap, 20));

still the image is with sharp edges and there is no background for bitmap in xml\ — Goofy, Jan 23 '13 at 05:51
ok,now where do i add the background image i mean the bitmap xml ? — Goofy, Jan 23 '13 at 06:02
@Goofy check now, you have add at same way, as you added before. — RobinHood, Jan 23 '13 at 06:09
please wait i will check that,please help me i am stuck from long time — Goofy, Jan 23 '13 at 06:12
now its not displaying the image and also the is filled instead of image — Goofy, Jan 23 '13 at 06:15
@Goofy if it is plain image with single color then use color instead image, — RobinHood, Jan 23 '13 at 06:23
no buddy its an image yes if it was a color it would have been easy but i have a image here — Goofy, Jan 23 '13 at 06:29
hey why two linear layouts i need to add in a single layout? cna we do that? and where are we refering to the image in the back.xml — Goofy, Jan 23 '13 at 06:48
Is it possible to achieve the same effect as in updated version of answer but ONLY with XML ? — Ricardo Simmus, Feb 21 '13 at 23:29
about getRoundedCornerBitmap, is it possible to do it without creating a new bitmap? maybe by having a drawable that wraps the bitmap and decides not to draw the corners (making them rounded) ? — android developer, May 14 '14 at 08:45
your code works perfectly. But your code convert some images in Oval shape instead of circular. Please refer link: - http://postimg.org/image/u01enjuxv/23bcc843/ — AmmY, Aug 31 '15 at 06:17
You can also use `RoundedBitmapDrawableFactory.create(getResources(), bitmap)`: https://stackoverflow.com/a/33698127/2736039 — Ultimo_m, Feb 22 '19 at 13:34

Bhavdip Sagar · Answer 2 · 2013-01-23T06:37:36.143

2

ok let's try in below way

     <?xml version="1.0" encoding="utf-8"?>
 <shape
    android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="30dp"/>
    <stroke android:width="2dp" android:color="#000000"/>
</shape>

<LinearLayout
    android:id="@+id/frame1"
    android:background="@drawable/corner_background"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"
    >
    <ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/background" 
    />
</LinearLayout>

edited Jan 23 '13 at 06:37

answered Jan 23 '13 at 05:46

Bhavdip Sagar

1,895
15
25

how will i refer to my bitmap xml ? – Goofy Jan 23 '13 at 06:07
you do not need use your bitmap image just use my xml image file name it will handle it, you just put can you archive same bitmap that you have.let me know – Bhavdip Sagar Jan 23 '13 at 06:23
for edges changes change in below code that i did send you – Bhavdip Sagar Jan 23 '13 at 06:27
can you please help me on that i mean this ; where shall i add this? in your code – Goofy Jan 23 '13 at 06:29
ok let's try – Bhavdip Sagar Jan 23 '13 at 06:33
No buddy i need to refer to the bitmap image xml in your code as its a image – Goofy Jan 23 '13 at 06:35
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/23192/discussion-between-bhavdip-pathar-and-goofy) – Bhavdip Sagar Jan 23 '13 at 06:39

score 2 · Answer 3 · answered Nov 08 '13 at 11:18

RobinHood's answer worked for me with one change due to an error I was receiving about variable assignment.

I had to change the line:

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

To this line:

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

Making my complete code this:

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    requestWindowFeature(Window.FEATURE_NO_TITLE);
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setContentView(R.layout.activity_main);

    TextView textViewTitle = (TextView) findViewById(R.id.MYTEXTIDHERE);
    textViewTitle.setText("Some Text");

    ImageButton imageButtonSetter = (ImageButton) findViewById(R.id.MYIMAGEIDHERE);
    Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.MYIMAGENAMEHERE);     
    imageButtonSetter.setImageBitmap(getRoundedCornerBitmap(myBitmap, 40));
}   

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(PorterDuff.Mode.SRC_IN));        
    canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
}

score 2 · Answer 4 · answered Jul 14 '15 at 01:30

Actually, there is a library that I made which meet your needs exactly, and you don't have to bother with those xml files.

https://github.com/pungrue26/SelectableRoundedImageView

With this open-source project, You can set different radii on each corners, and set borders(width and colors), and etc. like below. I hope it may help you.

Rounded ImageView inside CardView

score 1 · Answer 5 · answered Aug 31 '15 at 12:58

Pass original bitmap to the following function and you will get a rounded bitmap as result :) . Hope this helps someone.

 public Bitmap getRoundedBitmap(Bitmap bitmap) {
        Bitmap resultBitmap;
        int originalWidth = bitmap.getWidth();
        int originalHeight = bitmap.getHeight();
        float r;

        if (originalWidth > originalHeight) {
            resultBitmap = Bitmap.createBitmap(originalHeight, originalHeight,
                    Bitmap.Config.ARGB_8888);
            r = originalHeight / 2;
        } else {
            resultBitmap = Bitmap.createBitmap(originalWidth, originalWidth,
                    Bitmap.Config.ARGB_8888);
            r = originalWidth / 2;
        }

        Canvas canvas = new Canvas(resultBitmap);

        final Paint paint = new Paint();
        final Rect rect = new Rect(ConstsCore.ZERO_INT_VALUE,
                ConstsCore.ZERO_INT_VALUE, originalWidth, originalHeight);

        paint.setAntiAlias(true);
        canvas.drawARGB(ConstsCore.ZERO_INT_VALUE, ConstsCore.ZERO_INT_VALUE,
                ConstsCore.ZERO_INT_VALUE, ConstsCore.ZERO_INT_VALUE);
        canvas.drawCircle(r, r, r, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return resultBitmap;
    }

score 0 · Answer 6 · answered Jan 23 '13 at 05:51

try your back.xml something like this.

<?xml version="1.0" encoding="UTF-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
<solid android:color="#ffffffff"/>    

<stroke android:width="3dp"
        android:color="#ff000000"
        />

<padding android:left="1dp"
         android:top="1dp"
         android:right="1dp"
         android:bottom="1dp"
         /> 

<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" 
 android:topLeftRadius="7dp" android:topRightRadius="7dp"/> 
</shape>

where will add the bitmap xml which is tilemode repeat in this? — Goofy, Jan 23 '13 at 06:06

score 0 · Answer 7 · edited May 23 '17 at 12:08

0

I had a similar problem today only my image was a Google map. you actually have to hide the corners and the way to do that is to create a 9Patch as the following one:

enter image description here

and apply it as a background over all your layout or another layout covering your layout. Take a look at the following link for more information:

Is there a way to implement rounded corners to a Mapfragment?

I have actully went to this site: http://www.sumopaint.com/app/
and painted it all by hand you can take my example and change the colors to your liking. you would probably need the next one:

enter image description here

you can get more information on how to create 9Patchs in the following links:

http://radleymarx.com/blog/simple-guide-to-9-patch/

http://android9patch.blogspot.co.il/

edited May 23 '17 at 12:08

Community

1
1

answered Jan 23 '13 at 06:07

Emil Adz

38,699
35
127
177

how to do it please guide me i am stuck from long time – Goofy Jan 23 '13 at 06:09
hey how to do it i need to create a image like this and hide it with this image? – Goofy Jan 23 '13 at 06:38
what will be the color around the corners?white? – Emil Adz Jan 23 '13 at 06:53
then this way won't help you. – Emil Adz Jan 23 '13 at 06:58

score 0 · Answer 8 · answered Jul 01 '13 at 08:53

<?xml version="1.0" encoding="utf-8"?>

<item>
    <bitmap
        android:src="@drawable/bg_striped_img"
        android:tileMode="repeat" />
</item>
<item android:left="-20dp" android:top="-20dp" android:right="-20dp" android:bottom="-20dp">
    <shape android:shape="oval" >
        <stroke
            android:width="20dp"
            android:color="#ffffffff" />

        <solid android:color="#00000000" />

        <size
            android:height="120dp"
            android:width="120dp" />
    </shape>
</item>

    <item >
    <shape android:shape="oval" >
        <stroke
            android:width="1dp"
            android:color="#ff999999" />

        <solid android:color="#00000000" />

        <size
            android:height="120dp"
            android:width="120dp" />
    </shape>
</item>

Bitmap image with rounded corners with stroke

8 Answers8

Linked