[FREE/PAID] BottomMenuZ - Create Animated Bottom Navigation Menu Easily!

Hey Everyone, Nikzdevz here,
This extension can be used to make bottom navigation menu with lots of customization with using any library.

Blocks

There are total 31 blocks.Shown below -

Explanation of blocks

There are many blocks that are not of any use in some cases. So i’ve explained the block in different section. Discussed as follows -

Important Block

SetData - This is the most important block and must to used first before using any other block oof the extensions. You can say its skeleton of the extensions

image

Parameters -

  • height - Height(in Px) of the bottom menu you want and width will be automatically taken as device width.
  • optionList - List of the text of options you want to show in Bottom Menu
  • iconList - List of all the icon. Icon can be image or any text from font icon. And arrange the list of icon wrt optionList.
  • activeOption - The option you want to set as active item when the menu is created
  • backgroundColor - Background Color of the menu you want. int value of the color must be provided.
  • slidingColor - Color of the Slider in the menu. if there is any slider.

SetOptionalData - This block is mainly used to set some other properties of the menu like Active Option Color, Inactive Option Color, Size of text, Font Icon text Size, Max size of icon layout, Icon and text font.
Remember if you are using any font for you icon must give name of it else if you are using images then pass blank parameter.
image

Initialize - This block will create the menu according to the property set using above blocks.
image
Parameters -

  • type - Type of menu you wanted to make
  • isTextEnabled - if this the value is false then only icon in the menu will be shown.

So above block are important to use to set basic details and create menu.

Types of menu

There are total 11 type of menu excluding floating buttons.Preview of all the menu is given in the video shared in post.
image

Float option In menu

Setting up the float option if you want.

FloatOption - Using following block you can create a float button in the menu at any index.This block must be used before initializing the menu.
image
Parameters -

  • index - index where you want to float the option in menu
  • floatType - Type of floating layout you want.Also discuss in next section
  • iconName - name of the icon you want to use inside the menu. if its a image file then give its name and leave fontName parameter blank, but if its a icon from any font then give its text and also define its font name in fontNAmeParameter.
  • fontName - name of the font used for icon in floating option. if used image then leave it blank.
  • iconSize - size of icon you want to show in float option
  • backgroundColor - background color of the float option.
  • curveColor - color of the curves inside the float option.
  • textColor - Color of icon

Type of float layout
Layout that are available for creating float option.image
Above block must be used in floatType Parameter of FloatingOption block.

Setting Up BadgeView in Option

SetBadgeProperty - This block can be use to set basic property of the badge alert like Background Color, Text color, Font size, Badge size . This block must be used before initializing menu.
image

ShowBadge - This block can be used to show notification badge on any option of menu using there index.This block must be used after initializing menu at any time
image

HideBadge - This block can be used ti hide badge of any option using index if shown.This block must be used after initializing menu at any time
image

Some other blocks

SelectOption - Using this block you can select option without click.This block must be used after initializing menu at any time
image

AnimationDuration - Duration(in milliseconds) of the animation when any option got clicked. This can be used any time before or after initializing menu.
image

SetupColorList - List of color you want to use in ColorReveal Menu.This block must be used before initializing menu
image

SetLineProperty - Property of the line slider used in Menu.Height of line must be in px. If isAtTop is set to true then line slider will be shown at top of menu else it will be t bottom.This block must be used before initializing menu.
image

SetSmoothBarCardProperty - This block must be used when you want to make smooth bar menu.
Height,Width and radius must be in px and This block must be used before initializing menu.
image

ChangeSliderColor - If there is any slider this block can be used to change the color of slider. Also this block must be used after initializing menu at any time.
image

Events

  • Following option will be triggered when floating button will be clicked. if any.
    image
  • Following option is triggered when any option got clicked. You will get option text and index of the clicked item.
    image

Basic Tutorial

Previews

How it is build?

Special thanks to @Shreyash as this extension is made with Rush

How to Buy Paid Version?

Prices
Upi,Gpay,Paytm - Rs.700
Paypal - $12

For Free Version

Free Version 2

Thank You :heart:

58 Likes

Awesome Extension.

1 Like

Thanks you so much @AI_Developer

If you made the perfect extension for free, you would contribute greatly to developers

thank you :star_struck: :100: :100: :100:

3 Likes

Best bottom navigation extension ever​:brown_heart:

3 Likes

There will a free version of it but will have less customization and less menu…

Thanks you so much :heartbeat:

1 Like

If you do a free version, PLEASE make sure the color reveal is there :grin:

:joy::joy:
Color reveal and icon toogle is my fav too…

1 Like

oh nice i had seen it yesterday after google search .finally u made extension that code.

1 Like

can u make this type of side bar?

sources :point_right: :point_right:Curve Navigation Drawer in Android using ArcNavigationView - GeeksforGeeks

1 Like

Everything in the extension in coded by me except the curve coordinate part… without using any lib…

please make curve side bar which i have provded sources

btw what a coincidence :joy:
my next extension was based on sidebar… you can suggest me some sidemenu you want. just send me in personal

2 Likes

ok i’ll make it later

1 Like
Open This
One more
One More Please

Amazing extension
Ever i seen on bottom navigation

:heart::heart::heart::heart::heart::heart::heart::heart::heart::heart::heart:

I just tried it and it’s work perfectly on every device. @nikzdevz you make a dope extension.

:fire::fire::fire::fire::fire:

3 Likes

Thanks you so much @yashaggarwal376 … Your comment is epic :joy:

Great Extension!!
:star_struck:

1 Like

is the free version up already? :smiley:

1 Like

Will be released soon.m

i am looking forward

I was thinking about this idea. nice that you present something like this.

thank you

1 Like