Creating the User Interface of Your App

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Create the User Interface (UI) of your App

Creating the User Interface (UI) of Your App

Now that you have a plan to build your barcode scanner app, the building can begin. Some things to remember from previous units before diving into this lesson:

  • User interfaces are made up of views and components.
  • User activities should be grouped so that things the user will do at the same time are in the same view.
  • Components, also known as elements or artifacts, are the building blocks which enable you to do visual development.

Let’s start with a new project in SAP AppGyver.

In the application, go to the dashboard and choose Create New.

While we are working, I’ll also keep the project open on my phone using the SAP AppGyver Preview app, which you can find in all common app stores and download for free. If you don’t already have it, you should get it now.

It’s a good idea to use the preview app while building, so you can see the changes you’re making in real time, and test them out. In the demo, you’ll see that my default setting for the preview device is set to iPhone, but you can change this to match whatever device you are using.

Setting Up Pages and Adding View Components

First, we set up our pages and add the view components, so start with a new project in SAP AppGyver:

  1. Open SAP AppGyver and start a new project.
  2. Delete the default components so we can begin with a blank canvas.

    Since we already made the plan for our User Interface (UI), we already know what components we’ll be using and we don’t need the default options.

    All of the view components we need for this app can be found right in the SAP AppGyver Component Market, then dragged and dropped onto the view canvas.

  3. Select Button from the view components and drop it onto your screen.
  4. You can change the label of the button as it appears on the screen from the properties panel on the right. Cchange it to Scan Barcode.
  5. Save your changes.
  6. Check your phone. On the preview app, you’ll see the button that you've added, but it doesn’t do anything yet.

    For the text on our app, there are two things we want to show: 1) the name of the product and 2) number of calories.

    For this, we’ll use two paragraphs, which are also added as components.

  7. Select the Paragraph component and drop it on the canvas, just above the button.
  8. Do the same thing again for the second paragraph.
  9. Save, and we’re ready to move into implementing logic.


I hope you’re already amazed at how easy this is, you’ve just built your first layout of a mobile app user interface.

Save progress to your learning plan by logging in or creating an account