Add icons to a navigation bottom bar

You can take a look at the COVID Data app.

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

Steps

  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:

AIA:

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.

3 Likes