Add icons to a navigation bottom bar

Hi everyone!
I have a question, how do you add icons to an app and when you click it it becomes coloured? For an example like this on Google Drive,
So is it possible to do so? I have seen on other apps made on MIT App Inventor like this but I haven't figured out how to do so.

Thanks in advance!

You could build your own bottom nav bar, use transparent background icons on buttons, and set each button inside an arrangement. When button clicked, change the colour of the arrangement. Set all the buttons up in a list to handle click events so that only one button is coloured.


You can take a look at the COVID Data app.

  • 2 MyFont extensions by Anke.
  • 1 ClickZ extension by Aquib.


  1. Download the Material Icons font in GitHub by clicking "View raw" and add it into App Inventor as an asset/media file.
  1. Add one horizontal arrangement and 3 vertical arrangements (for 3 icons). Set all of their widths to fill parent, and place the 3 vertical arrangements inside the horizontal arrangement.

  2. For 3 icons, you need 6 labels. Drag them into the designer like this.


  1. Choose your favorite icons in Material Icons. Click on an icon, and copy their name, for example, you need "local_pizza" for the Local Pizza icon.
  1. Customize the labels like this.


  1. Set the custom font for the MyFonts extension to the Material Icons TTF font.


  1. Code!

Final result:


ClickZ.aia (179.0 KB)

Note: to make it at the bottom of a screen, add another arrangement, place it above this navigation bar, and then make its Height fill parent.