The MIT App Inventor contains components for selection from lists, e.g. the ListView component. Unfortunately, it always fills the entire screen and you are only few options to configure the view. The extension presented here is a wrapper for the Android popup menu. Almost all properties are adjustable. If something is missing, write to me E-Mail to Ulli.
or in black
|1.0.0 (2021-01-20)||Initial version|
The UrsAI2Popup ZIP archive for download. The archive contains the source code, the compiled binary for uploading to the App Inventor and a sample application.
The popup menu is bound to another visible component (anchor). If it is opened via the Show method, it appears below the anchor component. If there is not enough space, it is displayed above.
The anchor component is selected in the designer. The component can be of any visible type. In the example it is the button with the name cmdMore. If Anchor is not selected, the app will abort.
First of all, the menu lines must be defined. There are various ways of doing this.
The MenuItemsFromString property is available in the designer and also at runtime. Individual item definitions are listed separated by commas:
The SetMenuItems method allows the menu items to be defined as a list:
The menu definition can also be read from a file. In the Designer this is done using the MenuItemsFromFile property, and at runtime using the LoadMenuItemsFromFile function
The definition of a menu line consists of up to three parts, separated by a double colon (::):
<Titel>[::[<Icon-Name>][::T | F]]
This means: The mandatory title in hypertext format (the text that is displayed in the menu bar), optionally followed by a double colon and, if applicable, the name of the file with the image for the symbol. If a double colon and a "T" or an "F" follow, a check box is activated in the menu line. "T" or "F" indicate the check state.
Examples for the definition of menu items:
The text can contain HTML tags.
The <b>quick <i>brown <strike>fox <u>jumps <font color="red">over</font></u></strike><i></b>::info.png
results in this menu item:
The name of the symbol file refers to an asset file, i.e. a file that was uploaded to the AI2 project.
The file extensions ".png" or ".jpg" can be omitted. The extension searches for it automatically.The name is case sensitive!
The third item in the menu item definition determines whether a CheckBox is displayed. Only the first letter is evaluated here. Upper / lower case is not important. For example, "False" is synonymous with "f" and "true" with "T". Other characters than "t" or "f" are ignored, i.e. no checkbox is displayed.
MenuFontSize defines the text sizes of the menu items for the entire menu, MenuTextColor their text color. Whith Default the color is determined by the current theme definition. If MenuTextColor is used to specify a color, the color specifications in the hypertext code no longer work correctly. If regions of the hypertext are to be colored, MenuTextColor should be set to Default.
The background color of the menu is Black or White. With Default, the background color is determined by the current theme definition.
Note: Unfortunately, the background color of a menu cannot be set separately via the Android API. It is determined by the theme. The theme cannot be accessed through the program. However, AI2 provides two themes, one with a black background and a white foreground and the other vice versa. To set the background color, the menu's theme is set accordingly. Apart from the background color, the themes contain different settings for other elements of the view, such as the row height of the menus. This means that black and white menus are different in other items besides the background color.
At runtime, the CheckBox state of a menu item can be changed using the SetMenuItemChecked function. The item counting (ItemNo) starts at 1.
Individual menu lines can be deactivated using the SetMenuItemEnabled function. Text and symbols are displayed in light gray and the item no longer reacts to being clicked. The item counting (ItemNo) starts at 1.
The Designer's AutoCheck property can be used to determine whether the check status of the check boxes is toggled automatically when a menu line is clicked. The events provide the current, i.e. the toggled check state.
If a menu item is clicked, the MenuItemSelected event is
triggered. The parameter ID of the event is the number of the
item, starting with 1. Checked is the current, new check status
if AutoCheck is set.
In order to save extensive if... else if... else blocks, the click events for the first five menu items are available as separate events. MenuItemSelected is triggered before MenuItem<x>Selected.
Most of the functions of the sample app are already been explained above. The menu items are bound to simple actions.
I have gathered some tips for creating your own extensions: AI2 FAQ: Developing extensions.