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

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).

'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:

'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:

Dim xIV As B4XView = ImageView1
xIV.SetBitmap(CreateRoundBitmap(img, xIV .Width))

 

[Erel]

i add imageview1 with the designer

Have you loaded the layout before you call this method?

If you are unable to solve it then please upload the project.

 

[M.LAZ]

i used it with AppCompat in Left Layout
and i called the main layout

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.

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

    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))

 

[Erel]

I think that it is best if you start a new thread in the questions forum and upload your project (File - Export as zip).

 

[astronald]

Hello good day ,
How i can implement this on Widget, this is a service don't work properly.
I try

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.

 

[Erel]

Probably not possible. However please start a new thread in the questions forum and post the full error message.

 

[beacon]

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?

 

[Erel]

Your question has nothing to do with this thread. Please start a new thread in the questions forum.