Building Enterprise Apps with Unity

You probably already know that you can use Unity beyond game development. Unity’s UI system is easy to handle to create mobile applications. As a beginner project, we will be building an Insurance application where the user can create a new case or follow up an existing one. The application will also include some properties such as uploading a photo from your device and integrating the location with Google Maps.

Just like there’s art director’s guideline in games, we can design applications according to the art provided. Here’s a sample shot from the application visuals that we are going to build:

By creating a ‘Panel’ under the Canvas, we can easily create an easy window switching system. In other words, I will be creating a panel for each of the windows and place their UI elements as a child to their panels.

Here’s a shot from the Main Menu Panel:

You probably have notices that most of the applications (including this one) include a sub-menu on the bottom that enables you to switch in between application windows, reaching the home screen of the application and getting into settings if any.

Certainly, it would not make any sense to recreate all of these on each window. As you already know, Unity renders the UI elements from a top-down order. If you take a look at the ranking of your UI elements in the hieararchy, you will realize that between two elements, the one which is below will be visible in front of the other. Rather than using layer order system, we are going to order the elements accordingly. By setting the each panel on an off, we are going to create an easy transition in between different windows.

Adding A Scroll Function

Here’s the good thing with UI: we can create the scroll functionality in Play mode and then create a Canvas prefab once we are happy with it. Then, we can just delete the existing Prefab on the scene and drag-drop the updated one using the prefab we have created. In terms of assigning the desired scroll functionality, it is a good idea to build it in Game Mode.

To add a Scroll: Click on Add — UI — Scroll view. Select the source panel that you would like to use the scroll on (in our case, it is the case overview panel). If you do not need any of vertical or horizontal scroll, you can delete the regarding child object. In this application, we do not need the horizontal one so I have deleted the “Scrollbar Horizontal” game object.

To make sure that the scroll bar does not start from the middle of the screen, select the Anchor — Stretch on all sides and zero out the blanks. You will notice that Scroll bar will disappear as it now contains all of the data on the source. Scroll View game object’s size manipulates the slider. With the Rect tool, make it smaller from the bottom and it will reappear.

Then, you will notice that the background will not be reaching to the bottom once we scroll down.

So, make sure to stretch it to the bottom part of the scroll. We can also manipualate the Vertical Scroll’s location and size by dragging it out of its parent object.

Then, take the panel that we want the scroll on and drag it under the Viewport (child object of Scroll View) as a child object. To ensure that the menu on the bottom stays on, drag and drop the Border Panel after the Scroll View. If you realize that your scroll does not work, make sure to uncheck the Raycast Target on any UI element that is ranked the last. Despite it may seem tricky at first, you will get used to it in a few tryouts.

The rest is repeating the same process over and over again to create different windows. Just to note, for the place where Google Maps location will be appear, we need to use RawImage. And for the photo upload, a photo upload image will be shown which will be changed into an inactive RawImage after uploading the picture.