appdoo Documentation

product overview

Search

Screen

The “Screen” is the basic element. It contains all other elements. The element “Screen” is not displayed in the outline and does not exist in the list of elements.

appdoo - Elements - Screen

Properties

To view the properties of the Screen, first click a free area next to the work space …

appdoo - Elements - Screen (show Properties)

… and then click the Properties tab (the slider icon) in the upper right sidebar.

Screen

appdoo - Elements - Screen (Screen)

  • Name
    Enter the name of the Screen here. This value is used as the title in the Navigation Bar and as the screen name in the Overview. If the name is longer than the available space of the title in the Navigation Bar, the text is cut off at the right edge and ended with “…”.

  • Scrolling

    • vertical
      Check this box to allow vertical scrolling on the screen. This is necessary, for example, if the content of your screen is larger (higher) than the visible area.

    • horizontal
      Check this box to allow horizontal scrolling on the screen. This is necessary, for example, if the content of your screen is larger (wider) than the visible area.

  • Background Color
    Here you define the background color of your Screen.

    appdoo - Elements - Screen (Background Color)

  • Global Tint Color
    Here you define the default color for elements such as buttons, etc. This color applies to all screens in your project and can be overridden by the properties of the elements themselves.

appdoo - Elements - Screen (Navigation)

  • Use Navigation Bar
    If you activate this checkbox, a Navigation Bar is used on the screen.

  • Show Tab Bar
    If you activate this checkbox, a Tab Bar is used on the screen.

    • Show Screen in Tab Bar
      If you activate this checkbox, the current screen is automatically added as an entry to the Tab Bar.

      A maximum of five entries are displayed in the tab bar. If there are more than five entries to be displayed in the tab bar, only the first four entries are displayed and a fifth entry “More” is automatically created on the right. With a touch on this entry all further entries are displayed and the user of the app has the possibility to change the entries of the tab bar according to his needs.

      • Icon
        An entry in the tab bar should also have a meaningful icon. You can define this here. Drag the desired image from the Files folder of the Outline to this field. To remove the image from this field, select the field and press the Back Space key or use the context menu.

        Tab Bar icons have to be PNG images with a maximum size of 60 × 60 pixels.

        • Choose…
          appdoo already provides some icons that you can use to get started quickly. Click on the “Choose…” button to display the icons. Click on an icon to select it.

      • Icon if not selected
        Here you define the icon for the active state. This is displayed if the user of your app is on the screen represented by the entry in the Tab Bar. Drag the desired image from the Files folder of the Outline to this field. To remove the image from this field, select the field and press the Back Space key or use the context menu.

        Tab Bar icons have to be PNG images with a maximum size of 60 × 60 pixels.

        • Choose…
          appdoo already provides some icons that you can use to get started quickly. Click on the “Choose…” button to display the icons. Click on an icon to select it.

      • Title
        Here you can define the text for the Tab Bar entry. This is displayed below the icon. If you leave this field empty, the title of your screen will be used automatically.