With smaller apps, the implemented functions can be triggered by a button. With larger apps, however, the available space quickly decreases and the layout becomes confusing. An ActionBar (ToolBar, App Bar) can help. There are a number of implementations, but I haven't found a sufficient one one and developed one by myself. Almost all properties are adjustable. If something is missing, write to me: Email to Ulli.
|- Assigment of Buttons (#1 & #2) corrected.
- LeftButtonColor did not work.
|The code from UrsAI2Popup was integrated as the menu.
|There is no need to convert the symbol names into Unicode characters. The names of the symbols can be specified directly.
|Symbol names (e.g. LeftButtonSymbol) can additionally
accept the text "blank". Then a blank character is displayed.
Via properties LeftButtonImage and RightButtonImage images (image file as asset) can be set as background for the buttons.
The UrsAI2ActionBar ZIP archive for download. The archive contains the source code, the compiled binary for uploading to the App Inventor and a sample application.
The App Bar, formerly also known as the Action Bar, is one of the most important design elements of your own Android app. It provides a visual structure and interactive controls that many users are already familiar with.
By using the App Bar, the appearance of your own app becomes consistent with other Android apps, so that users can quickly and intuitively understand how to use the app. It's a special type of toolbar found at the top of every screen and used for branding, navigation, search, and actions. This extension makes it possible to implement an ActionBar in an App Inventor App.
A HorizontalArrangement available at design time is filled with the toolbar at runtime:
The extension sets the height of the ActionBar to 56 DIP (Pixel in AI2) and the width fills the parent element. If you want to have the correct dimensions at design time, you can set up the HorizontalArrangement accordingly. It also makes sense to name the component appropriately. In the example I named it ActionBarPlaceholder.
The HorizontalArrangement is registered in the UrsAI2ActionBar parameter PlaceHolder at design time:
If this is not done, the HorizontalArrangement is not adjusted, and an ActionBar is not displayed. If the selected componenten is not of type HorizontalArrangement an ActionBar is not displayed and the event Screen.ErrorOccurred is triggered with the error number 7777.
In theory, it is not absolutely necessary to place the HorizontalArrangement
at the top of the display. The position of the HorizontalArrangement
determines the position of the action bar.
Note: Child elements contained in the arrangement are hidden.
The functions to layout the ActionBar are available in the designer
and as a block. The best way to design them is to run the project in the Companion. Then you can
immediately see what the ActionBar looks like and test the functions.
The ActionBar consists of the following components:
Die Symbolleiste besteht von links nach rechts aus der Schaltfläche LeftButton, dem Textfeld Title und drei weitere Schaltflächen Button2, Button1 und RightButton. Über RightButton kann ein konfigurierbares Popup-Menu geöffnet werden.
From left to right, the toolbar consists of the LeftButton, the Title text field and three further buttons, Button2, Button1 and RightButton. A configurable popup menu can be opened when RightButton is clicked.
The title text field is configured with AI2 usual properties. The Title property determines the text to be displayed. With property BackgroundColor the background color of the entire toolbar is set. With FontSize, FontBold and TextColor, the size, font weight and font color can be set. TextAlignment defines the alignment of the text.
The symbols displayed in the buttons are characters from a special TTF font. This simplifies the presentation in different sizes and colors.
Google provides extensive material to support app development. A large number of symbols are provided
on the Material Design / Icons
page. These are also available as a font (MaterialIcons-Regular.ttf, version 1.017). This font is
embedded in the extension and is available for download (folder "de\ullisroboterseite\ursai2actionbar\assets").
The name of the symbols (e.g. "arrowback", "menu" or "more_vert") can / must be set with
The ...ButtonColor property can be used to set the color of the symbol. Specifying "blank" causes a space character to be displayed (useful if a background image is set).
The ...ButtonImage property can be used to set a background image for the button. On my test device the image was adjusted to the size of 155x155 pixels². The image should be square. Non-square images are distorted.
The menu is identical to that in the extension UrsAI2Popup. It is linked to the right button (RightButton). If the left button is to be coupled with a menu, this can be done via an instance of the UrsAI2Popup extension. The placeholder component can serve as the anchor.
When a button is clicked, the associated ...Click event is triggered.
RightButtonClick is triggered before the popup menu is assembled.
The menu can be adjusted at this event.
The events of the menu are described in section Events triggered by the popup menu of extension UrsAI2Popup.
Most of the functions of the sample app have already been explained above. The menu items are bound to simple actions. The Label component shows which key was pressed. Color selection is done by ColorPickerDialog developed by Zhangzqs.
I have gathered some tips for creating your own extensions: AI2 FAQ: Developing extensions.