AppMachine Help Center

How can we help you?

Follow

Home screen settings

Every navigation style has a different set of settings. Make sure you’ve chosen the appropriate navigation style before making too many changes. Read all about the different navigation styles here

  1. Open your app from the My Apps dashboard.
  2. Select the Design tab in the left sidebar.
  3. Select the Yellow block Menu / Hoofdmenu.

In the rest of this article we will show you all the settings for every navigation style. 

Advanced iconmenu

This is the most customizable icon menu view which shows the icon and name of every block. It offers pixel by pixel control of the size and position of the icons in a grid.


In the Menu section you define how many blocks will be shown on the home screen and on which part of the homescreen they will be shown.

  • Columns: The number of columns can be set to 1 through 4
  • Rows: The amount of rows that can will be shown on one screen. Setting this to Auto will create one long, scrollable screen that shows all the block Icons. Example: If you have 12 blocks and you set the screen to have 2 rows and 2 columns, the home screen will be “paginated” into three screens. A small bar at the bottom of the screen will show which “page” is being viewed. The user can swipe left and right between them.
  • Row Height: the height of a single row. Make this at least 44 pixels otherwise it will be too small on the screen.

The amount of Columns, amount of rows and the Row height together define the space where a single block can be shown.

  • Position: Determines the starting position of the icons on the screen. You can choose between Top, Center, and Bottom. This setting also determines from which edge of the screen the Margin setting is applied.
  • Size + Padding: The Columns x Rows and Row height together define the space for a single block, a.k.a a cell. With Size and Padding you can define the space with one cell where block name, icon and icon background are allowed to be shown. Small size equals large padding means small icons. 

In the Text section you define the way the block name is shown on the homescreen. You can change a blockname at the Content tab, select a block, at the top of the center pane. 

  • Size Padding: define the part within a single ceel where the name of the block is allowed to be shown.
  • Fontsize: The fontsize of the block names.
  • Bold: Make the blocknames bold.
  • Alignment : defines the place in the cell where the blocknames will be shown. Most of the times this will be at the bottom. You can also choose to hide the blocknames 

In the Icon and Icon background section you see the fields that influence the icon. The icon is the image that is uploaded at every block and shown in the top left corner of the center pane on the Content tab. The icon should make navigating through the app easy for the user because he will recognize the image and doesn't have to read the block name.

  • Icon Size: Use this to set a general size for the icon. Adjusting the slider here also influences the values in the Padding section. 
  • Padding:To make more specific, tailored changes to the icon’s size and padding you can edit the padding for the Top, Bottom, Right and Left.
  • Alignment: to define where the icon in the cel will be shown.

The Icon Background is an image that can be shown behind the icons on the homescreen. You could also upload icons for every block that already contain the icon background, but keeping them separate will give you more freedom in changing the icon backgrounds and changing the app in an instant.

  • Default: Default state (color, shape) of the icon background.
  • Pressed: Pressed state (color, shape) of the icon background.
  • Size:Use this to set a general size for the icon background. Adjusting the slider here also influences the values in the Padding section. 
  • Padding: To make more specific, tailored changes to the icon background’s size and padding you can edit the padding for the Top, Bottom, Right and Left of the icon background.
  • Alignment: to define where the icon in the cel will be shown.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk