PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
  • Overview of Action Bar
  • Creating and configuring an Action Bar
  • Bar style
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview of Action Bar
The "Actions Bars" replace the title bar of a window and they are used to display various information:
  • the application icon,
  • the window title,
  • some menu options,
  • the drop-down menu of your window.
Remarks:
  • Android The Action Bar is available for phones and tablets running Android 3 (and later). If an Action Bar is used with an earlier version, a title bar is displayed.
  • Versions 19 and later
    iPhone/iPad The "Action Bar" is available for all iOS versions. If an Action Bar is used before iOS 7, the options regarding the aspect of the Action Bar (font color, background color, etc.) are ignored.
    New in version 19
    iPhone/iPad The "Action Bar" is available for all iOS versions. If an Action Bar is used before iOS 7, the options regarding the aspect of the Action Bar (font color, background color, etc.) are ignored.
    iPhone/iPad The "Action Bar" is available for all iOS versions. If an Action Bar is used before iOS 7, the options regarding the aspect of the Action Bar (font color, background color, etc.) are ignored.
Versions 19 and later
iPhone/iPad The Action Bar control is now available for iPhone/iPad applications.
New in version 19
iPhone/iPad The Action Bar control is now available for iPhone/iPad applications.
iPhone/iPad The Action Bar control is now available for iPhone/iPad applications.
Versions 21 and later
Universal Windows 10 App The Action Bar control is now available for applications in Universal Windows 10 App mode.
New in version 21
Universal Windows 10 App The Action Bar control is now available for applications in Universal Windows 10 App mode.
Universal Windows 10 App The Action Bar control is now available for applications in Universal Windows 10 App mode.
Creating and configuring an Action Bar
By default, windows are created with an Action Bar.
You can configure the bars used in the window:
  1. Open the window description ("Description" in the context menu).
  2. In the "Style" tab, specify the content of the top bar:
    Choosing the top bar
    • Full screen: no bar is displayed,
    • System bar only: Only the system bar is displayed.
    • System bar + Action Bar: The system bar and the Action Bar are displayed.
    • Action Bar only: Only the Action Bar is displayed.
    • System bar + Title: The window system bar and title bar are displayed.
    • Title only: Only the window title bar is displayed.
    • Versions 26 and later
      iPhone/iPad Sheet mode (iOS13 and later): if this type of bar is selected, the window can be opened from the bottom of the screen. The window is "cascaded": it doesn't completely cover the window underneath. It can be closed simply by swiping it down.
      If this option is selected:
      • the window has no bars in the editor.
      • the "Allow closing" event is automatically associated with the window. If this event returns:
        • True, the window is closed.
        • False, the window is reactivated.
      1. Remark: If this window is used in a version lower than iOS 13, the window is maximized and the close swipe has no effect.
      New in version 26
      iPhone/iPad Sheet mode (iOS13 and later): if this type of bar is selected, the window can be opened from the bottom of the screen. The window is "cascaded": it doesn't completely cover the window underneath. It can be closed simply by swiping it down.
      If this option is selected:
      • the window has no bars in the editor.
      • the "Allow closing" event is automatically associated with the window. If this event returns:
        • True, the window is closed.
        • False, the window is reactivated.
      1. Remark: If this window is used in a version lower than iOS 13, the window is maximized and the close swipe has no effect.
      iPhone/iPad Sheet mode (iOS13 and later): if this type of bar is selected, the window can be opened from the bottom of the screen. The window is "cascaded": it doesn't completely cover the window underneath. It can be closed simply by swiping it down.
      If this option is selected:
      • the window has no bars in the editor.
      • the "Allow closing" event is automatically associated with the window. If this event returns:
        • True, the window is closed.
        • False, the window is reactivated.
      1. Remark: If this window is used in a version lower than iOS 13, the window is maximized and the close swipe has no effect.
Depending on the type of bar selected, the "Bar style" button allows you to set the style options used (color and font).
Versions 20 and later
Remarks:
  • iPhone/iPad If you use the system bar, you can configure the system bar transparency on iOS 7 and later.
  • Versions 23 and later
    iPhone/iPad For iPhone X, you can shift the bars according to the sensor area.
    New in version 23
    iPhone/iPad For iPhone X, you can shift the bars according to the sensor area.
    iPhone/iPad For iPhone X, you can shift the bars according to the sensor area.
  • Versions 26 and later
    Android Until version 25, the height of Action Bar controls is 48 px by default. Starting with new projects in version 26, the height of the Action Bar control is 56 px by default. You can choose the default height in the description window of the project configuration: Action bar height option in the "General" tab.
    Remark: If the height is changed, the new height is applied to all windows in the application.
    New in version 26
    Android Until version 25, the height of Action Bar controls is 48 px by default. Starting with new projects in version 26, the height of the Action Bar control is 56 px by default. You can choose the default height in the description window of the project configuration: Action bar height option in the "General" tab.
    Remark: If the height is changed, the new height is applied to all windows in the application.
    Android Until version 25, the height of Action Bar controls is 48 px by default. Starting with new projects in version 26, the height of the Action Bar control is 56 px by default. You can choose the default height in the description window of the project configuration: Action bar height option in the "General" tab.
    Remark: If the height is changed, the new height is applied to all windows in the application.
New in version 20
Remarks:
  • iPhone/iPad If you use the system bar, you can configure the system bar transparency on iOS 7 and later.
  • Versions 23 and later
    iPhone/iPad For iPhone X, you can shift the bars according to the sensor area.
    New in version 23
    iPhone/iPad For iPhone X, you can shift the bars according to the sensor area.
    iPhone/iPad For iPhone X, you can shift the bars according to the sensor area.
  • Versions 26 and later
    Android Until version 25, the height of Action Bar controls is 48 px by default. Starting with new projects in version 26, the height of the Action Bar control is 56 px by default. You can choose the default height in the description window of the project configuration: Action bar height option in the "General" tab.
    Remark: If the height is changed, the new height is applied to all windows in the application.
    New in version 26
    Android Until version 25, the height of Action Bar controls is 48 px by default. Starting with new projects in version 26, the height of the Action Bar control is 56 px by default. You can choose the default height in the description window of the project configuration: Action bar height option in the "General" tab.
    Remark: If the height is changed, the new height is applied to all windows in the application.
    Android Until version 25, the height of Action Bar controls is 48 px by default. Starting with new projects in version 26, the height of the Action Bar control is 56 px by default. You can choose the default height in the description window of the project configuration: Action bar height option in the "General" tab.
    Remark: If the height is changed, the new height is applied to all windows in the application.
Remarks:
  • iPhone/iPad If you use the system bar, you can configure the system bar transparency on iOS 7 and later.
  • Versions 23 and later
    iPhone/iPad For iPhone X, you can shift the bars according to the sensor area.
    New in version 23
    iPhone/iPad For iPhone X, you can shift the bars according to the sensor area.
    iPhone/iPad For iPhone X, you can shift the bars according to the sensor area.
  • Versions 26 and later
    Android Until version 25, the height of Action Bar controls is 48 px by default. Starting with new projects in version 26, the height of the Action Bar control is 56 px by default. You can choose the default height in the description window of the project configuration: Action bar height option in the "General" tab.
    Remark: If the height is changed, the new height is applied to all windows in the application.
    New in version 26
    Android Until version 25, the height of Action Bar controls is 48 px by default. Starting with new projects in version 26, the height of the Action Bar control is 56 px by default. You can choose the default height in the description window of the project configuration: Action bar height option in the "General" tab.
    Remark: If the height is changed, the new height is applied to all windows in the application.
    Android Until version 25, the height of Action Bar controls is 48 px by default. Starting with new projects in version 26, the height of the Action Bar control is 56 px by default. You can choose the default height in the description window of the project configuration: Action bar height option in the "General" tab.
    Remark: If the height is changed, the new height is applied to all windows in the application.

Bar style

The "Bar style" button allows you to define the style options of the selected bars:
  • System bar.
  • Action Bar.
  • Navigation Bar.
Android If you use the system bar, you can configure:
  • the background color: this color can be:
    • a specific color, a system color or transparent.
      If the color is "Transparent", the color of the system bar is that of the Action Bar. This option is taken into account only if the window contains an Action Bar.
    • adapted to the Action Bar. In this case, if the "Material design" skin template is used, the system bar uses the same color as the Action Bar, with a darker tone. Otherwise, the color of the Action Bar is used.
  • text color.
  • whether or not the bar should be in overlay mode. If the "Auto-hide" option is checked, the origin of controls is modified and the Opacity property can be used on the Action Bar control. The bar will be displayed over the controls.
If you use the Action Bar, you can configure:
  • the background color: it can be a specific or automatic color.
  • the font color.
  • whether the font color should be applied to the active icons.
the background image of the Action Bar.
  • whether or not the bar should be in overlay mode. If the "Auto-hide" option is checked, the origin of controls is modified and the Opacity property can be used on the Action Bar control. The bar will be displayed over the controls.
If you use the navigation bar, you can configure the colors used for active and inactive elements.
Android Remarks:
  • This system bar color configuration is only available in Android 5.0 and later.
  • The bar color cannot be changed on Nexus devices.
  • SystemBarColor is used to modify this color by programming.
Related Examples:
WM ToDo List Cross-platform examples (WINDEV Mobile): WM ToDo List
[ + ] This example is a manager of To-Do Lists.
The project is using the gestures in the loopers in order to move and delete the lists and tasks.
The data is stored in a HFSQL database.
Minimum version required
  • Version 17
This page is also available for…
Comments
video Action Bar
https://youtu.be/84vtPkkM188
amarildo
06 Aug. 2018