Day 144 — Building the UI for the Enterprise App

Hey and welcome!

In this one we’re going to focus on piecing together our UI for our insurance claims app starting with the background. Starting from this point I’ll carry on these articles for this app assuming that you either have the assets from Filebase or you have your own that you can use and follow along.

Let’s get started, go ahead and create a new Image object for your app which you can find under UI. Rename this to “Background” and then set the anchor point to stretch and change the Rect Transform to 0 for all the values.

This will make the image fill out your whole screen and also makes it a good time to add in the background image as the source image. You can find this in assets > Images > BG Dark (you may need to change this into a sprite first).

To keep things organised we’re going to be separating our UI into different panels similar to what we did for our mobile 2D platformer. Go ahead and right click your Canvas and create a new Panel from the UI menu and then delete the image component on your panel. Rename this to something along the lines of “MainMenuPanel” and then drag and drop your background into this.

Next it’s time to add in the logo, go ahead and right click your new panel and add in a new Image object and call it “Logo”. Head over to assets > images > Splash Screen and add in the logo here as the source image and change the width to 318 and the height to 381.

Set the anchor to stretch and adjust the Rect Transform values so that your logo is on the top half of the screen. The values I used were Left 55, Top 0, Right 70 and Bottom 474.5.

Last thing we’ll do here is implement a grey overlay and our buttons that will sit in the bottom half of the screen. Let’s do the grey overlay first by creating a new image object in our panel and setting its anchor to stretch. Set your rect transform values to 0 except for the Top which will be 474.5 and then add in the GreyOverlay image to the source image which you can find in assets > images > Main Menu.

Next create a button object in your panel from the UI menu and add in the Button image from the same folder as your GreyOverlay as the source image. Set the anchor to stretch again and set all the rect transform values to 0 which is going to supersize our button. To fix this you can click on the Preserve Aspect option in the Image component and you can then adjust the Top rect transform value to get a position for your button that you’re happy with. We’ll need a second button as well so be sure to duplicate this and update its rect transform as well!

Inside your button objects you’ll find a text object as well, use this to increase the font size, change the font colour to white and have your top button read as “FIND CASE #” and the bottom read as “CREATE CASE #”.

You should be left with something like the above now which is not bad looking at all. There will be a few pages that need to be created from this point onwards so these articles most likely won’t be as in depth as the one today and may just show a picture of how the page is meant to look which you can follow along. With any new elements though I will go over what to do for those!