[Template] Material Style bottom menu templates (free)


#1

Hello Thunkers,

as a designer, I really love to see apps that have a beautiful interface. Unfortunately a lot of nice app ideas don’t look very pretty because they don’t have a nice layout and do not really care about visual and usability consistancy. Google created a beautiful Material design to make it easy for app creators to create beautiful apps that stick to the nice Android design, people are used to and love.

Since there are already a few more or less great extensions for sidebar drawers (I recommend Andres Sidebar V2) but no extensions for a beautiful material design bottom menu, I decided to build two templates for my future projects and also share it with you to use as a base for your coming up projects. Also bottom menus are very intuitive and easy to use. Even big players like Spotify changed from sidebars back to bottom navigation :wink:

Template 1 - bottom menu with icon and text & zoom

ezgif-1-93e1b36350

Material_Bottom_Menu.aia (322.1 KB)

How to set up / use

Actually setup is quite easy.

Colors

Just change the Color variables on top to the colors you want to use for your app (use HEX codes). To receive a beautiful look you might want to generate your colors at http://material.io/color and copy the # codes

31

If you want to use a dark on light color scheme you might have to change what colors are used (dark/light) in de SetColor procedure:

Icons

The icons can be changed by replacing the icon label text to icon codes from http://material.io/icons – if an icon is called "favorite", enter that into the label text field. Remember to replace spaces with _ (favorite outline will become favorite_outline).

Adding more menu items

this is a little more advanced because of the many blocks needed to create the animation / color changes. Also I would not recommend to add more than 4 or max. 5 items. Also don’t use less than 3 items:

In the designer you’ll have to add a vertical arrangement with 2 labels and set width to fill parent as well as set everything else same as the existing menu items. Also you need to add another vertical arrangement and call it VIEW_04 and set it up like VIEW_01-03

Then you need to add a new “else if” with the same blocks like already used to “MenuHighlight”, “ActiveView” and “Gesture.Touched”:

Also don’t forget to add new blocks to “SetColors” procedure for the new items :wink:

Template 2 - bottom menu with icons only & ripple effect

ezgif-1-492649a5fd

ezgif-1-cc9ee4713d

Material_Bottom_Icons-3.aia (320.8 KB)

How to set up / use

Actually setup is quite easy.

Colors

Just change the Color variables on top to the colors you want to use for your app (use HEX codes). To receive a beautiful look you might want to generate your colors at http://material.io/color and copy the # codes

31

If you want to use a dark on light color scheme you might have to change what colors are used (dark/light) in de SetColor procedure:

Icons

The icons can be changed by replacing the icon label text to icon codes from http://material.io/icons – if an icon is called "favorite", enter that into the label text field. Remember to replace spaces with _ (favorite outline will become favorite_outline).

Removing menu items

To remove a menu item and the related VIEW, remove the button and view element from the designer first. Then remove the unneeded block from “RippleEffect”, remove the unneeded else if blocks from “MenuHighlight” and from “ActiveView” - that’s it.

I hope you find the templates useful and can use them to build awesome and even better looking projects :slight_smile:

Thanks to @Helios, @Taifun, @Mika & @Andres_Cotes for your extensions :slight_smile:


UI for chat link Generator for whatsapp
Flash Cards. Learning aid for students
#2

These look incredible @gre4t_wh1te, thanks for sharing.

Hope that everyone spots the hidden “How to set up / use” sections - they’re a neat idea! :smiley:


#3

Hello @gre4t_wh1te can you explain more how to use-
1- How to change icon.
2- How to get action done when we click
In this aia.

Btw it is awesome great work.:+1:


#4

Is that what you mean?

what do you mean with that? :thinking:


#5

I mean how to enable onClick event.
When user clicks then i can enable another event. Mean I can set desired task when the user clicks on the icon.


#6

depending on what exactly you want to do you can just add your task / procedure for example here:

or here


#7

Thank you very much @gre4t_wh1te :grinning::+1:


#8

Thanks @gre4t_wh1te for this awesome template, but I have a question…
I’m using the first template but I can not trigger an event when I click on any elements of the action bar. How can I do It?


#9

You could also use font size for when you click on and off an icon or text


#10

Hi @gre4t_wh1te , thanks for sharing your work. I’ve been checking your file, It has 4 active view made by single screen only, Awsome… but how to make active view 1 contain listview, active view 2 contain map… because on designer view when i drag the map component, It always placed on active view 1. It also happened with listview component. I want to placed that component to another active view such as active view 2,3 or 4. Thanks @gre4t_wh1te.


#11

thank you for the template but can anyone give me a template design of a single circle button with text and zooming animation :mag:


#12

Set desired arrangement to visible to edit it and add components inside it and set to invisible when done


#13

@Sezi01 thanks Bro…


#14

I also had this problem. This was the solution I came up with (see attached images)…hope it helps :sweat_smile:


#15

Great Work


#16

Awesome your designs are Incredible !!
It made my day !!!


Also check out my app : click here


#17

Thank you very much for the idea. I will remake this myself without the Animation Extension, as I need it to be part of a Canvas. Probably with drawing circles from the point the user touched the button, while keeping the text up by redrawing it. Will have to fight overflows, but I will try to find a solution for this one too. :smiley: