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.



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: 240
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



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

 
Upvote 0
Cookies are required to use this site. You must accept them to continue using the site. Learn more…