Android Question Add Image to button in code

[iCAB]

Hi There,

I am trying to add an image to a button via code and achieve the look as in this post: https://www.b4x.com/android/forum/threads/how-to-add-image-to-button-with-text.117775/
1. keep Round corners
2. Keep the elevation
3. Set background color (if Possible only)

I have seen the replies in the post but I do believe that they create a flat-looking button.

Any help is greatly appreciated!

iCAB

 

[Mahares]

You can achieve your goals by using CSBuilder and SwiftButton. For swiftButton you need XUI Views library. You do all in the Designer or by code.

Dim cs As CSBuilder
    cs.Initialize
    cs.Image(LoadBitmap(File.DirAssets, "hannibal.jpg"), 60dip, 60dip, False).Append(CRLF).VerticalAlign(8dip).Append("Leader")
    cs.PopAll
    SwiftButton1.xLBL.Text= cs
    SwiftButton1.CornersRadius =40dip
    SwiftButton1.SideHeight =10dip
    SwiftButton1.SetColors(xui.Color_Red, xui.Color_Black)

 

[TILogistic]

other simple:

    Dim cs As CSBuilder
    cs.Initialize
    cs.Size(60)
    cs.Alignment("ALIGN_CENTER")
    cs.Color(Colors.Blue)
    cs.TypeFace(Typeface.FONTAWESOME)
    cs.Append(Chr(0xF028))
    cs.Append(CRLF)
    cs.TypeFace(Typeface.DEFAULT)
    cs.Size(14)
    cs.Color(Colors.Red)
    cs.Bold
    cs.VerticalAlign(4dip)
    cs.Append("Button with CSBuilder")
    cs.PopAll

    Button1.As(B4XView).SetColorAndBorder(xui.Color_LightGray, 1dip, xui.Color_DarkGray, 9dip)
    SetShadow(Button1.As(B4XView), 4, xui.Color_DarkGray)
    Button1.Text = cs


    Dim cs As CSBuilder
    cs.Initialize
    cs.Size(60)
    cs.Alignment("ALIGN_CENTER")
    cs.Color(Colors.Blue)
    cs.TypeFace(Typeface.FONTAWESOME)
    cs.Append(Chr(0xF028))
    cs.Append(CRLF)
    cs.TypeFace(Typeface.DEFAULT)
    cs.Size(14)
    cs.Color(Colors.Red)
    cs.Bold
    cs.VerticalAlign(4dip)
    cs.Append("Label with CSBuilder")
    cs.PopAll

    Label1.As(B4XView).SetColorAndBorder(xui.Color_LightGray, 1dip, xui.Color_DarkGray, 9dip)
    SetShadow(Label1.As(B4XView), 4, xui.Color_DarkGray)

    Label1.Text = cs

Public Sub SetShadow (View As B4XView, Offset As Double, Color As Int)
    #if B4J
    Dim DropShadow As JavaObject
    'You might prefer to ignore panels as the shadow is different.
    'If View Is Pane Then Return
    DropShadow.InitializeNewInstance(IIf(View Is Pane, "javafx.scene.effect.InnerShadow", "javafx.scene.effect.DropShadow"), Null)
    DropShadow.RunMethod("setOffsetX", Array(Offset))
    DropShadow.RunMethod("setOffsetY", Array(Offset))
    DropShadow.RunMethod("setRadius", Array(Offset))
    Dim fx As JFX
    DropShadow.RunMethod("setColor", Array(fx.Colors.From32Bit(Color)))
    View.As(JavaObject).RunMethod("setEffect", Array(DropShadow))
    #Else If B4A
    Offset = Offset * 2
    View.As(JavaObject).RunMethod("setElevation", Array(Offset.As(Float)))
    #Else If B4i
    View.As(View).SetShadow(Color, Offset, Offset, 0.5, False)
    #End If
End Sub

Color Background and border.

 

[TILogistic]

other:

    Dim cs As CSBuilder
    cs.Initialize
    cs.Size(60)
    cs.Alignment("ALIGN_CENTER")
    cs.Color(Colors.Blue)
    cs.TypeFace(Typeface.FONTAWESOME)
    cs.Append(Chr(0xF028))
    cs.Append(CRLF)
    cs.TypeFace(Typeface.DEFAULT)
    cs.Size(14)
    cs.Color(Colors.Red)
    cs.Bold
    cs.VerticalAlign(4dip)
    cs.Append("Button with CSBuilder")
    cs.PopAll

    Button1.Text = cs
  
    Dim Gradient1 As GradientDrawable
    Dim Clrs(2) As Int
    Clrs(0) =  xui.Color_DarkGray
    Clrs(1) = xui.Color_White
    Gradient1.Initialize("TR_BL", Clrs)
    Button1.Background = Gradient1
    setCornerRadii(Button1,4%x,4%x,4%x,4%x,4%x,4%x,4%x,4%x)

Public Sub setCornerRadii(v As View, Rx_TopLeft As Float, Ry_TopLeft As Float, Rx_TopRight As Float, Ry_TopRight As Float, Rx_BottomRight As Float, Ry_BottomRight As Float, Rx_BottomLeft As Float, Ry_BottomLeft As Float)
    Dim jo As JavaObject = v.Background
    If v.Background Is ColorDrawable Or v.Background Is GradientDrawable Then
        jo.RunMethod("setCornerRadii", Array As Object(Array As Float(Rx_TopLeft, Ry_TopLeft, Rx_TopRight, Ry_TopRight, Rx_BottomRight, Ry_BottomRight, Rx_BottomLeft, Ry_BottomLeft)))
    End If
End Sub

 

[iCAB]

Thanks Guys for your help. Greatly appreciated!
I will give both suggestions a try.

 

[iCAB]

Hi @oparra

I am trying your approach first.

Assuming that I am using BitmapDrawable to set the button background, would your approach still work? if so, can you please provide an example?

Thanks
iCAB

 

[TILogistic]

see:
BitmapDrawable button 4

    Dim icon As B4XBitmap = xui.LoadBitmap(File.DirAssets, "icon.png")
    Dim IamgeBackGround As B4XBitmap = xui.LoadBitmap(File.DirAssets, "background.png")
   
    Dim cs As CSBuilder
    cs.Initialize
    cs.Image(icon, 50dip, 50dip, False)
    cs.Append(CRLF)
    cs.TypeFace(Typeface.DEFAULT)
    cs.Size(14)
    cs.Color(xui.Color_Black)
    cs.Bold
    cs.VerticalAlign(4dip)
    cs.Append("Made CSBuilder")
    cs.PopAll
   
    Button4.Text = cs
    Button4.As(B4XView).SetBitmap(IamgeBackGround)

NOTE:
For button 4 edges, the solution would be to place the button inside a panel.

[B4X] Round clipping panel

Purpose is to create a panel that clips its child views to a circle or rounded rect. 1. Set the round corners with the visual designer. 2. Use this code: Public Sub SetCircleClip (pnl As B4XView) #if B4J Dim circle As JavaObject Dim radius As Double = Max(pnl.Width / 2, pnl.Height / 2)...

www.b4x.com

 

[iCAB]

Thanks @oparra but this is what I was trying to avoid.

 

[TILogistic]

You want this?

 

[iCAB]

You want this?
View attachment 123402

Yes please, something similar to the last button on the left.

And thanks again for all your help.