MIT App Inventor – simple android menu

The menu can be useful for multi-screen Android applications. The following article in the MIT App Inventor, an Android app developer series, can help with that.

The zip files associated with this article also include the project file (.aia) and the installable application (.apk). It has not been extensively tested, I have only tried it on my own phone, so install it at your own risk.

advertising – amazon.com

Project files can be downloaded from:  MenuExample.zip

So let’s create the ‘Designer’ section first. We will need a ‘HorizontalArrangement’ layout. Place a ‘Label’ and a ‘ListPicker’ component here. I set ‘Label1’ for ‘Text’ to ‘Home’. This will be the title of the application. ‘ListPicker’ is named ‘Menu’.

In the ‘ListPicker’ settings you will find the ‘ElementsFromString’ attribute, enter the menu items separated by commas. You can also find these settings in the project file (.aia) in the download (.zip) file below. This is a good starting point, you can resize the colors of the components to suit your own taste.

That’s it, the other pages can come. The next ‘About the App’ screen. Click on the ‘Add Screen…’ button and enter the name of the screen in the popup window, in this case “About”.

Drag the components shown in the image below to your phone. In the first layout, ‘Label1’ will be the title of the screen. ‘Button1’ will be labeled ‘Close’. These components are required for the menu to work. Additional components populate the screen with content. ‘Label2’ is a text field, a few words about the app.

In the example above, I placed an invisible component, this is ‘ActivityStarter’. This component allows you to launch another application on your device, in this case launching the web browser with the specified parameters when you click on the ‘Image1’ image or the ‘Button2’ button.

Add another screen called “Settings”. Add a horizontal layout with a text box labeled “Settings” and a button labeled “Close”.

The finished menu on your phone:

This completes the ‘Designer’ section. Let’s see the block editor section. Let’s start with the ‘Screen1’ screen. If you select an item in the ‘ListPicker’, the corresponding code will run. For example, if you click on the ‘Settings’ menu item, which is the item with indexing 1 in the list (Indexing of items in the list starts from 1 and not from 0!) The ‘Settings’ screen opens.

In the example, the 3rd indexed item in the list is “Exit”, selecting this menu item will close the application.

The code for the ‘Settings’ screen does not require any special explanation. Pressing ‘Button1’ closes the ‘Settings’ screen

And finally, the ‘About’ screen blocks. The first block closes the current screen. The second, when you click on the ‘Button2’ button, invokes the ‘ActivityStarter’ component, which opens the browser with the previously specified parameters. The third block does the same when we click on the image ‘Image1’.

This small menu example can be a good base for developing a more android application.