Android Question Gradients and circles/ovals

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?
 

wimpie3

Well-Known Member
Licensed User
Filling a circle with a gradient fill is not the same as a radial gradient...
 

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.
 

Attachments

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!
 

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:
B4X:
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(100dip, 100dip)
   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%x, 100%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, True, 0)
   ActivityBC.SetBitmapToImageView(ActivityBC.Bitmap, ImageView1) 'ImageView1 covers the activity
End Sub


Note that you can use any drawing you like for the brush:
B4X:
Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("1")
   ActivityBC.Initialize(100%x, 100%y)
   GradientBrush = ActivityBC.CreateBrushFromBitmap(LoadBitmapResize(File.DirAssets, "10039.jpg", 100dip, 100dip, True))
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, True, 0)
   ActivityBC.SetBitmapToImageView(ActivityBC.Bitmap, ImageView1) 'ImageView1 covers the activity
End Sub
 

Erel

Administrator
Staff member
Licensed User
BTW, if you don't set the bitmap SrcOffset it will look like this:
 

Erel

Administrator
Staff member
Licensed User
Or am I missing something?
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.
 
Top