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

[rtesluk]

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]

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

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.

 

[rtesluk]

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.

Where is the link to the example?

rtesluk

 

[Informatix]

Where is the link to the example?

rtesluk

In the first post of the thread. You can also see the screenshot of the example in this post.

 

[rtesluk]

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

 

[rtesluk]

I think I found A solution to a 'square peg and a round hole' using ABExtDrawing

 

[rtesluk]

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

 

[klaus]

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:

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

 

[rtesluk]

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!

 

[rtesluk]

I have added the rx/ry values underneath each image for your perusal.

 

[rtesluk]

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.