B4A Class [B4X][XUI] Material Design Components

Discussion in 'Additional libraries, classes and official updates' started by nobbi59, Jun 17, 2019.

  1. nobbi59

    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.

    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

    Attached Files:

    Last edited: Jun 17, 2019
  2. GGSoft

    GGSoft Member Licensed User

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

    nobbi59 Active Member Licensed User

    If you mean the Bottom Menu:

    ItemClick (Tag As String)
    For Bottom App Bar:

    MenuItemClick(Tag As String)
    GGSoft likes this.
  4. asales

    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.
  5. nobbi59

    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.
    asales likes this.
  6. asales

    asales Well-Known Member Licensed User

  7. nobbi59

    nobbi59 Active Member Licensed User

    I will add this and a Click effect for the other views in the next version
    asales likes 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