{"id":1452,"date":"2024-12-13T09:39:32","date_gmt":"2024-12-13T04:39:32","guid":{"rendered":"https:\/\/obsidianeducation.wordpress.com\/?page_id=1452"},"modified":"2025-01-01T07:38:34","modified_gmt":"2025-01-01T07:38:34","slug":"how-to-add-sidebar-in-mit-app-inventor-no-extension-sidebar-navigation-menu-in-mit-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/how-to-add-sidebar-in-mit-app-inventor-no-extension-sidebar-navigation-menu-in-mit-app-inventor\/","title":{"rendered":"How to Add Sidebar in MIT App Inventor (No Extension) | Sidebar Navigation Menu in MIT App Inventor"},"content":{"rendered":"\n

Hello friends and welcome to Obsidian Soft,<\/p>\n\n\n\n

Today, I will teach you how to make a simple sidebar menu for navigation without extensions. I don\u2019t like relying on them too much, as these extensions might become outdated, and most importantly, you can\u2019t test them on iPhones.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

So, let\u2019s begin:<\/p>\n\n\n\n

Start a new project in MIT App Inventor. Name it to Sidebar. Keep the toolkit: default (very important). Press OK.<\/p>\n\n\n\n

Turn off the title bar as we will make a title bar ourselves with a button to open up the navigation menu or sidebar.<\/p>\n\n\n\n

Now, add a horizontal arrangement from the layouts. Make align horizontal left in its properties. And color: blue. Make its width fill parent and height 10 pixels. Drag and drop a list picker from the user interface inside this horizontal arrangement. I will upload media for the menu button image that I got from Flaticon. <\/p>\n\n\n\n

https:\/\/www.flaticon.com\/free-icon\/hamburger_5372882?term=menu&related_id=5372882<\/a><\/p>\n\n\n\n

Make sure that you choose 64-pixels version for downloading.<\/p>\n\n\n\n

In the list picker\u2019s properties, choose the image that you uploaded. Make height and width 55 pixels for the list picker.<\/p>\n\n\n\n

We will be using the concept of virtual screens. <\/p>\n\n\n\n

Virtual screens mean more than one full-screen layout on a screen such as screen 1 and we show only one of them at one time. They are faster than separate screens as you will notice that the loading time of separate screens is much slower. Also, it is easier to pass data between two screens as you are technically on the same screen.<\/p>\n\n\n\n

So, let\u2019s add 3 virtual screens:<\/p>\n\n\n\n

Add a vertical arrangement. Rename it to memberScreen. Make height and width fill parent. And make background-color: white<\/p>\n\n\n\n

Add a label: and change the text to \u201cAdd Member Screen\u201d. You can add all the components of your Add Member screen just like this label but make sure that they are inside this vertical arrangement called memberScreen.<\/p>\n\n\n\n

Now, select this memberScreen and duplicate by pressing Ctrl + C and Ctrl + V on the keyboard for Windows OR Command + C and Command + V on the keyboard for MacOS.<\/strong><\/p>\n\n\n\n

Rename to bookScreen and change the text to \u201cAdd Book Screen\u201d.<\/p>\n\n\n\n

Duplicate one more time. Rename it to searchScreen and change the text to \u201cSearch books\u201d. Now, turn off the visible checkbox for all screens except the memberScreen.<\/p>\n\n\n\n

You can add as many screens as you want.<\/p>\n\n\n\n

Now, let\u2019s go to the blocks section. Add a global list variable for menu items and another list for our virtual screens. You will understand why I am making a list for our virtual screens later.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

In screen1\u2019s initialize event, add three text blocks to the menu items with appropriate text for your menu and then, set this list to the listpicker.Elements.<\/p>\n\n\n\n

Also, add all your virtual screens to your screens list.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, whenever the user clicks on the list picker, our menu will open up with our 3 items. When the user selects any of these items, the list picker\u2019s after-picking event will be triggered. In this event, first make all your screens invisible by using a for loop and any component block. This is the reason why I made a list of our virtual screens i.e. vertical arrangements.<\/p>\n\n\n\n


Next, just use a control if then else if then else <\/strong>block after the for loop block to see what the list picker\u2019s selection is equal to and make the correct layout visible. Now, you don\u2019t have to worry about other screens and making them invisible. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

This simple but elegant solution for navigation is complete. I hope you like my easy version of side bar without using extensions that you can even use on iPhones.<\/p>\n\n\n\n

Happy Coding!<\/strong><\/p>\n\n\n\n

You can also have a look at the video tutorial for this app:<\/p>\n\n\n\n

\n