B4J Question gradient Panel

Volker_Skip · Apr 24, 2019

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 · Apr 24, 2019

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

Erel · Apr 25, 2019

Note that you can set a two colors gradient with the designer.

Another cross platform way to create gradient bitmaps is with BitmapCreator. You can then assign the bitmap to an ImageView.

Volker_Skip · Apr 25, 2019

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.

Volker_Skip · Apr 25, 2019

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.

Daestrum · Apr 26, 2019

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

Volker_Skip · Apr 26, 2019

Thanks, it works fine…!

B4J Question gradient Panel

Volker_Skip

Member

Daestrum

Expert

Erel

B4X founder

Volker_Skip

Member

Attachments

Volker_Skip

Member

Daestrum

Expert

Volker_Skip

Member

Similar Threads

B4J Question gradient Panel

Volker_Skip

Member

Daestrum

Expert

Erel

B4X founder

Volker_Skip

Member

Attachments

Volker_Skip

Member

Daestrum

Expert

Volker_Skip

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency