Journal 121 — Unity App Development, Setup Part 2
Objective: To prepare part of the UI and layout of an app
In the previous article, we started setting up a basic Amazon Web Services (AWS) account and login in order to build an app to store and recall data. In this article, I will go over the setup of a couple of screens for the app layout.
Background
First, we want to add a UI image for background. This can be any color or pattern of your choosing. On the Canvas Scaler, make sure to change the UI Scale Mode to Scale to Screen Size, and use X:1080 and Y:1920.
Next we want to add a UI Panel for the Main Menu, then remove the Image Component on the UI Panel, then drag the Background object so it’s a child of the UI Panel.
Logo
Next, we can add a logo for the app. This can be of any type you prefer. Make sure to set the anchors to stretch the logo to the screen and scale, and move the logo up on the screen to make room for buttons.
I will add another UI Image for an overlay area over the bottom part of the screen as the background for some buttons, but this is optional.
Buttons
Now in the Overlay area I will add a couple buttons for this app. You can size them and use whatever image source and text you would like.
Search Panel
Now, I will make the next panel to search for a case number. I will start with creating a new UI Panel and UI Image for the borders.
I will add a smaller logo to the search panel in the top of the screen.
Then I will add another gray overlay similar to the main menu screen, but this one can be stretched to fill the entire screen, and moved in the hierarchy.
Next, I will add some UI Text and a UI Input Field to the search panel.
After this, I will add a search button and home button.
The last part of the search panel is to add buttons at the bottom of the screen for left and right, and a menu/settings button.
One additional refinement is to separate the top logo and bottom buttons into their own panel, as they will be reused on other screens.
Thank you for your time!
