Android Question Gradients and circles/ovals

wimpie3

Well-Known Member
Licensed User
Longtime 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
Longtime User
Filling a circle with a gradient fill is not the same as a radial gradient...
 
Upvote 0

klaus

Expert
Licensed User
Longtime 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

  • BCOval.zip
    8.9 KB · Views: 233
Upvote 0

wimpie3

Well-Known Member
Licensed User
Longtime 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!
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime 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

SS-2019-05-10_09.50.42.png


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

SS-2019-05-10_09.53.26.png
 
Upvote 0
Top