Android Code Snippet [B4X] [XUI] Create a round image

Status
Not open for further replies.
Better implementation in B4XImageView (XUI Views)

This code snippet is based on XUI library and it is compatible with B4A, B4i and B4J.
The input is a bitmap and the output is a round bitmap (with no distortions).

SS-2017-10-17_12.59.56.png


B4X:
'xui is a global XUI variable.
Sub CreateRoundBitmap (Input As B4XBitmap, Size As Int) As B4XBitmap
   If Input.Width <> Input.Height Then
       'if the image is not square then we crop it to be a square.
       Dim l As Int = Min(Input.Width, Input.Height)
       Input = Input.Crop(Input.Width / 2 - l / 2, Input.Height / 2 - l / 2, l, l)
   End If
   Dim c As B4XCanvas
   Dim xview As B4XView = xui.CreatePanel("")
   xview.SetLayoutAnimated(0, 0, 0, Size, Size)
   c.Initialize(xview)
   Dim path As B4XPath
   path.InitializeOval(c.TargetRect)
   c.ClipPath(path)
   c.DrawBitmap(Input.Resize(Size, Size, False), c.TargetRect)
   c.RemoveClip
   c.DrawCircle(c.TargetRect.CenterX, c.TargetRect.CenterY, c.TargetRect.Width / 2 - 2dip, xui.Color_White, False, 5dip) 'comment this line to remove the border
   c.Invalidate
   Dim res As B4XBitmap = c.CreateBitmap
   c.Release
   Return res
End Sub

Usage example:
B4X:
'ImageView1 type is B4XView
Dim img As B4XBitmap = xui.LoadBitmap(File.DirAssets, "myimage.jpg")
ImageView1.SetBitmap(CreateRoundBitmap(img, ImageView1.Width))
If you don't want to set the ImageView type to B4XView then you can do it locally:
B4X:
Dim xIV As B4XView = ImageView1
xIV.SetBitmap(CreateRoundBitmap(img, xIV .Width))
 
Last edited:

lazreg

Active Member
Licensed User
i used it with AppCompat in Left Layout
and i called the main layout
B4X:
Activity.LoadLayout("homeScreen")

and i put my imageView1 in the Left Layout with designer
then Left Layout loaded in a panel as we use in AppCompat.
B4X:
Dim lftMenu As Panel  
    lftMenu.Initialize("")
     sm.Menu.AddView(lftMenu, 0, 0, 100%x - offset, 100%y)
    lftMenu.LoadLayout("Left")

then i used this code to create round bitmap
B4X:
    Dim img As B4XBitmap = Xui.LoadBitmap(File.DirAssets, "ff.jpg")
    'ImageView1.SetBitmap(CreateRoundBitmap(img, ImageView1.Width))
   
    Dim xIV As B4XView = ImageView1
    xIV.SetBitmap(CreateRoundBitmap(img, xIV .Width))
 

astronald

Member
Licensed User
Hello good day ,
How i can implement this on Widget, this is a service don't work properly.
I try
B4X:
Dim img As B4XBitmap = Xui.LoadBitmap(File.DirAssets, "imgFace.jpg")
rv.SetImage("imgFace",CreateRoundBitmap(img, 50dip))
return this error
java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.Object java.lang.ref.Reference.get()' on a null object reference
Thanks.
 
Last edited:

beacon

Member
Licensed User
This works fine for me, thank you; but what I can't fathom is how to get a transparent background, so as to have my chosen picture sitting (ie. "floating") over the device wallpaper.

If I make Activity.Color = xui.Color_Green it shows green behind the rounded picture, as I would expect.

If I make Activity.Color = xui.Color_Transparent it shows dark grey behind the rounded picture, as I would not expect.

I have also tested with Activity.Color, ImageView1.Color and xview.Color each set to xui.Color_Transparent.

The end result is always an opaque dark grey background behind the rounded picture.

Is this just a feature of the clip process?
 
Status
Not open for further replies.
Top