B4A Class [B4X][XUI] Material Design Components

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

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

 

[GGSoft]

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

 

[nobbi59]

If you mean the Bottom Menu:

ItemClick (Tag As String)

For Bottom App Bar:

MenuItemClick(Tag As String)

 

[asales]

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]

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.

 

[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.

Ok.
I was thinking in this FAB:
https://www.b4x.com/android/forum/t...and-floating-action-button-fab.65064/#content

Can I have a change color in FAB button when it pressed (clicked)?

 

[nobbi59]

I will add this and a Click effect for the other views in the next version

 

[Alvsky]

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

 

[DonManfred]

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

Are you using the event? The MDBottomAppBar has a Event for the FABClick

 

[Alvsky]

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?

 

[DonManfred]

Type SUB+SPACE+TAB in the popup select MDBottomAppBar and see the events.

 

[Alvsky]

Learn a man how to fish...

Thanks DonManfred

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

Sub Globals

    Private BottomBar As MDBottomAppBar
    ...
End Sub

We find the event according to DonManfred's instructions:

And then we call a Sub like this:

Sub BottomBar_FABClick
    Log("FAB Click")
End Sub

 

[DonManfred]

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

BottomBar.Initialize(Me,"BottomBar")

For ex:

BottomBar.Initialize(Me,"BTMBar")

will result in the need to name the event sub

Sub BTMBar_FABClick
    Log("FAB Click")
End Sub