B4J Question Button with icon + text

[aeric]

How do I create a button with Font Awesome + Custom Font?

I can use Font Awesome to show the text but sometimes it doesn't work as I wish (text show with mixture of bold and unbold).

 

[Xfood]

I normally use a panel, and 2 labels, 1 for the icon, and one for the text, so I can customize it as I want

 

[peacemaker]

I normally use a panel, and 2 labels, 1 for the icon, and one for the text, so I can customize it as I want

Maybe ready code example ?

 

[Xfood]

Maybe ready code example ?

ok, if it can serve the place tonight as soon as I get back

 

[Xfood]

I found 2 minutes to get an idea of how I use buttons with simple panels
I attach small example

 

[peacemaker]

Thanks. It needs to make a class of one such set of views.

 

[TILogistic]

? Textflow

[class] TextFlow - Similar to B4A / B4i RichString

This class uses JavaObject to create a TextFlow node. With a TextFlow you can display rich text with different colors, fonts and other attributes. Usage: - Add the TextFlow class module to your project (Tools - Add Existing Module). - Create a TextFlow object. - Call AddText to add a text...

www.b4x.com

Adapt this class to simulate CSBuilder

    Dim cs As TextFlow
    cs.Initialize.Append(Chr(0xF015)).Color(0xFF01FF20).Font(xui.CreateFontAwesome(60))
    cs.Append(Chr(160) & "HOME").Size(38)
    Pane2.AddView(cs.PopAll, 10, 10, 200, 100)

    Dim cs As TextFlow
    cs.Initialize.Append("1 2 3").Color(xui.Color_Red).Underline(True)
    cs.Append(" 4 5 6 ").Color(xui.Color_Green).Font(xui.CreateDefaultBoldFont(17))
    cs.Append("7 8 9").Color(xui.Color_Blue).Strikethrough(True).Font(xui.CreateDefaultFont(20))
    cs.Append(CRLF)
    cs.Append(Chr(0xF015)).Color(0xFF01FF20).Font(xui.CreateFontAwesome(60))
    cs.Append(Chr(160) & "HOME").Size(38)
    Pane2.AddView(cs.PopAll, 10, 10, 200, 100)

 

[TILogistic]

?

    Dim cs As TextFlow
    cs.Initialize.Append("1 2 3").Color(xui.Color_Red).Underline(True)
    cs.Append(" 4 5 6 ").Color(xui.Color_Green).Font(xui.CreateDefaultBoldFont(17))
    cs.Append("7 8 9").Color(xui.Color_Blue).Strikethrough(True).Font(xui.CreateDefaultFont(20))
    cs.Append(CRLF)
    cs.Append(Chr(0xF015)).Color(0xFF01FF20).Font(xui.CreateFontAwesome(60))
    cs.Append(Chr(160) & "HOME").Size(38)
    Pane2.AddView(cs.PopAll, 10, 10, 200, 100)
    
    cs.Initialize.Append(Chr(0xF209)).Color(xui.Color_White).Font(xui.CreateFontAwesome(28)).Color(xui.Color_White)
    cs.Append(Chr(160) & Chr(160) & "Bottone uno").Size(20).Color(xui.Color_White)
    Pane3.AddView(cs.PopAll, 15, 12, 200, 10)

 

[TILogistic]

more info:

TextFlow (JavaFX 8)

 

[aeric]

Thanks but I am not looking for Pane. I want to have the native button where you can press Tab to go to next button focused and have mouse cursor icon.

 

[moore_it]

Public Sub SetNodeImage(n As Node, ImageDir As String, ImageFileName As String, Width As Int, Height As Int, ContentDisplay As String)
    'Check that path and filename are valid:
    If ImageDir = "" Or ImageFileName = "" Then Return
    'Set the button image:
    Dim iv As ImageView
    Dim nJo As JavaObject = n
    iv = nJo.RunMethod("getGraphic", Null)
    If iv.IsInitialized Then
        iv.SetImage(fx.LoadImageSample(ImageDir, ImageFileName, iv.Width, iv.Height))
    Else
        iv.Initialize("")
        If Width > -1 Then
            iv.Width = Width
        End If
        If Height > -1 Then
            iv.Height = Height
        End If
        iv.SetImage(fx.LoadImageSample(ImageDir, ImageFileName, iv.Width, iv.Height))
        nJo.RunMethod("setGraphic", Array(iv))
        Dim cd As JavaObject
        cd.InitializeStatic("javafx.scene.control.ContentDisplay")
        nJo.RunMethod("setContentDisplay", Array(cd.RunMethod("valueOf", Array(ContentDisplay))))
    End If
End Sub

I use this ... for example

SetNodeImage(bt,File.DirAssets,icon,16,16,"LEFT")

where bt is button and icon a file name of icon (icon.png)

 

[peacemaker]

I use this ... for example

This is exactly those native solution that i was looking for !

 

[Magma]

Public Sub SetNodeImage(n As Node, ImageDir As String, ImageFileName As String, Width As Int, Height As Int, ContentDisplay As String)
    'Check that path and filename are valid:
    If ImageDir = "" Or ImageFileName = "" Then Return
    'Set the button image:
    Dim iv As ImageView
    Dim nJo As JavaObject = n
    iv = nJo.RunMethod("getGraphic", Null)
    If iv.IsInitialized Then
        iv.SetImage(fx.LoadImageSample(ImageDir, ImageFileName, iv.Width, iv.Height))
    Else
        iv.Initialize("")
        If Width > -1 Then
            iv.Width = Width
        End If
        If Height > -1 Then
            iv.Height = Height
        End If
        iv.SetImage(fx.LoadImageSample(ImageDir, ImageFileName, iv.Width, iv.Height))
        nJo.RunMethod("setGraphic", Array(iv))
        Dim cd As JavaObject
        cd.InitializeStatic("javafx.scene.control.ContentDisplay")
        nJo.RunMethod("setContentDisplay", Array(cd.RunMethod("valueOf", Array(ContentDisplay))))
    End If
End Sub

I use this ... for example

SetNodeImage(bt,File.DirAssets,icon,16,16,"LEFT")

where bt is button and icon a file name of icon (icon.png)

Is that possible with B4A... and how ?

 

[peacemaker]

with B4A

In B4A - CSBuilder can make all.

 

[Magma]

In B4A - CSBuilder can make all.

Yes i know csbuilder.. i was wondering for this "option"

 

[peacemaker]

this "option"

This is option, i guess, of JavaFX only.

 

[TILogistic]

Better XUI.

    'https://www.b4x.com/android/forum/threads/fontawesome-to-bitmap.95155/#post-603250
    Dim bmp As B4XBitmap = SetFontToBitmap(Chr(0xF085), xui.CreateFontAwesome(32), xui.Color_Blue)
    Button1.Text = "TYPE Button with FontAwesome"
    SetImageToView(Button1, bmp, "LEFT")

    Dim bmp As B4XBitmap = SetFontToBitmap(Chr(0xE438), xui.CreateMaterialIcons(32), xui.Color_Red)
    Label5.Text = "Type Label with MaterialIcons"
    SetImageToView(Label5, bmp, "LEFT")
  
    Dim bmp As B4XBitmap = xui.LoadBitmapResize(File.DirAssets, "icon.png", 32, 32, True)
    Button2.Text = "Type Button with Image"
    SetImageToView(Button2, bmp, "LEFT")
  
    Dim bmp As B4XBitmap = xui.LoadBitmapResize(File.DirAssets, "icon.png", 32, 32, True)
    Label6.Text = "Type Label with Image"
    SetImageToView(Label6, bmp, "LEFT")

Public Sub SetImageToView(view As B4XView, Image As B4XBitmap, Position As String)
    Dim iv As ImageView
    iv.Initialize("")
    iv.SetImage(Image)
    Dim jo As JavaObject
    jo.InitializeStatic("javafx.scene.control.ContentDisplay")
    view.As(JavaObject).RunMethod("setGraphic", Array(iv))
    view.As(JavaObject).RunMethod("setContentDisplay", Array(jo.RunMethod("valueOf", Array(Position))))
End Sub

Ref:

JavaFX Image Button Tutorial – Genuine Coder

genuinecoder.com

 

[TILogistic]

?

    Dim bmp As B4XBitmap = SetFontToBitmap(Chr(0xE438), xui.CreateMaterialIcons(52), xui.Color_Red)
    Button3.Text = "Button MaterialIcons"
    Button3.TextSize = 14
    Button3.TextColor = xui.Color_Blue
    SetImageToView(Button3, bmp, "TOP")

 

[aeric]

Will try that when I free. Thanks Oppara.

 

[TILogistic]

now a little animation.