B4J Question SOLVED - Image with ROUNDED CORNERS at Runtime ??

[Serinter]

Hi!
I'm stuck. I'd like to know if there's a way to obtain an image with rounded corners.
Doesn't mind the type of control Imageview, button, pane...

I've tried a button with background image and CSS with

CSSUtils.SetStyleProperty(Button1,"-fx-background-radius","8")

But if I load an image, the rounded corners do not appear anywhere

A little code to explain better:

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private Button1  As Button
    Private Pane1 As Pane
   
End Sub

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

    Dim path As String = GetSystemProperty("user.home", "")
   
    Button1.Initialize("Button1")

    Pane1.Initialize("Pane1")
   
    MainForm.RootPane.AddNode(Button1, 50,50,100,100)

    MainForm.RootPane.AddNode(Pane1, 50,350,100,100)
   
    If File.Exists(path & "\Pictures","incredibles.png") Then
        CSSUtils.SetBackgroundImage(Button1,path & "\Pictures","incredibles.png")
        CSSUtils.SetBackgroundImage(Pane1,path & "\Pictures","incredibles.png")
    End If   
   
    CSSUtils.SetBorder(Button1,2,fx.Colors.Blue,10)
    CSSUtils.SetStyleProperty(Button1,"background-repeat","stretch")
    CSSUtils.SetStyleProperty(Button1,"-fx-background-radius","8")
   
    CSSUtils.SetBorder(Pane1,2,fx.Colors.Blue,10)
    CSSUtils.SetStyleProperty(Pane1,"background-repeat","stretch")

    MainForm.Show
   
End Sub

Result:

I've used the CSSUtils.SetBorder property to show the fail properly.

I've also seen the following B4A code from https://www.b4x.com/android/forum/t...e-on-a-round-corners-panel-how.60310/#content , but I don't know to translate it to B4J actually:

Sub AssignBitmapToPanelWithRoundBorders( P As Panel, B0 As Bitmap, radius As Int)

    Dim B1,B2 As Bitmap
    Dim cv As Canvas
    Dim Rect1 As Rect   
    
    B2.InitializeMutable(P.Width,P.Height)
    cv.Initialize2(B2)
    Dim Drawable1 As ColorDrawable
    Drawable1.Initialize(Colors.White,radius)
    Rect1.Initialize(0,0,B2.Width-1,B2.Height-1)
    cv.DrawDrawable(Drawable1,Rect1)

    B1.InitializeMutable(P.Width,P.Height)
    cv.Initialize2(B1)
    cv.DrawBitmap(B0,Null,Rect1) 
      
    For r=0 To B2.Height-1
        For c=0 To B2.Width-1
            If B2.GetPixel(c,r)=0 Then
                cv.DrawPoint(c,r,0)
            End If
        Next
    Next

    P.SetBackgroundImage(B1)   
End Sub

Any help, indication, suggestion... will be welcome!!
Sorry for my english, and Thanks in advance.

 

[jahswant]

Have you tried the new XUI Tutorial ?
Come HERE.

 

[Erel]

You can do it with the designer:

Add a pane, set the Drawable to BitmapDrawable and set the corner radius.

 

[Serinter]

Have you tried the new XUI Tutorial ?
Come HERE.

Thanks for your reply, jahswani, but the new XUI tutorial shows how to make a Round image, not a Rounded corners image... and I can't modify the code because I still do not have enough knowledge of B4J to do it. If you can help me, I'll be eternally grateful to you

 

[Serinter]

You can do it with the designer:

Add a pane, set the Drawable to BitmapDrawable and set the corner radius.

Thanks for your answer, Erel.
Although your solution works perfectly, I forgot to mention that I need to create the images, buttons or panels with rounded corners / edges at runtime.
The number of elements can vary from 1 to 40-50 (not sure at this time yet), the size depends on the number of elements and the images of all of them must be different. With your solution I do not know how to adapt it (if possible) to my needs because I am still a newbie with B4J.
Thanks again. I will continue looking for solutions

 

[Cableguy]

I suggest you to add the Panes in runntime, add the image to it (BitmapDrawable) and then set the rounded corners using CSS, but keep this BUG in mind!

 

[Erel]

Here: https://www.b4x.com/android/forum/threads/b4x-xui-rectangle-image-with-rounded-corners.86285/

 

[Serinter]

Here: https://www.b4x.com/android/forum/threads/b4x-xui-rectangle-image-with-rounded-corners.86285/

Thank yoy very much!!!!

I'll give a try after lunch

SOLVED!!!!
Thank you to everybody who has contributed to this thread!!

https://www.b4x.com/android/forum/threads/b4x-xui-rectangle-image-with-rounded-corners.86285/