• Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Menu
  • Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Beginner > Foregrounds Tutorial
Foregrounds Tutorial
Beginner
  
December 16, 2020
  
Kevin Guan

Overview

A Foreground is a visual layer that is an easy and effective way to have consistent components added across your pages.

Similar to Masters, any Foreground that you have already created may be inserted onto a page, allowing you to quickly replicate common components and their layout across multiple pages. Whenever the Foreground is updated, all the copies you’ve inserted will also be updated.

In this tutorial, we will use a Foreground to build a simple navigation bar, that will be equipped with a hamburger drop-down menu, for our restaurant application.

Prerequisites

  1. Umajin Editor downloaded and installed

Instructions

Step 1) Create a new blank project in the Umajin Editor to use as a testing platform for our Foreground.

Step 2) Click on the Foreground tab at the bottom of the editor and add a rectangle component. This will act as the background for our navigation bar.
As the default color of the editor and rectangle are both white, we will change our rectangle component to #390000 so we can see it clearly.

Step 3) Once you are comfortable with the color, size, and positioning of the rectangle, we can now add our hamburger navigation menu. 

Step 4) By default, the hamburger menu will have 8 options, but for our application, we will stick to just 3. Each one of our options will have the action ‘Show Page’ attached to them and have them linked to their corresponding pages (which we will set up next).

Step 5) Head back to the Pages tab and create 2 new pages. Naming is important so that you know exactly which page is the one you want to link your show page action. You should now have 3 pages in total and named appropriately. Ours will have ‘Home’, ‘Restaurants’, and ‘Orders’. 

Step 6) Now we will add the Foreground to our pages. In the properties selection for each page, locate the ‘Foreground overlay’. Here you can select the Foreground design that you just made. 

Step 7) Now that the pages exist, we can link our actions to them. But first, create a simple design for each page so that you can easily distinguish them. 

Step 8) Head back to the Foreground tab and add the action ‘Show Page’ to each of your options. 

Then link the option to its corresponding page.

Step 9) Test it out by hitting play! Your Foreground should now contain a fully functional hamburger menu where each option will navigate you to their respective pages.

Foregrounds are very useful in creating interactive components that are consistent across multiple pages. As you know, a navigation menu is a must-have for any application. You can also get more creative with Foregrounds to add image layers for backgrounds or even text components.

For a more detailed tutorial or to watch a follow-along video on how to do this, visit https://help.umajin.com/creating-your-first-app/

  • Umajin
  • Developers
  • Support Home
Menu
  • Umajin
  • Developers
  • Support Home