Android Question Gradients and circles/ovals

Discussion in 'Android Questions' started by wimpie3, May 9, 2019.

  1. wimpie3

    wimpie3 Well-Known Member Licensed User

    Am I correct in saying that drawing circles and ovals with a GRADIENT fill instead of a single color is currently impossible in B4A?
     
  2. derez

    derez Expert Licensed User

  3. wimpie3

    wimpie3 Well-Known Member Licensed User

    Filling a circle with a gradient fill is not the same as a radial gradient...
     
  4. klaus

    klaus Expert Licensed User

    It is possible.
    You can 'draw' circles with a Panel, or other views, with corner radius equal to the half width and GradientDrawable directly in the Designer.
    Or you can draw circles or ovals with BitmapCreator and the XUI libraries.

    upload_2019-5-9_12-45-25.png

    The circle is a Panel defined in the Designer.
    The oval is drawn with BitmapCreator and XUI.

    Attached the small demo program.
     

    Attached Files:

    Erel, inakigarm, amaxco and 2 others like this.
  5. wimpie3

    wimpie3 Well-Known Member Licensed User

    It's a bit counter-intuitive to use bitmapcreator to draw a circle... I mean, it would have been so much more logical to use DrawCircle with the gradient as a parameter... but ok, thanks!
     
  6. Erel

    Erel Administrator Staff Member Licensed User

    BitmapCreator currently doesn't support drawing ovals so Klaus used B4XCanvas for this.

    The "pure" way to draw a circle with gradient fill is to create a BCBrush with the gradient fill and then to use it to draw a circle:
    Code:
    Sub Globals

       
    Private GradientBrush As BCBrush
       
    Private xui As XUI
       
    Private ActivityBC As BitmapCreator
       
    Private ImageView1 As ImageView
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
       
    Activity.LoadLayout("1")
       
    'create the brush (create it once and reuse it when needed)
       Dim bc As BitmapCreator
       bc.Initialize(
    100dip100dip)
       bc.FillGradient(
    Array As Int(xui.Color_Red, xui.Color_Blue), bc.TargetRect, "TL_BR")
       GradientBrush = bc.CreateBrushFromBitmapCreator(bc)
       
    'Create the bc that will be used for the drawings
       ActivityBC.Initialize(100%x100%y)
    End Sub

    Sub Activity_Touch (Action As Int, X As Float, Y As Float)
       GradientBrush.SrcOffsetX = x - 
    50dip 'Need to set the brush offsets to make it start in the top left corner
       GradientBrush.SrcOffsetY = y - 50dip
       ActivityBC.DrawCircle2(X, Y, 
    50dip, GradientBrush, True0)
       ActivityBC.SetBitmapToImageView(ActivityBC.Bitmap, ImageView1) 
    'ImageView1 covers the activity
    End Sub
    [​IMG]

    Note that you can use any drawing you like for the brush:
    Code:
    Sub Activity_Create(FirstTime As Boolean)
       
    Activity.LoadLayout("1")
       ActivityBC.Initialize(
    100%x100%y)
       GradientBrush = ActivityBC.CreateBrushFromBitmap(LoadBitmapResize(
    File.DirAssets, "10039.jpg"100dip100dipTrue))
    End Sub

    Sub Activity_Touch (Action As Int, X As Float, Y As Float)
       GradientBrush.SrcOffsetX = x - 
    50dip 'Need to set the brush offsets to make it start in the top left corner
       GradientBrush.SrcOffsetY = y - 50dip
       ActivityBC.DrawCircle2(X, Y, 
    50dip, GradientBrush, True0)
       ActivityBC.SetBitmapToImageView(ActivityBC.Bitmap, ImageView1) 
    'ImageView1 covers the activity
    End Sub
    [​IMG]
     
    AnandGupta, moster67 and klaus like this.
  7. Erel

    Erel Administrator Staff Member Licensed User

    BTW, if you don't set the bitmap SrcOffset it will look like this:
    [​IMG]
     
  8. klaus

    klaus Expert Licensed User

    Your code is fine for circles, but not for ovals.
    Or am I missing something?
     
  9. Erel

    Erel Administrator Staff Member Licensed User

    No. BitmapCreator doesn't support drawing ovals so you need to use B4XCanvas for this. If you only need to draw circles (or other supported shapes) then you don't need the canvas.
     
Loading...
  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