Android Code Snippet [B4X] [XUI] Rectangle image with rounded corners

Code to create a rectangle image with rounded corners:

SS-2017-11-19_14.39.57.png


Compatible with B4A, B4i and B4J. Depends on XUI library v1.47+.

B4X:
Sub CreateRoundRectBitmap (Input As B4XBitmap, Radius As Float) As B4XBitmap
   Dim BorderColor As Int = xui.Color_Black
   Dim BorderWidth As Int = 4dip
   Dim c As B4XCanvas
   Dim xview As B4XView = xui.CreatePanel("")
   xview.SetLayoutAnimated(0, 0, 0, Input.Width, Input.Height)
   c.Initialize(xview)
   Dim path As B4XPath
   path.InitializeRoundedRect(c.TargetRect, Radius)
   c.ClipPath(path)
   c.DrawRect(c.TargetRect, BorderColor, True, BorderWidth) 'border
   c.RemoveClip
   Dim r As B4XRect
   r.Initialize(BorderWidth, BorderWidth, c.TargetRect.Width - BorderWidth, c.TargetRect.Height - BorderWidth)
   path.InitializeRoundedRect(r, Radius - 0.7 * BorderWidth)
   c.ClipPath(path)
   c.DrawBitmap(Input, r)
   c.RemoveClip
   c.Invalidate
   Dim res As B4XBitmap = c.CreateBitmap
   c.Release
   Return res
End Sub

Usage example:
B4X:
Dim img As B4XBitmap = xui.LoadBitmapResize(File.DirAssets, "image.png", ImageView1.Width, ImageView1.Height, True)
ImageView1.SetBitmap(CreateRoundRectBitmap(img, 20dip)) 'ImageView1 type is set to B4XView
 

Serinter

Member
Licensed User
Longtime User
B4J CODE ERROR

B4X:
Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private ImageView1 As B4XView
    Dim xui As XUI
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
  
    Dim img As B4XBitmap = xui.LoadBitmapResize(File.DirAssets, "image.png", ImageView1.Width, ImageView1.Height, True)
    ImageView1.SetBitmap(CreateRoundRectBitmap(img, 20dip)) 'ImageView1 type is set to B4XView
  
    MainForm.RootPane.AddNode(ImageView1, 450,350,100,100)

    MainForm.Show
End Sub


Sub CreateRoundRectBitmap (Input As B4XBitmap, Radius As Float) As B4XBitmap
    Dim BorderColor As Int = xui.Color_Black
    Dim BorderWidth As Int = 4dip
    Dim c As B4XCanvas
    Dim xview As B4XView = xui.CreatePanel("")
    xview.SetLayoutAnimated(0, 0, 0, Input.Width, Input.Height)
    c.Initialize(xview)
    Dim path As B4XPath
    path.InitializeRoundedRect(c.TargetRect, Radius)
    c.ClipPath(path)
    c.DrawRect(c.TargetRect, BorderColor, True, BorderWidth) 'border
    c.RemoveClip
    Dim r As B4XRect
    r.Initialize(BorderWidth, BorderWidth, c.TargetRect.Width - BorderWidth, c.TargetRect.Height - BorderWidth)
    path.InitializeRoundedRect(r, Radius - 0.7 * BorderWidth)
    c.ClipPath(path)
    c.DrawBitmap(Input, r)
    c.RemoveClip
    c.Invalidate
    Dim res As B4XBitmap = c.CreateBitmap
    c.Release
    Return res
  
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
    Return True
End Sub

ERROR!

B4J Versión: 5.90
Parseando código. (0.00s)
Compilando código (0.15s)
Compilado código de diseños (0.00s)
Organizando librerías. (0.00s)
Compilando el código Java generado. Error
B4J line: 17
ImageView1.SetBitmap(CreateRoundRectBitmap(img, 2
javac 1.8.0_144
src\b4j\example\main.java:93: error: package android.graphics does not exist
_imageview1.SetBitmap((android.graphics.Bitmap)(_createroundrectbitmap(_img,(float) (anywheresoftware.b4a.keywords.Common.DipToCurrent((int) (20)))).getObject()));
^
1 error

Removing the "dip" text remains the same error.
I've missed something??
 
Last edited:

Serinter

Member
Licensed User
Longtime User
Looks like you have added the B4A version of XUI to B4J.

There are three libraries:
XUI - B4A
jXUI - B4J
iXUI - B4i
Upppps. My fault. I'm going to correct this. Thanks again and forgive my impatience!!!
 
Last edited:

Serinter

Member
Licensed User
Longtime User
Upppps. My fault. I'm going to correct this. Thanks again and forgive my impatience!!!
Ok. I must be a perfect idiot... but I can't see how to put this to work!!!!
Now a new error:

B4X:
Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private ImageView1 As B4XView
    Dim xui As XUI
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1

    Dim img As B4XBitmap = xui.LoadBitmapResize(File.DirAssets, "image.png", ImageView1.Width, ImageView1.Height, True)
    ImageView1.SetBitmap(CreateRoundRectBitmap(img, 20dip)) 'ImageView1 type is set to B4XView

    MainForm.RootPane.AddNode(ImageView1, 450,350,100,100)

    MainForm.Show
End Sub


Sub CreateRoundRectBitmap (Input As B4XBitmap, Radius As Float) As B4XBitmap
    Dim BorderColor As Int = xui.Color_Black
    Dim BorderWidth As Int = 4dip
    Dim c As B4XCanvas
    Dim xview As B4XView = xui.CreatePanel("")
    xview.SetLayoutAnimated(0, 0, 0, Input.Width, Input.Height)
    c.Initialize(xview)
    Dim path As B4XPath
    path.InitializeRoundedRect(c.TargetRect, Radius)
    c.ClipPath(path)
    c.DrawRect(c.TargetRect, BorderColor, True, BorderWidth) 'border
    c.RemoveClip
    Dim r As B4XRect
    r.Initialize(BorderWidth, BorderWidth, c.TargetRect.Width - BorderWidth, c.TargetRect.Height - BorderWidth)
    path.InitializeRoundedRect(r, Radius - 0.7 * BorderWidth)
    c.ClipPath(path)
    c.DrawBitmap(Input, r)
    c.RemoveClip
    c.Invalidate
    Dim res As B4XBitmap = c.CreateBitmap
    c.Release
    Return res

End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
    Return True
End Sub

Ha ocurrido un error en la línea: 16 (Main)
java.lang.RuntimeException: Object should first be initialized (B4XView).

Any help, please!
I'm obfuscated and I don't see where's my fault code. I'm getting crazy with this
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
CreateRoundRectBitmap creates a bitmap. It doesn't return any view. You need to create the ImageView.

I recommend you to add views with the designer. Create a new layout. Add an ImageView and then call MainForm.RootPane.LoadLayout(...).
Remove the line that adds ImageView1 to RootPane.

If you want to do it programmatically:
B4X:
Dim iv As ImageView
iv.Initialize("")
Dim b4xview As B4XView = iv
MainForm.RootPane.AddNode(b4xview, ...)
Dim img As B4XBitmap = ...
b4xview.SetBitmap(CreateRoundRectBitmap(...))
 
Last edited:

Serinter

Member
Licensed User
Longtime User
CreateRoundRectBitmap create a bitmap. It doesn't return any view. You need to create the ImageView.

I recommend you to add views with the designer. Create a new layout. Add an ImageView and then call MainForm.RootPane.LoadLayout(...).
Remove the line that adds ImageView1 to RootPane.

If you want to do it programmatically:
B4X:
Dim iv As ImageView
iv.Initialize("")
Dim b4xview As B4XView = iv
MainForm.RootPane.AddNode(b4xview, ...)
Dim img As B4XBitmap = ...
b4xview.SetBitmap(CreateRoundRectBitmap(...))

Of course!!! What a silly and blind I was not seeing this!
Thank you very much for the inconvenience Erel. You are a genious!!
 
Top