Android Question Square png image -> Shown as rounded corners image

rtesluk

Member
Licensed User
Longtime User
July 31 2014 07:50 Hours

I have scoured a lot of threads to determine how to do this; that is, a visible square image to a visible rounded corner image; however, I cannot seem to be able to find a solution.

I have several squared cornered png images that I would like to be seen (visible) with rounded corners.

I can do it with colours and gradients on panels and labels but I cannot take a square image and end up with a rounded corner image in a panel for example.

Any help would be appreciated.

Thank you.

ray tesluk m.d.
port hope ontario canada
 

Informatix

Expert
Licensed User
Longtime User
The easiest way is to use my BetterImageView library with two images: one for the mask (same color as the background on the edges, with a transparent middle, shaped with round corners) and placed in the foreground. Another for the image to show through the mask, placed in the background. You can also do that by superposing two ImageViews.
An alternative is to use my Accelerated Surface library. There's an example showing an image with rounded corners.
 
Upvote 0

rtesluk

Member
Licensed User
Longtime User

Where is the link to the example?

rtesluk
 
Upvote 0

rtesluk

Member
Licensed User
Longtime User
In the first post of the thread. You can also see the screenshot of the example in this post.

Silly of me - yes I found the link to your examples - many of them.

Very impressive.

'thanks a bunch'

So here is one of the images which I wish to have rounded corners. How is that done with your library?

Erel has a sample using a NinePatchDrawable routine; however, it only is effective on a BLACK background; that is, the panel is 'a black outline of itself - skeletal-like' and on a BLACK background with my image superimposed on top of the panel, the corners appear 'rounded' - very nice but only in BLACK.

BTW, I am going to search the b4a for more examples and explanations of your library right now.

rtesluk
 

Attachments

  • funkybirdgreen3.png
    7.4 KB · Views: 183
Upvote 0

rtesluk

Member
Licensed User
Longtime User
Aug 14 2014
23:20 Hours

Hi

I have uploaded the zip file of this project.

It uses the drawRoundRect function of the ABExtDrawing library to put a wide enough brush stroke around my image file to give it a 'rounded' corner effect.

There is a commented paragraph about the structure and function of the 'rect' entity.

I am not certain exactly how the rx and ry arguments work in the subroutine



Sub
DrawRoundedRectangle(cvs AsCanvas, rectWAT AsRect, rx AsFloat, ry AsFloat, Color AsInt, Filled AsBoolean, StrokeWidth AsFloat)

I think these arguments determine 'the roundness' of the final image. If there is a full description of this library somewhere other than the B4A Help module, I would like to read it.

I would like to have comments on these matters.

Thank you.

Ray
 

Attachments

  • RndCornerRPT.zip
    74.9 KB · Views: 201
  • icon.png
    1.5 KB · Views: 198
  • rndrectrpt.png
    43.4 KB · Views: 232
  • funkynoteblue3.png
    4.1 KB · Views: 186
  • funkybirdblue3.png
    7.1 KB · Views: 194
  • DarkSlateGray.png
    48.7 KB · Views: 201
  • Blue_0_127_0.png
    49.5 KB · Views: 229
  • redgreenblue.png
    55.7 KB · Views: 194
Last edited:
Upvote 0

klaus

Expert
Licensed User
Longtime User
I am not certain exactly how the rx and ry arguments work in the subroutine.
You can set two different radii for x and y, if rx and ry are different the corner will look elliptic.
Look at the example below:
B4X:
Sub Globals
    Dim cvsActivity As Canvas
    Dim ABExtDraw As ABExtDrawing
    Dim ABRect As ABRectF
    Dim ABPaint1 As ABPaint
End Sub

Sub Activity_Create(FirstTime As Boolean)
    cvsActivity.Initialize(Activity)
    ABPaint1.Initialize
    ABPaint1.SetStrokeWidth(3dip)
    ABPaint1.SetColor(Colors.Red)
    ABRect.Initialize(10dip, 10dip, 200dip, 100dip)
    ABExtDraw.drawRoundRect(cvsActivity, ABRect, 20dip, 20dip, ABPaint1)
  
    ABRect.Initialize(10dip, 110dip, 200dip, 200dip)
    ABExtDraw.drawRoundRect(cvsActivity, ABRect, 20dip, 10dip, ABPaint1)
  
    ABRect.Initialize(10dip, 210dip, 60dip, 260dip)
    ABExtDraw.drawRoundRect(cvsActivity, ABRect, 25dip, 25dip, ABPaint1)
  
    ABRect.Initialize(100dip, 210dip, 200dip, 260dip)
    ABExtDraw.drawRoundRect(cvsActivity, ABRect, 50dip, 25dip, ABPaint1)
End Sub
 

Attachments

  • DrawRoundRect.zip
    6.1 KB · Views: 192
  • DrawRoundRect.png
    27.6 KB · Views: 246
Upvote 0

rtesluk

Member
Licensed User
Longtime User
Thank you Klaus as always - ray tesluk

I have attempted to demonstrate the different combinations of radii.

Enclosed is the zipped file and demo pic.

Thanks again!
 

Attachments

  • radii20140814.zip
    7.7 KB · Views: 211
  • radii.png
    26.4 KB · Views: 209
Upvote 0

rtesluk

Member
Licensed User
Longtime User
I have added the rx/ry values underneath each image for your perusal.
 

Attachments

  • radiiwithvalues.png
    36.1 KB · Views: 207
  • radii20140814c.zip
    5.5 KB · Views: 165
Upvote 0

rtesluk

Member
Licensed User
Longtime User
Just another update to the project - did notice with the dip values DOUBLE on the emulator but not on the cell phone device.

I tried a couple of emulators - the same thing - strange.
 

Attachments

  • radii20140816.zip
    46.2 KB · Views: 188
  • radii20140817.zip
    46.5 KB · Views: 171
Upvote 0
Cookies are required to use this site. You must accept them to continue using the site. Learn more…