B4A Library FabricView - make your own drawings / writing with your finger

It wraps this Github project (requested by @MarcoRome). Posting the following:
1. B4A project
2. B4A library files - copy them to your additional library folder.

Once you have made your drawing you can click on "Copy" to copy it to an Imageview (from where you can do with it whatever you want) or click "Clear" to clear the drawing area and start drawing from scratch.

@MarcoRome, see what else you think should be added and if the project that I am wrapping will allow to add such features I will try and make them available to be used in B4A.

Sample Code:
#Region  Project Attributes
    #ApplicationLabel: FabricView
    #VersionCode: 1
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private fv1 As FabricView
    Private Button1 As Button
    Private ImageView1 As ImageView
    Private Button2 As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'fv1.BackgroundMode = fv1.BACKGROUND_STYLE_NOTEBOOK_PAPER
    'fv1.BackgroundMode = fv1.BACKGROUND_STYLE_BLANK
    fv1.BackgroundMode = fv1.BACKGROUND_STYLE_GRAPH_PAPER
    fv1.DrawColor = Colors.Red
    fv1.DrawBackgroundColor = Colors.LightGray
    fv1.NoteBookLeftLineColor = Colors.Blue
    fv1.NoteBookLeftLinePadding = 60
    fv1.FabricLineColor = Colors.Yellow
    ImageView1.Bitmap = Null

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub Button1_Click
    ImageView1.Bitmap = fv1.CanvasBitmap
End Sub

Sub Button2_Click
    ImageView1.Bitmap = Null
End Sub


Github: Antwan Gaggi, Wrapped by: Johan Schoeman
Version: 1
  • FabricView
    • ba As BA
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • cleanPage
      Clean the canvas, remove everything drawn on the canvas.
    • Background As Drawable
    • BackgroundMode As Int [write only]
    • CanvasBitmap As Object [read only]
    • Color As Int [write only]
    • DrawBackgroundColor As Int [write only]
    • DrawColor As Int [write only]
    • Enabled As Boolean
    • FabricLineColor As Int [write only]
    • Height As Int
    • InteractionMode As Int [write only]
    • Left As Int
    • NoteBookLeftLineColor As Int [write only]
    • NoteBookLeftLinePadding As Int [write only]
    • Parent As Object [read only]
    • Size As Float [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int


  • FabricViewLibFiles.zip
    9.9 KB · Views: 516
  • b4aFabricView.zip
    8.4 KB · Views: 499

Johan Schoeman

Licensed User
Longtime User


Well-Known Member
Licensed User
Longtime User
Hello, SetBackgroundImage doesn't work for me. I try make application as colouring book . Is there another way for do it ?

Johan Schoeman

Licensed User
Longtime User

Robert Valentino

Well-Known Member
Licensed User
Longtime User
Could it be possible to define these variables next time someone does some changes to this library

// Interactive Modes
public static final int DRAW_MODE = 0;
public static final int SELECT_MODE = 1; // TODO Support Object Selection.
public static final int ROTATE_MODE = 2; // TODO Support Object ROtation.
public static final int LOCKED_MODE = 3;

Sometimes you don't want the user to be able to draw and interactive mode be change