B4J Question gradient Panel

Discussion in 'B4J Questions' started by Volker_Skip, Apr 24, 2019.

  1. Volker_Skip

    Volker_Skip Member Licensed User


    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


    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
  2. Daestrum

    Daestrum Well-Known Member Licensed User

    Small example uses CSSUtils library
    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.
    "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)")
    End Sub
    Note it will produce a gradient for as many colours as you give it
    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: Apr 24, 2019
  3. Erel

    Erel Administrator Staff Member Licensed User

    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.
  4. Volker_Skip

    Volker_Skip Member Licensed User


    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.

    Attached Files:

  5. Volker_Skip

    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.
  6. Daestrum

    Daestrum Well-Known Member Licensed User

    You could try this form of the css command
    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: Apr 26, 2019
  7. Volker_Skip

    Volker_Skip Member Licensed User

    Thanks, it works fine…!
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice