B4J Question gradient Panel

Volker_Skip

Member
Licensed User
Hi,

I'm new in this Forum and also in programming with B4x.

I found in the B4A Forum this Code an it works fine in B4A, but i found no way to do the same in B4J. Can anyone help me, to find the View with this Propertys to do the same on both Sites?

Thanks in advance

Best Regards

Volker

**********************
pnlTest.Initialize("")
Activity.AddView(pnlTest, 20dip, 20dip, 256dip, 50dip)

Private gdb As GradientDrawable
Private GradColors(3) As Int = Array As Int(Colors.White, Colors. , Colors.Black)
gdb.Initialize("LEFT_RIGHT", GradColors)

pnlTest.Background= gdb
*********************
 

Daestrum

Expert
Licensed User
Longtime User
Small example uses CSSUtils library
B4X:
Sub Process_Globals
 Private fx As JFX
 Private MainForm As Form
 Dim p As Pane
End Sub
Sub AppStart (Form1 As Form, Args() As String)
 MainForm = Form1
 'MainForm.RootPane.LoadLayout("Layout1") 'Load the layout file.
 MainForm.Show
 p.Initialize("p")     ' initialize the pane
 p.SetSize(100.0,50.0) ' set it's size
 ' set gradient from 0,0 to 100,0 from colour #dc143c to colour #32cd32
 ' 0,0 to 100,0  horizontal fill left to right
 ' 0,0 to 100,50 top left to bottom right fill
 ' 0,0 to 0,50   vertical fill top to bottom
 CSSUtils.SetStyleProperty(p,"-fx-background-color","linear-gradient(from 0px 0px to 100px 0px, #dc143c, #32cd32)")
 MainForm.RootPane.AddNode(p,10,10,100,50)
End Sub

Note it will produce a gradient for as many colours as you give it
so
B4X:
CSSUtils.SetStyleProperty(p,"-fx-background-color","linear-gradient(from 0px 0px to 100px 0px, #dc143c, #123456 , #abcdef, #32cd32)")
will produce a gradient going through all four colours
 
Last edited:
Upvote 0

Volker_Skip

Member
Licensed User
Hello,

thanks for the anwers. I need for my special problem 3 - 5 colors. The sample code from the b4a forum can do that. See the attachment, thats what i plan, but the green color should be in the middle of the slider!

@Erel: Thanks for the bitmap tip, maybe that is my solution.
 

Attachments

  • indikator.jpg
    indikator.jpg
    2.3 KB · Views: 245
Upvote 0

Volker_Skip

Member
Licensed User
CSSUtils.SetStyleProperty(p,"-fx-background-color","linear-gradient(from 0px 0px to 100px 0px, #dc143c, #123456 , #abcdef, #32cd32)")

This looks good! Is it posibil to set the spaces for each color? :) OK, hope this ist not to much to ask.
 
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
You could try this form of the css command
B4X:
 CSSUtils.SetStyleProperty(p,"-fx-background-color",$"linear-gradient(from 0% 0% to 100% 0%, red 10%,green 20%, blue 100%)"$)

This will add the gradient for the full width of the node (100%), the colours will be 0% > 10% red, 10% > 20% Green and finally 20% > 100% Blue.
The percentages appear to be where the colour achieves full saturation, so at 10% it will be purely red, at 10% to 20% it will transition from red to green with pure green at 20%.

If you want it the entire width from left to right you can replace from 0% 0% to 100% 0% with to right
 
Last edited:
Upvote 0
Top