Hi there
Download
I've been working on something that I think may be useful to other B4A developers: bringing Google's Material Design 3 components to B4A through Java wrappers.
This is indeed a challenging process and each component will come as individual jar + xml files for your $25 certificate of appreciation.
For anyone not familiar with it, Material Design 3 (M3) is Google's latest generation of Material Design. It provides a comprehensive design system for Android applications, including components, colour systems, typography, shapes, interaction patterns and theming.
Google describes Material 3 as the latest evolution of Material Design, with components designed to work together as a consistent design system rather than simply being a collection of individual widgets.
So what am I doing?
The basic idea is relatively simple:
Java Material 3 component → Java wrapper → B4A library → B4A application
Rather than trying to recreate the Material 3 components from scratch in B4A, I'm wrapping the underlying Android/Java functionality and exposing it through a B4A-friendly API. The objective is to make the components feel like native B4A components, while retaining as much of the functionality and behaviour of the underlying Material implementation as possible.
For example, instead of a B4A developer having to understand the Java implementation of a Material component, the goal is to be able to work with it using familiar B4A concepts:
The exact API is still evolving, but the principle is that the Java complexity should stay behind the wrapper.
Material 3 includes concepts such as:
Colour
Material 3 uses a structured colour scheme rather than treating colours as isolated widget properties. This allows components to maintain a consistent visual relationship throughout an application.
Typography
Instead of choosing arbitrary text sizes for every control, Material 3 defines a typography system with roles for different types of content.
Shape
Components use a consistent shape system, allowing the visual language of an application to be changed systematically.
Theming
Components are intended to work together under a common theme rather than each component being styled independently.
Dynamic colour
Material 3 also supports dynamic colour, allowing applications to derive parts of their colour scheme from the device's environment where supported.
Java wrapping bridges that gap. The idea behind this project is therefore not to replace B4A's UI system. It is to extend it. A B4A developer should be able to continue developing in B4A while gaining access to functionality implemented in the underlying Android libraries.
Quite the opposite. There is still a substantial body of Android functionality based on traditional Views and Java, and wrapping that functionality provides a practical bridge for B4A developers.
This project is therefore deliberately focused on making the underlying functionality accessible from B4A, rather than trying to turn B4A into a Compose development environment.
That means looking at:
The wrappers should feel like they belong together.
Google / Android / Material Design
On the other:
B4A / Basic4android / the B4X ecosystem
The Java wrapper becomes the translation layer between them. That means B4A developers can potentially take advantage of sophisticated Android UI components without having to become Java or Kotlin developers, and because the underlying implementation remains Android-native, the intention is to avoid reinventing functionality that already exists in the Android ecosystem.
I'll post the first component and some examples next.
Related Content
www.b4x.com
#SharingTheGoodness
Download
I've been working on something that I think may be useful to other B4A developers: bringing Google's Material Design 3 components to B4A through Java wrappers.
This is indeed a challenging process and each component will come as individual jar + xml files for your $25 certificate of appreciation.
For anyone not familiar with it, Material Design 3 (M3) is Google's latest generation of Material Design. It provides a comprehensive design system for Android applications, including components, colour systems, typography, shapes, interaction patterns and theming.
Google describes Material 3 as the latest evolution of Material Design, with components designed to work together as a consistent design system rather than simply being a collection of individual widgets.
So what am I doing?
The basic idea is relatively simple:
Java Material 3 component → Java wrapper → B4A library → B4A application
Rather than trying to recreate the Material 3 components from scratch in B4A, I'm wrapping the underlying Android/Java functionality and exposing it through a B4A-friendly API. The objective is to make the components feel like native B4A components, while retaining as much of the functionality and behaviour of the underlying Material implementation as possible.
For example, instead of a B4A developer having to understand the Java implementation of a Material component, the goal is to be able to work with it using familiar B4A concepts:
B4X:
Dim Button As M3Button
Button.Initialize("Button")
Button.Text = "Continue"
Button.AddToParent(Activity, 0, 0, 200dip, 56dip)The exact API is still evolving, but the principle is that the Java complexity should stay behind the wrapper.
Why Material 3?
Material 3 isn't simply a new collection of prettier buttons. It provides a complete UI language. That includes things such as:- Buttons
- Floating Action Buttons
- Cards
- Text fields
- Checkboxes
- Radio buttons
- Switches
- Chips
- Dialogs
- Menus
- Lists
- Navigation components
- Bottom sheets
- Progress indicators
- Sliders
- Top app bars
- Tabs
- Tooltips
- Pickers
- Search components
- Badges
- And many other components
Material 3 includes concepts such as:
Colour
Material 3 uses a structured colour scheme rather than treating colours as isolated widget properties. This allows components to maintain a consistent visual relationship throughout an application.
Typography
Instead of choosing arbitrary text sizes for every control, Material 3 defines a typography system with roles for different types of content.
Shape
Components use a consistent shape system, allowing the visual language of an application to be changed systematically.
Theming
Components are intended to work together under a common theme rather than each component being styled independently.
Dynamic colour
Material 3 also supports dynamic colour, allowing applications to derive parts of their colour scheme from the device's environment where supported.
Why wrap it for B4A?
B4A has a major advantage: it makes Android development accessible without requiring developers to work directly with the Android SDK and Java/Kotlin ecosystem. But that also creates a gap. There are many excellent Android libraries available in Java/Kotlin that B4A developers cannot simply drop into a B4A project.Java wrapping bridges that gap. The idea behind this project is therefore not to replace B4A's UI system. It is to extend it. A B4A developer should be able to continue developing in B4A while gaining access to functionality implemented in the underlying Android libraries.
This is not a Compose project
There is an interesting development happening in the Android ecosystem at the moment. Google is increasingly moving Android UI development towards Jetpack Compose, and the traditional Views-based Material Components library has entered maintenance mode. For B4A, however, this doesn't necessarily mean that existing Material functionality becomes irrelevant.Quite the opposite. There is still a substantial body of Android functionality based on traditional Views and Java, and wrapping that functionality provides a practical bridge for B4A developers.
This project is therefore deliberately focused on making the underlying functionality accessible from B4A, rather than trying to turn B4A into a Compose development environment.
What I'm aiming for
The long-term goal isn't just to produce a collection of wrappers. I'm aiming for a reasonably coherent Material 3 component library for B4A.That means looking at:
- Consistent naming
- Consistent B4A APIs
- Events
- Properties
- Methods
- Layout behaviour
- Themes
- Colours
- Typography
- Accessibility
- State management
- Dark/light themes
- Component variants
- Android version compatibility
The wrappers should feel like they belong together.
An interesting side effect
One of the things I find particularly interesting about this approach is that it creates a bridge between two worlds. On one side:Google / Android / Material Design
On the other:
B4A / Basic4android / the B4X ecosystem
The Java wrapper becomes the translation layer between them. That means B4A developers can potentially take advantage of sophisticated Android UI components without having to become Java or Kotlin developers, and because the underlying implementation remains Android-native, the intention is to avoid reinventing functionality that already exists in the Android ecosystem.
Where this is going
I'm going to start sharing the components and the approach as the project develops. I'll cover things such as:- How the Java wrapper is structured.
- How the wrapped Android component is exposed to B4A.
- How events are passed back into B4A.
- How properties and methods are mapped.
- How Material 3 themes are handled.
- How components are added to B4A layouts.
- How different Material 3 variants are exposed.
- How to build and use the resulting B4A libraries.
I'll post the first component and some examples next.
Related Content
Material Design 3 Components - For A Certificate of Appreciation
Hi coders! I'm working on MD3 components, you can pre-order for a certificate of appreciation to the amount of $25. You can do it via paypal. https://paypal.me/anelembanga These are pure wraps of Google Android components using B4XViews with Designer Properties, which means they can be used...
www.b4x.com
#SharingTheGoodness
