B4A Library [B4X] [XUI] Cross platform & native UI library

Discussion in 'Additional libraries, classes and official updates' started by Erel, Sep 27, 2017.

  1. Erel

    Erel Administrator Staff Member Licensed User

    Video tutorial:

    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 I expect that all B4X developers who target more than a single platform will use it at some point.

    Two main concepts:
    - XUI libraries API 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.

    Example of CustomListView class that is supported by B4A, B4i and B4J:

    [​IMG] [​IMG] [​IMG]

    The main type in XUI is B4XView.
    Any view or node can be assigned to a B4XView variable.
    The B4XView type includes all the common methods, including methods that are not available in all types.
    See the methods documentation for more information.
    Dim xlbl As B4XView = Button1
    xlbl.Text = 
    Dim b As Button = xlbl
    Steps to writing cross platform solutions:

    1. Use the designer to build the interface. The designer hides many of the differences between the platforms. Make sure to use anchors and designer script to handle different screen sizes.

    2. Use B4XViews whenever possible and whenever it makes sense. You can change the types of views added with the designer to B4XView:
    Sub Globals
    Private clv1 As CustomListView
    Private clv2 As CustomListView
    Private Label1 As B4XView '<--- manually change to B4XView
       Private CheckBox1 As B4XView
    End Sub
    3. Switch to the native types when needed. You can use the built-in conditional compilation symbols for this:
    #If B4A
    Dim nCheckBox1 As CheckBox = CheckBox1
    nCheckBox1.Ellipsize = 
    "END" 'no such property in B4XView
    #Else If B4i
    Dim nCheckBox1 As Switch = CheckBox1
    nCheckBox1.TintColor = 
    #End If
    CheckBox1.Checked = 
    'B4XView.Checked works with:
    'B4A: CheckBox, RadioButton, ToggleButton and Switch
    'B4i: Switch
    'B4J: CheckBox, RadioButton and ToggleButton
    Other types available:

    - 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).
    - XUI - This type holds various methods to help writing cross platform code.
    For example SubExists in B4i expects another parameter (the number of arguments). XUI.SubExists adds this parameter. The parameter is not used in B4J and B4A.
    It includes a DefaultFolder property as well as other useful methods.

    Notes & tips

    - In almost all cases you can just change the variable type from the native view to B4XView. One place where you cannot is in views passed from events. In such cases you need to change the type to Object (if you want it to be cross platform compatible).
    This is the case with DesignerCreateView sub:
    'B4A / B4i:
    Public Sub DesignerCreateView(base As Panel, lbl As Label, props As Map)
    Public Sub DesignerCreateView(base As Pane, lbl As Label, props As Map'Pane instead of Panel
    'Cross platform:
    Public Sub DesignerCreateView(base As Object, lbl As Label, props As Map)
    Dim mbase As B4XView = base
    - The B4J library uses imgscalr open source code for the bitmap manipulation. It is superior to ImageView resize algorithm.
    - Some of the new features that are not available in the core libraries and can be used without relation to the cross platform features:
    • B4XView.Snapshot (new in B4A and B4i) - Captures the view appearance and returns a B4XBitmap.
    • B4XView.SetVisibleAnimated (new in B4J and B4i).
    • B4XView.Color (new in B4A and B4J) - Gets the color value if it available.
    • B4XView.SetColorAnimated (new in B4J).
    • B4XBitmap.Crop / Resize / Rotate / WriteToStream (new in B4J)
    - Events are not modified. This means that the event subs will need to be different in many cases. You can see how it is handled in CustomListView class. The platform specific event subs call a shared sub.
    - There are some missing features like dialogs and canvas. They will be added.
    - The libraries require B4A v7.3+, B4i v4.3+ and B4J v5.9+.
    - XUI is compatible with Android 4+ (API level 14+).


    xCustomListView: https://www.b4x.com/android/forum/threads/84501
    Calculator example: https://www.b4x.com/android/forum/t...platform-native-ui-library.84359/#post-534536
    Badger class: https://www.b4x.com/android/forum/threads/b4x-class-badger-add-badges-to-views.81723/
    CircularProgressBar: https://www.b4x.com/android/forum/threads/b4x-xui-custom-view-circularprogressbar.81604/

    And more: https://www.b4x.com/search?query=[xui]

    Change log:

    XUI libraries are now internal libraries. Use the one preinstalled with the IDE.

    Version 1.50 (iXUI)
    • B4XCavas.DrawLine was missing. Fixed.
    Version 1.50 (jXUI) - internal library now.
    • Previous animations are stopped automatically when a new animation of the same type is started.

    Version 1.48 (iXUI only):
    • XUI.Color_RGB / Color_ARGB were missing. Fixed.
    Version 1.47:
    • B4XPath.InitializeRoundedRect - Creates a rectangle path with rounded corners.
    Version 1.46:
    • B4XFont.ToNativeFont - Returns a native font object.
    • XUI.CreatePanel - Creates a panel that clips its child views. This is the same behavior like panels in B4A, B4i and B4J when adding panes with the designer.
    Version 1.45:
    • Beta label removed.
    • B4XCanvas.Release - Releases native resources.
    • XUI.FileUri - Returns a file uri that can be used with WebView to load local resources. Also supports assets files.
    Version 1.40:

    Version 1.30:
    • Fixes a bug in XUI.CreatePanel in B4A.
    • B4XView.TextColor is now supported in all views in B4J. It sets the -fx-text-fill CSS attribute on views that do not have a TextColor property.
    • B4XView coordinates are rounded in B4J. This prevents the text from being blurred.
    Version 1.25:
    • Fixes an issue in B4XCanvas.CreateBitmap.
    • B4i animations are now linear as in B4A and B4J.
    • XUI.CreatePanel - Useful method to create a Panel or Pane
    Version 1.20:
    • New types:
      • B4XCanvas
      • B4XRect
      • B4XPath
    • B4XView.SetTextAlignment for labels and other text fields.
    • XUI.IsB4A / IsB4i / IsB4J properties. Alternative to compilation symbols (when possible).
    • The same documentation appears in all three libraries: https://www.b4x.com/android/help/xui.html

    Version 1.10:
    • B4XFont - Similar to B4J Font, B4i Font and B4A Typeface + size.
    • B4XView new properties and methods:
      • Font
      • Rotation
      • SetRotationAnimated
      • BringToFront
      • SendToBack
    • XUI - New methods to create B4XFonts (CreateFont, CreateFont2, CreateDefaultFont and CreateDefaultBoldFont).
    Last edited: Aug 14, 2019
  2. Emme Developer

    Emme Developer Well-Known Member Licensed User

    Im working to do a library like this, but ok boss, no need more :p
    KMatle likes this.
  3. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    Sounds interesting, that's what I need.
  4. souzafo

    souzafo Member Licensed User

  5. maXim

    maXim Active Member Licensed User

    !!! :) !!!
  6. OliverA

    OliverA Expert Licensed User

    For stuff like this, I wish I could click like about a 1000 times or more. Just plain awesome.
    ShaneG30 likes this.
  7. luke2012

    luke2012 Well-Known Member Licensed User

    Great work @Erel! This is what we need. This is the right way :)
  8. Erel

    Erel Administrator Staff Member Licensed User

    Example of a calculator:
    [​IMG] [​IMG] [​IMG]

    In this case all the code is implemented in the main module (with the help of B4XEval class to make the actual calculations).
    In a real app it is better to put such code in a class as class modules can be shared.

    (The LCD font file included in the example is limited to non-commercial usage)

    Attached Files:

    Last edited: Sep 27, 2017
  9. alwaysbusy

    alwaysbusy Expert Licensed User

  10. Mashiane

    Mashiane Expert Licensed User

    Me thinks a single IDE for all B4X platforms is loading... :confused: This is pure genius...
    ShaneG30 and DonManfred like this.
  11. Martin Fernandez

    Martin Fernandez Member Licensed User

    Liked! Bookmarked! and Shared!
    Great work.

    Thanks Erel!!
  12. Rantor777

    Rantor777 Member Licensed User

    Great work, the learning curve is simplified.
  13. Mashiane

    Mashiane Expert Licensed User

    Enjoying the customlistview so long, if you don't mind me highlighting this, subsequent calls to clear it don't work.

    I'm clicking each item of the segment control, and filter my list to only show the available contents...

    Sub tblAlpha_ValueChanged (Value As String)
        allLearners = kvs.GetSimple(
        spList = jMash.StrParse(
    For Each strLearner As String In spList
    If strLearner.StartsWith(Value) Then lstLearners.AddTextItem(strLearner,strLearner)
    End Sub
    Erel likes this.
  14. Erel

    Erel Administrator Staff Member Licensed User

    This line was missing from the Clear sub:
    I will create a thread specifically for xCustomListView and post the updated class.
    Peter Simpson and Mashiane like this.
  15. daniedb

    daniedb Active Member Licensed User

    Wow, excellent work.. as always... ONE STEP AHEAD....
  16. victormedranop

    victormedranop Well-Known Member Licensed User

    Last edited: Oct 19, 2017
  17. Erel

    Erel Administrator Staff Member Licensed User

    V1.40 was just uploaded with support for Msgbox dialogs.
  18. Erel

    Erel Administrator Staff Member Licensed User

  19. EvgenyB4A

    EvgenyB4A Active Member Licensed User

    Is the XUI still beta version or already officially released?
  20. Erel

    Erel Administrator Staff Member Licensed User

    The beta label will be removed in the next update. It will be a very small update so you can already use it now.
    luke2012 and EvgenyB4A like this.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice