B4J Question Customizing the design of buttons and other elements ...

[red30]

In B4A, it is possible to set different styles for the button: when the button is Enabled, Disabled, Pressed as in the screenshot below. Moreover, you can set both the fill with just color and the picture.

In B4J there is no such possibility, you can set only the color in the normal state. With the help of the CSS file, I can install everything that I need as in B4A. But I am very new to CSS.

.button {
    -fx-background-color: #095db1;
}
.button:hover {
    -fx-background-color: #265685;
}
.button:pressed {
    -fx-background-color: #033c73;
}
.button:disabled {
    -fx-background-color: #959595;
}

How can I use different CSS or using B4J to set different pictures for all button states?

 

[red30]

Is it possible to use СSS to substitute a different picture?

 

[Erel]

CSS example: https://www.b4x.com/android/forum/threads/css-example.35854/

You can change the image with the designer by setting the drawable property to BitmapDrawable.
Or with: https://www.b4x.com/android/forum/threads/button-with-image.53662/post-336326

 

[red30]

CSS example: https://www.b4x.com/android/forum/threads/css-example.35854/

You can change the image with the designer by setting the drawable property to BitmapDrawable.
Or with: https://www.b4x.com/android/forum/threads/button-with-image.53662/post-336326

I looked at these examples. But this is not what I need. I need to substitute different images depending on the state of the button: hover, pressed, disabled. Is there any way to do this?

 

[Erel]

Making it with CSS will be tricky especially if there is more than one button.

Example based on SwiftButton:

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private SwiftButton1 As SwiftButton
    Type ButtonData (iv As B4XView, DownBitmap As B4XBitmap, UpBitmap As B4XBitmap)
    Private xui As XUI
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.RootPane.LoadLayout("1") 'Load the layout file.
    MainForm.Show
    CreateButtonData(SwiftButton1, xui.LoadBitmapResize(File.DirAssets, "1.jpg", 60dip, 60dip, True), _
        xui.LoadBitmapResize(File.DirAssets, "100802.jpg", 60dip, 60dip, True), 60dip, 60dip)
End Sub

Sub SwiftButton1_ButtonUp
    Dim b As SwiftButton = Sender
    StateUpdated(b, False)
End Sub

Sub SwiftButton1_ButtonDown
    Dim b As SwiftButton = Sender
    StateUpdated(b, True)
End Sub

Sub SwiftButton1_Click
    Log("click")
End Sub

Sub StateUpdated (Button As SwiftButton, Down As Boolean)
    Dim bd As ButtonData = Button.Tag
    If Down Then
        bd.iv.SetBitmap(bd.DownBitmap)
    Else
        bd.iv.SetBitmap(bd.UpBitmap)
    End If
End Sub

Public Sub CreateButtonData (Button As SwiftButton, DownBitmap As B4XBitmap, UpBitmap As B4XBitmap, ImageWidth As Int, ImageHeight As Int)
    Dim t1 As ButtonData
    t1.Initialize
    t1.DownBitmap = DownBitmap
    t1.UpBitmap = UpBitmap
    Dim iv As ImageView
    iv.Initialize("")
    #if B4J
    Dim jo As JavaObject = iv
    jo.RunMethod("setMouseTransparent", Array(True))
    #End If
    t1.iv = iv
    SwiftButton1.mBase.AddView(iv, SwiftButton1.mBase.Width / 2 - ImageWidth / 2, SwiftButton1.mBase.Height / 2 - ImageHeight / 2, ImageWidth, ImageHeight)
    t1.iv.SetBitmap(UpBitmap)
    Button.Tag = t1
End Sub