B4X Booklets
B4X XUI
B4X User Interface
Copyright: © 2022 Anywhere Software Edition 2.4
Last update: 2022.08.15
Table of contents 2 B4X XUI
1 B4X platforms .............................................................................................................................. 5
2 General ......................................................................................................................................... 6
3 XUI Objects ................................................................................................................................. 7
3.1 B4XView ............................................................................................................................. 8
3.2 B4XBitmap ........................................................................................................................ 13
3.2.1 Examples ........................................................................................................................ 14
3.2.1.1 Define a B4XBitmap .............................................................................................. 14
3.2.1.2 Initialize the Bimap (B4A, B4i) or Image (B4J) .................................................... 14
3.2.1.3 Draw the bitmap ..................................................................................................... 14
3.2.1.4 Save a bitmap ......................................................................................................... 14
3.3 B4XCanvas ........................................................................................................................ 15
3.3.1 Examples ........................................................................................................................ 17
3.3.1.1 Declare a target B4XView ..................................................................................... 17
3.3.1.2 Initialize a B4XCanvas .......................................................................................... 17
3.3.1.2.1 B4A .................................................................................................................. 17
3.3.1.2.2 B4i .................................................................................................................... 17
3.3.1.2.3 B4J .................................................................................................................... 17
3.3.1.3 Draw a line ............................................................................................................. 17
3.3.1.4 Draw a rectangle .................................................................................................... 17
3.3.1.5 Draw a circle .......................................................................................................... 18
3.3.1.6 Draw a text ............................................................................................................. 18
3.3.1.7 ClipPath .................................................................................................................. 18
3.3.1.8 DrawPath ................................................................................................................ 19
3.3.1.9 DrawPolygon ......................................................................................................... 20
3.4 B4XFont ............................................................................................................................. 21
3.4.1 Examples ........................................................................................................................ 21
3.4.1.1 Example with a ‘standard’ font .............................................................................. 21
3.4.1.2 Example with FontAwesome ................................................................................. 21
3.4.1.3 Example with MaterialIcons .................................................................................. 22
3.4.1.4 Example for a CustomView recovering the Label font ......................................... 22
3.4.1.5 Example with a custom font ................................................................................... 22
3.5 B4XPath ............................................................................................................................. 23
3.5.1 Examples ........................................................................................................................ 24
3.5.1.1 ClipPath .................................................................................................................. 24
3.5.1.2 DrawPath ................................................................................................................ 24
3.6 B4XRect ............................................................................................................................. 25
3.6.1 Examples ........................................................................................................................ 25
3.6.1.1 Declare a rectangle ................................................................................................. 25
3.6.1.2 Initialize rectangle and draw it ............................................................................... 25
3.6.1.3 Set a rectangle to transparent ClearRect .............................................................. 25
3.7 As keyword ........................................................................................................................ 26
4 Compatibilities B4A B4i B4J XUI ........................................................................................ 27
5 XUI Process objects ................................................................................................................... 28
6 First example .............................................................................................................................. 32
6.1 The code ............................................................................................................................. 33
6.1.1 B4A ................................................................................................................................ 33
6.1.2 B4i .................................................................................................................................. 34
6.1.3 B4J ................................................................................................................................. 35
6.1.4 Common code ................................................................................................................ 36
7 Graphics first steps ..................................................................................................................... 37
7.1.1 Initialization B4XMainPage module ............................................................................ 39
7.1.2 Initialization GraphicsFirstSteps module ...................................................................... 39
7.1.3 Draw a line ..................................................................................................................... 40
Table of contents 3 B4X XUI
7.1.4 Draw a rectangle ............................................................................................................ 40
7.1.5 Draw a circle .................................................................................................................. 41
7.1.6 Draw a text ..................................................................................................................... 42
8 Simple drawing methods ............................................................................................................ 43
9 Other examples in the B4X CustomViews booklet ................................................................... 48
10 Other examples from the forum ................................................................................................. 49
11 Libraries ..................................................................................................................................... 50
11.1 B4X libraries *.b4xlib ....................................................................................................... 51
11.1.1 Xml help files for B4X Libraries ............................................................................... 52
12 Code snippets ............................................................................................................................. 53
12.1 Set background Alpha / MakeViewBackgroundTransparent ........................................... 53
Table of contents 4 B4X XUI
Main contributors: Klaus Christl (klaus), Erel Uziel (Erel)
To search for a given word or sentence use the Search function in the Edit menu.
All the source code and files needed (layouts, images etc.) of the example projects in this booklet
are included in the SourceCode folder.
Updated for:
B4A version 11.80
B4i version 8.00
B4J version 9.10
B4X Booklets:
B4X Getting Started
B4X Language
B4X IDE Integrated Development Environment
B4X Visual Designer
B4X Help tools
B4XPages Cross-platform projects
B4X CustomViews
B4X Graphics
B4X XUI B4X User Interface
B4X SQLite Database
B4X JavaObject NativeObject
B4R Example Projects
You can consult these booklets online in this link [B4X] Documentation Booklets.
Be aware that external links don’t work in the online display.
1 B4X 5 B4X XUI
1 B4X platforms
B4X is a suite of programming languages for different platforms.
B4X suite supports more platforms than any other tool
ANDROID | IOS | WINDOWS | MAC | LINUX | ARDUINO | RASPBERRY PI | ESP8266 | AND
MORE...
B4A Android
B4A is a 100% free development tool for Android applications, it includes all the features
needed to quickly develop any type of Android app.
B4i iOS
B4i is a development tool for native iOS applications.
B4i follows the same concepts as B4A, allowing you to reuse most of the code and build
apps for both Android and iOS.
B4J Java / Windows / Mac / Linux / Raspberry PI
B4J is a 100% free development tool for desktop, server and IoT solutions.
With B4J you can easily create desktop applications (UI), console programs (non-UI) and
server solutions.
The compiled apps can run on Windows, Mac, Linux and ARM boards (such as Raspberry
Pi).
B4R Arduino / ESP8266
B4R is a 100% free development tool for native Arduino and ESP8266 programs.
B4R follows the same concepts of the other B4X tools, providing a simple and powerful
development tool.
B4R, B4A, B4J and B4i together make the best development solution for the Internet of
Things (IoT).
B4XPages
B4XPages is an internal library for B4A, B4i and B4J allowing to develop easily cross-
platform programs.
B4XPages is explained in detail in the B4XPages Cross-platform projects booklet.
Even, if you want to develop only in one platform it is interesting to use the B4XPages
library it makes the program flow simpler especially for B4A.
2 XUI 6 B4X XUI
2 General
XUI (B4X User Interface) are Cross platform & native UI libraries.
The purpose of XUI library is to make it easier to share code between B4A, B4J and B4i projects.
It is an important new library and Erel expects that all B4X developers who target more than a
single platform will use it at some point.
Two main concepts:
- The XUI libraries API (application programming interface) is the same between all three libraries.
- It is very simple to switch between the XUI objects and the native objects when needed.
The second point is important. XUI types provide a different "view" or a different wrapper above
the same native objects. They do not replace the native types.
There are some new features provided in the libraries which you can use even if you target a single
platform.
3 XUI Objects 7 B4X XUI
3 XUI Objects
The XUI objects below are supported.
B4XView
Any view or node can be assigned to a B4XView object.
The B4XView type includes all the common methods, including methods that are not
available in all types.
B4XBitmap
Wrapper for Bitmap (B4A, B4i) and Image (B4J).
Adds all the features available in B4A and B4i Bitmap type to B4J
(Resize, Crop, Rotate and saving as Jpeg).
B4XCanvas
Cross platform canvas.
B4X Font
Wrapper for the TypeFace object (B4A) and the Font object (B4i, B4J). Used for graphics.
B4XPath
Wraps:
B4A android.graphics.Path,
B4i UIBezierPath,
B4J com.sun.javafx.geom.Path2D.
B4XRect
Wraps B4ARect, B4iRect and B4JRect. Used for graphics.
XUI
The XUI object includes various methods and utilities.
3.1 XUI Objects B4XView 8 B4X XUI
3.1 B4XView
Any view or node can be assigned to a B4XView object.
The B4XView type includes all the common methods, including methods that are not available in
all types.
Members:
AddView (View As android.view.View, Left As Int, Top As Int, Width As Int, Height As Int)
Adds a view.
Supported types
B4A - Activity, Panel
B4i - Panel
B4J - Pane
BringToFront
Changes the Z order of this view and brings it to the front.
Checked As Boolean
Gets or sets the checked state (also named selected or value).
Supported types:
B4A - CheckBox, RadioButton, ToggleButton, Switch
B4i - Switch
B4J: CheckBox, RadioButton, ToggleButton.
Color As Int
Gets or sets the background color. Returns 0 if the color is not available.
EditTextHint As String
Gets or sets the hint or prompt text. Supported types:
B4A - EditText
B4i - TextField
B4J - TextArea, TextField
Enabled As Boolean
Gets or sets whether the view is enabled. Does nothing if the view does not support this property.
Font As B4XFont
Gets or sets the font (typeface and text size).
Supported types:
B4A - EditText, Label, Button, CheckBox, RadioButton, ToggleButton
B4i - TextField, TextView, Button, Label
B4J - Sets the Font property if available. Otherwise sets the CSS attribute.