Building Enterprise Apps with Unity (Part 1: Creating the User Interface)
In this guide I’ll walk through a tutorial of creating an enterprise style app for mobile within the Unity platform.
I have a project template already set up with the assets required for our app, so I’ll cover mainly the scripting required as in most cases the art assets for an enterprise app will be provided to you. But first, a few basic tips on setting up the UI:
Step 1: Create the homepage background. Create a new UI -> Image, name it background and set the rect transform to stretch all axes, resetting positions to zero. Replace the source image with your art asset. Because we will have multiple panels, organize the hierarchy by creating a new UI -> Panel, removing the image component, naming it Main_Menu_Panel and nesting the background image within it.
Step 2: Add a logo. Create another UI -> Image within the main menu panel and add in your logo file. Select preserve aspect ratio, set the rect transform to stretch, and reset the intended left/right padding to scale it to a reasonable size (close to the direction provided by your art guidelines).
Step 3: Create the main menu. We can duplicate this panel to create our next screen in the flow, which will keep the same logo but at 50% of the page size. Scale up the padding on the bottom axis of the rect transform on the logo image to move the logo to about the 50% mark. We then need to add a new UI -> Image to create a gray background on the bottom half. This can be done by changing the Color of the image to gray and adding a top padding of 500 to produce the following effect:
We can then add a few buttons (the background art for which has been provided) and update the text components to match our style guidelines:
This process is largely the same between each page just with different assets. Each page is created as a separate panel with the associated image, button, text, and field components inside as needed. Here are a few examples of panels with various input and output information, which we will process and update with code once the design is ready:
One of our pages (above) does have a scrolling requirement and this requires a few additional steps so I’ll walk through that process. Step 1 is to enter play mode as it is easiest to create scrolling effects while in play mode. Right click the canvas and create a new UI -> Scroll View. Drag the panel that needs the scroll effect into the content slot on the scroll view Scroll Rect component. Because this page only needs to scroll vertically, delete the Scrollbar Horizontal game object.
To reset the scroll bar position to start at the top of the page, select the Scroll View and anchor it to stretch all 4 sides, then set all padding to 0. To set the bottom bounds at which we will cut off page information, navigate to the scene view, select the transform tool, and drag the scroll view bottom edge up to the desired height.
Now select your panel background image and drag it to the bottom of the panel to be sure the background is not cut off while scrolling. To resize the scroll bar icon, open the Scroll View game object, select the Scrollbar Vertical child object and drag it into the Canvas parent and position it under the Scroll view object in the hierarchy so it is rendered on top. Change the anchor point to center and in the scene view drag the size down to an appropriate size. Reposition the reduced size scroll bar icon as needed.
Next we need to mask the lower content so nothing is seen below the threshold (indicated by the blurred area cutoff above). Inside the Scroll View object is a Viewport object and a Content child. Reset any padding offsets on the viewport object to 0. Delete the existing content object and drag the actual page content panel to be a child of Viewport. This should update your view to remove content in the clipped area.
If you have a header and footer overlay like I do be sure to reposition your overlay in the hierarchy to sit below your scrollbars to ensure it renders on top. Be careful to disable any Raycast Target on your headers overlay if they are causing conflict with your slider and preventing it from being used.
Now that everything is working as intended we can get back to editing outside of play mode. To save this setup, drag your canvas into the project window, exit play mode, delete the existing canvas from the hierarchy, and drag your prefab canvas into the scene. Now in the project view you can delete the prefab which will make our Hierarchy canvas red. Right click it and select prefab -> Unpack completely to revert it to a normal state. We can now implement the rest of our text objects and buttons. You may need to move your background image object outside of your scroll view Viewport so that it is not clipped by the scrolling effect.
UI Navigation
It’s time to connect our panels and begin to create a user flow. This can be done in two ways — the strict code route or by using the Unity Editor. With code you can have more control about the events but with a simple app like this it can all be done in the editor. I’ll use my first menu page as an example.
We have a find case button here on the main menu and when clicked, we want to enable the search case page. We can do this by adding an On Click event to the button, dragging in our search panel game object, and selecting to turn the set active bool for the game object to true.
We also want to enable our header and footer panel which has additional navigation buttons. The process is the exact same in creating a new On Click event just with the different object. We can go ahead and implement the rest of the navigation flow via this same method.
Here is an example flow for the Create A Case function of this app:
There you have it! Our insurance app UI is complete and ready for us to code in the behaviors that will control the flow of our data, which I will cover in the next guide. See ya there!
