Edit: please see the updated tutorial: https://www.b4x.com/android/forum/threads/62488/#content
Starting from v2.70, the visual designer supports custom views.
Note that the WYSIWYG designer (which runs on a real device / emulator) shows a place-holder instead of the custom view.
Adding the custom views with the designer is simpler and allows the developer to build and maintain the complete UI with the visual designer and designer script.
Custom views with designer support can be implemented as a class or inside a library.
Using custom views
1. Add the class or library to your project.
2. In the designer add a CustomView:
3. Set the custom type property:
4. You can now set the view properties and also treat it like any other view in the designer script.
5. Add the required declarations and events:
Note that the view's runtime appearance depends on the implementation. It might ignore some of the properties.
Implementing a custom view with designer support
There are two ways to implement a custom view. It can be implemented as a class (which can also be compiled to a library) or it can be implemented in Java. A tutorial about Java implementation will be available in the "libraries developers forum".
The following two subs are required in order to be supported by the designer:
When a layout file is loaded the Initialize method will be called followed by a call to DesignerCreateView.
Initialize sub parameters:
TargetModule - references the module that loads the layout file.
EventName - the events name property.
These two parameters allow you to later raise events like all standard views.
DesignerCreateView parameters:
Base - a panel that will be the parent for your custom view. The panel background and layout will be based on the values from the designer. Note that you are free to do whatever you need with this panel.
Lbl - the purpose of the label is to hold all the text related properties. The label will not appear (unless you explicitly add it).
Props - a Map with additional entries. Currently the only entry is an "activity" key that holds a reference to the parent Activity object.
The following example creates a button that supports double click and single click events. Note that this example is a bit simplistic.
Starting from v2.70, the visual designer supports custom views.
Note that the WYSIWYG designer (which runs on a real device / emulator) shows a place-holder instead of the custom view.
Adding the custom views with the designer is simpler and allows the developer to build and maintain the complete UI with the visual designer and designer script.
Custom views with designer support can be implemented as a class or inside a library.
Using custom views
1. Add the class or library to your project.
2. In the designer add a CustomView:
3. Set the custom type property:
4. You can now set the view properties and also treat it like any other view in the designer script.
5. Add the required declarations and events:
Note that the view's runtime appearance depends on the implementation. It might ignore some of the properties.
Implementing a custom view with designer support
There are two ways to implement a custom view. It can be implemented as a class (which can also be compiled to a library) or it can be implemented in Java. A tutorial about Java implementation will be available in the "libraries developers forum".
The following two subs are required in order to be supported by the designer:
B4X:
Sub Initialize (TargetModule As Object, EventName As String)
Sub DesignerCreateView(Base As Panel, Lbl As Label, Props As Map)Initialize sub parameters:
TargetModule - references the module that loads the layout file.
EventName - the events name property.
These two parameters allow you to later raise events like all standard views.
DesignerCreateView parameters:
Base - a panel that will be the parent for your custom view. The panel background and layout will be based on the values from the designer. Note that you are free to do whatever you need with this panel.
Lbl - the purpose of the label is to hold all the text related properties. The label will not appear (unless you explicitly add it).
Props - a Map with additional entries. Currently the only entry is an "activity" key that holds a reference to the parent Activity object.
The following example creates a button that supports double click and single click events. Note that this example is a bit simplistic.
B4X:
'Events declaration
#Event: DoubleClick
#Event: SingleClick
'Class module
Sub Class_Globals
Private mTarget As Object
Private mEventName As String
Private btn As Button
Private topPanel As Panel
Private downTime As Long
Private timer1 As Timer
End Sub
Public Sub Initialize (TargetModule As Object, EventName As String)
mTarget = TargetModule
mEventName = EventName
timer1.Initialize("timer1", 300)
End Sub
Public Sub DesignerCreateView(Base As Panel, Lbl As Label, Props As Map)
btn.Initialize("")
'create a button and add it to the Base panel.
Base.AddView(btn, 0, 0, Base.Width, Base.Height)
btn.TextSize = Lbl.TextSize
btn.TextColor = Lbl.TextColor
btn.Gravity = Lbl.Gravity
btn.Text = Lbl.Text
btn.Typeface = Lbl.Typeface
topPanel.Initialize("topPanel")
'Add a transparent panel over the button.
'the panel will handle the touch event.
Base.AddView(topPanel, 0, 0, Base.Width, Base.Height)
End Sub
Private Sub topPanel_Touch (Action As Int, X As Float, Y As Float)
If Action = topPanel.ACTION_DOWN Then
If downTime + timer1.Interval > DateTime.Now Then
timer1.Enabled = False
'raise the DoubleClick event
CallSub(mTarget, mEventName & "_" & "DoubleClick")
Else
downTime = DateTime.Now
timer1.Enabled = True
End If
End If
End Sub
Private Sub Timer1_Tick
timer1.Enabled = False
'raise the event
CallSub(mTarget, mEventName & "_" & "SingleClick")
End Sub
Last edited:
