Android Question Gradients and circles/ovals

[wimpie3]

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

 

[derez]

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

Wrong ! https://www.b4x.com/android/forum/threads/b4x-bitmapcreator-draw-radial-gradients.92853/

 

[wimpie3]

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

 

[klaus]

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.

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

Attached the small demo program.

 

[wimpie3]

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]

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:

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:

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]

BTW, if you don't set the bitmap SrcOffset it will look like this:

 

[klaus]

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

 

[Erel]

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.