B4A Class [B4X][XUI] Material Design Components

nobbi59

Active Member
Licensed User
I created multiple B4X Modules for Material Design Components to make Apps with the Material Design Components availabe for cross-platform.

screenshot1.png
screenshot2.png


Currently the following Modules are available:
(Depends on XUI and XUIViews Library)

- MDBottomAppBar (View): a Material Design Toolbar with an integrated FAB and Menu Items
- MDFastActionButton (View): a Material Design FAB
- MDBottomMenu (Class): A Menu that shows animated from the Bottom of the screen with Context Menu Items


The attached B4A Project is attached to this Post and all Modules are included. Ive tested everything with B4A and B4i, for B4J you will probably have to edit the modules a bit.

All Views can be added from Designer or added at runtime using a BasePanel (see Example Project).

If you like the Components and want to use them in a project, please Donate.

Edit:
How to add the Views at runtime:

1. create a Transparent "BasePanel" with the size the view should have and add it to the Parent.

2. Call RuntimeCreateView Method of the View and pass the BasePanel as Base, the View will always be drawn to that Panel.

3. If your Parent resizes (e.g. on Rotation) call the Resize Method of the View
 

Attachments

Last edited:

GGSoft

Member
Licensed User
Very useful; thank you.
I've got a question:
What event shall I use to react to menu items' clicks?
 

nobbi59

Active Member
Licensed User
If you mean the Bottom Menu:

B4X:
ItemClick (Tag As String)
For Bottom App Bar:

B4X:
MenuItemClick(Tag As String)
 

asales

Well-Known Member
Licensed User
Very nice!
Some questions:
1 - How the middle button (FAB) works?
2 - Would be nice have a event "IsVisible" in the MDBottomMenu to use the Back button to check and close the menu.
 

nobbi59

Active Member
Licensed User
Ive uploaded a new version that includes the isVisible Method for the BottomMenu and you can hide the FAB in the BottomAppBar.

@asales Im not sure i understand you right but you can access the FAB of the Bottom Menu using its FAB property, the FAB on its own is just a simple View that can be added using the designer or via code.

I will add a short instruction on how to add the views at runtime to the first post.
 

nobbi59

Active Member
Licensed User
I will add this and a Click effect for the other views in the next version
 

Alvsky

Member
Licensed User
Hi,
sorry but I can't figure out how to catch _Click event of a FAB button.
Can someone help, please?
 

Alvsky

Member
Licensed User
Actually that is my question: I don't know how to use this event. I am a little lost 😀
Can you please show me:

Sub xxxx_Click?
 

Alvsky

Member
Licensed User
Learn a man how to fish... :)

Thanks DonManfred

So, just to repeat (for someone else eventually):
If we have a declaration:

B4X:
Sub Globals

    Private BottomBar As MDBottomAppBar
    ...
End Sub
We find the event according to DonManfred's instructions:

1577539573119.png



And then we call a Sub like this:

B4X:
Sub BottomBar_FABClick
    Log("FAB Click")
End Sub
 

DonManfred

Expert
Licensed User
To add:
The sub signature should match trhe Eventprefix given in the Initialisation.

B4X:
BottomBar.Initialize(Me,"BottomBar")
For ex:
B4X:
BottomBar.Initialize(Me,"BTMBar")
will result in the need to name the event sub
B4X:
Sub BTMBar_FABClick
    Log("FAB Click")
End Sub
 
Top