Dashboard

What is the Dashboard?

The dashboard is your 'home' screen (activity), where users can navigate through all the activities (features) in your app. If you've chosen "Show dashboard" as the Startup Mode, this is what your end users will see the first time they launch your application.

The dashboard will display items representing each activity that you have added to your application. The items are constructed using the name of each activity, an optional subtitle and description, and the image or drawer icon that you assigned to it. These settings are configured on the individual activity's properties page.

Startup

Startup Mode
The startup mode controls which initial screen ('home' screen) will be shown when the user launches your app.

  • Show dashboard - Show the dashboard when launching the app.
  • Show first activity (no dashboard) - Show the activity with the lowest "Position" from the activity list (Activities tab).

Dashboard Settings

Dashboard Name
The name that you want to use to represent the dashboard on the Navigation Drawer. For example, "Home".

Item Style
The item style you want to use to represent the activities in your app. Choose from styles such as cards, grids, and lists.

You can see screenshots of all the dashboard item styles to help you pick your favorite look.

Show Banner Ads on Dashboard
This setting controls whether or not banner ads will be shown at the bottom of the dashboard when Banner Ads are enabled. You can configure Banner Ads on the Monetization tab of your Andromo project.

Show Social Sharing Button
This setting controls whether or not a share icon will be shown on the dashboard. This option enables your users to share a link to your app in the chosen app store.

Note: The format of the generated link used to share your app is automatically converted to the proper location based on the chosen "Target Market" setting on your project's "Settings" tab. See the Settings article for more information about that setting.

Dashboard Theme

Theme Mode

  • Global - Use the project's Global Color Settings for the dashboard's colors. These colors are defined on the "Theme" tab of your project.
  • Custom - Enables the Custom Theme Colors settings allowing you to choose what colors you want to use on this dashboard.

 Custom Theme Colors
The following settings are available when "Custom" Theme Mode is selected:

Primary Color
The primary color you want to use for the dashboard. The primary color is generally your app's "branding" color. It is used for toolbar backgrounds and to represent activities when images aren't provided.

Accent Color
The accent color you want to use for the dashboard. The accent color is used for parts of the UI such as buttons/gadgets and hyperlinks (where applicable).

Body Style
This setting controls what colors are used in the "body" of dashboard content, such as it's background and text color.

Material Light - Use the standard Material colors for a body with a light background.
Material Dark - Use the standard Material colors for a body with a dark background.
Custom - Enables the Custom Body Colors settings, allowing you to set a custom Window Color, Background Color and Text Color.

Custom Body Colors
The following settings are available when "Custom" Body Style is selected:

Window Color
The color you want to use for the bottom-most window background (i.e. the area 'behind' cards). You can think of this color as being /behind/ the Background Color. It will only be visible when it isn't obscured by the Background Color -- for example, the window color becomes visible when a "card" item style is used.

Background Color
The color you want to use for the background of areas where text may be shown (e.g. the card background color).

Text Color
The color you want to use for all body text, including primary and secondary text. Opacity is applied to different text levels automatically per material guidelines.

Dashboard Images


This section allows you to provide the images to show on the dashboard and that will be used to represent it.

Background Image
The background image is an optional image that can be shown behind the dashboard's content.

  • None - Don't use a background image.
  • Inherit from theme - Use the global theme's background image.
  • Custom - Enables the Custom Background Image Settings section of settings allowing you to upload a background image for the dashboard.

Custom Background Image Settings
The following settings are available when "Custom" Background Image is selected:

Upload a Background Image
Allows you to upload a background image. Click the "Browse" button to select an image file from your computer. The selected image should be a maximum of 1440x1440, 1.5 MB, JPG or PNG format.

Background Image Effect
Applies a filter to the background image when it is shown in the app, changing the color of the image automatically. This can help improve the contrast of text drawn over the background image -- for example, darkening the background to improve the readibility of brightly colored text.

  • None - No filter (show the original image unchanged).
  • Darken - Darken the image by 40%, i.e. scale the original color into [0-153] instead of [0-255].
  • Lighten - Lighten the image by 60%, i.e. scale the original color into [153-255] instead of [0-255].
  • Midnight - Darken + Greyscale.
  • Twilight - Lighten + Greyscale.
  • Greyscale - Convert all colors to shades of grey, i.e. desaturate the image.
  • Tint - Modify the image so it takes on the current primary/automatic toolbar color.

Feature Image
The feature image is an optional image that can be shown as the background of the dashboard's toolbar or at the top of the content (outside of the toolbar).

  • None - Don't use a feature image.
  • Inherit from theme - Use the global theme's feature image.
  • Custom - Enables the Custom Feature Image Settings section of settings allowing you to upload a feature image for the dashboard.

Custom Feature Image Settings
The following settings are available when "Custom" Feature Image is selected:

Aspect Radio
The aspect ratio of the area where the feature image will be shown. This setting controls the initial height of the toolbar when using an Expanded toolbar style, or the height of the feature image outside a Standard toolbar.

Upload a Feature Image
Allows you to upload a feature image. Click the "Browse" button to select an image file from your computer. The selected image should be a maximum of 1440x1440, 1.5 MB, JPG or PNG format.

Wide Image

  • None - Don't use a wide image.
  • Inherit from theme - Use the provided Wide image from the theme.
  • Use feature image - Use the provided Feature image when a wide image is requested in an interface.
  • Custom - Specify a wide image to use. Selecting this option enables the Custom Wide Image Settings section containing the settings to use for a wide image.

Custom Wide Image Settings
The following settings are available when "Custom" Wide Image is selected:

Upload a Wide Image
Allows you to upload a wide image (16:9 aspect ratio recommended). Click the "Browse" button to select an image file from your computer. The selected image should be a maximum of 1440x1440, 1.5 MB, in JPG or PNG format.


Square Image

  • None - Don't use a square image.
  • Inherit from theme - Use the provided Square image from the theme.
  • Use wide image, cropped - Use the provided Wide image when a square image is requested in an interface.
  • Use feature image, cropped - Use the provided Feature image when a square image is requested in an interface.
  • Custom - Specify a square image to use. Selecting this option enables the Custom Square Image Settings section containing the settings to use for a square image.

Custom Square Image Settings
The following settings are available when "Custom" Square Image is selected:

Upload a Square Image
Allows you to upload a square image (1:1 aspect ratio). Click the "Browse" button to select an image file from your computer. The selected image should be a maximum of 1440x1440, 1.5 MB, in JPG or PNG format.

Drawer Icon
The icon you want to use to represent the dashboard on the navigation drawer.

Dashboard Toolbar

Toolbar Mode

  • Global - Use the Global toolbar settings from the Theme tab of your project.
  • Custom - Enables the Custom Toolbar Settings section of settings allowing you to customize the toolbar style for the dashboard.

Custom Toolbar Settings

Toolbar Style

  • Standard - Use a standard toolbar with a solid color background. If a feature image is enabled, it will appear "outside" the toolbar, and will scroll beneath it as the dashboard contents are scrolled.
  • Compact - Use a compact toolbar. A compact toolbar is similar to the standard toolbar, but with support for showing the feature image as the toolbar background, appearing "inside" the toolbar.
  • Expanded - Use an expanded toolbar which is a collapsible toolbar that starts out expanded. If a feature image is enabled, it will appear within the expanded toolbar, and collapse along with it.

Scroll Behavior

  • Always visible - Keep the toolbar visible when scrolling dashboard content.
  • Auto hiding - Automatically hide the toolbar when scrolling dashboard content.

Show Advanced Settings
Shows or hides the Advanced Toolbar Settings for the selected style containing settings such as the Background Type, Background Color, Background Color Preference and Primary Toolbar Text/Icon Color.

Advanced Toolbar Settings

Background Type
This setting is available when "Compact" or "Expanded" Toolbar Style is selected.

  • Color - Use a solid color for the toolbar background.
  • Feature Image - Use the dashboard's feature image as the toolbar background.
  • Feature image morphing to color (Expanded Toolbar style only) - Morph the dashboard's feature image into a solid color as it collapses.


Background Color

  • Primary - Use the global Primary color as the background.
  • Automatic - Automatically select a background color based on the provided Feature Image.
  • Nearest material primary - Automatically select a background color based on the provided Feature Image, but use the nearest primary color from the material palette (subset of recommended primary colors).

Background Color Preference
This setting is available when "Automatic" or "Nearest Material Primary" Background Color is selected.

  • Automatic - Automatically select a light or dark color based on the overall "darkness" of the provided Feature Image.
  • Light - Use a "light" color for the background. If no light color is available, the primary color will be used.
  • Dark - Use a "dark" color for the background. If no dark color is available, the primary color will be used.

Primary Toolbar Text/Icon Color

  • Automatic - Automatically select a color for the toolbar text and action icons based on the primary color.
  • Custom - Enables the Custom Toolbar Text/Icon Color setting allowing you to choose a custom color for the toolbar text and icons.

Custom Toolbar Text/Icon Color
The color you want to use for the toolbar text and icons. This setting is available when "Custom" is selected as the Primary Toolbar Text/Icon Color. This setting is ignored unless Background Color is set to "Primary."

Follow
Was this article helpful?
1 out of 3 found this helpful