Create Imageview with rounded corners in Sketchware

To create an ImageView showing image with rounded corners follow the steps given below.

1. In your Sketchware android project, add an ImageView imageview1, and set your desired image in imageview1.


2. In LOGIC area of your project, in onCreate event, add two add source directly blocks.

3. In the first add source directly block, add the following code which creates a bitmap image from imageview1.
Bitmap bm = ((android.graphics.drawable.BitmapDrawable) imageview1.getDrawable()).getBitmap();

4. Then apply class getRoundedCornerBitmap(Bitmap, int) to round the corners of bitmap image, and then set it as image of imageview1, using following code in the same block.
imageview1.setImageBitmap(getRoundedCornerBitmap(bm, 360));


Note that in above code, imageview1 is id of Imageview and it should be changed as per the id of your Imageview.

The underlined text 360 is the extent to which the corners are rounded. It can be changed between 0 and 360 as per the requirement. 360 is maximum, whereas 0 is minimum. 0 creates a square or rectangle.

5. In second add source directly block, add the following code which defines the class getRoundedCornerBitmap(Bitmap, int).

}
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) { Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.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;


This should be the last block in onCreate event in Sketchware.

6. Save and run the project. You will find your image with rounded corners in Imageview.

Comments

  1. How to make round edges of textview

    ReplyDelete
  2. How to remove that color and show transparent?

    ReplyDelete
  3. How to solve the problem of double variables to create another round corner image??

    ReplyDelete
  4. Giving error on drawable. How can I fix it?

    ReplyDelete
  5. Is show invalid character on the 'getBitmap' for 1st block and 'setImageBitmap' at 2nd block, how to solve?

    ReplyDelete
  6. how to set corner radius for imageview for one corner or two corners

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Creating a Drawing View in Sketchware

Enable Fullscreen for Youtube videos in WebView

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware