I have a image with sharp edges.
the tile_mode.xml
the back.xml
layout.xml
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?
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
tile_mode.xml
layout.xml
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
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)); 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; } 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.
ok let's try in below way
try your back.xml something like this.
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:
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:
you can get more information on how to create 9Patchs in the following links:
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; }