Journal 122 — Unity App Development, Setup Part 3

Objective: To add additional UI screens

In this article, I will add the rest of the UI screens for the find a case file part of the app.

Case Select

I will start with a new screen to display the selected file. Recall the previous screen is the search panel.

I will add a small amount of UI to show the information from the search results and an Accept button. The information results is just some default text until we write the script.

Overview Panel

Now we will create the overview panel which will contain all the data we want to pull from AWS. We will need to have a scroll bar on the side of the UI to show all the information, and we want to limit the viewable area to not include the top logo and bottom navigation buttons. We will add this a little later.

Then we can add several text fields for all the data.

Now I will add a UI Raw Image so that we can show a photo in the app.

Scroll View

Let’s add the Scroll View object and set this up while in Play Mode so we can test the functionality live.

We can stretch the scroll view to the app size. I will also remove the horizontal scrollbar, and adjust the Scrollbar Vertical to make it a little larger.

One more adjustment to the Scrollbar Vertical is to modify the overall height so it does not cover up the top logo area.

Mask

Next, we want to mask the content near the bottom of the screen to the scroll view. We will need to delete the Content object under the Viewport, and replace this with the Overview Panel object. Then we will need to rearrange the Hierarchy slightly, by moving the Border Panel to the bottom of the Hierarchy so it renders on top, and also check the Border Panel content and make sure if there is an Image component, that Raycast Target is deselected. (After troubleshooting I found I had an Image component on the Border Panel which was unnecessary and deleted it, so the scrollbar works).

As you can see above, the Viewport object needs to be adjusted to the right to fill the app view (it was previously set to the edge of the vertical scrollbar which we moved and resized). However the Viewport says some values are driven by ScrollRect, which is on the parent object. We can simply delete the reference temporarily, fix the size, and drag the reference back.

Last task before going any further is to drag the Canvas to the Assets, which will create a prefab. Then stop Play Mode, delete the old Canvas in the Hierarchy, drag the prefab into the Hierarchy, and delete the prefab from the Assets. This will break the prefab, so right click on the prefab and unpack completely to fix it.

Below the photo, we want to have a spot for a UI Text object called Photo Notes. In order to see this, we can move the Scrollbar Value from 1 to 0 to work in the space below the photo.

The last update is to add a Back button in the blank space below the scroll area.

Thank you for your time!

In the upcoming articles, I will go over filling out the rest of the panels for the app, specifically to create a new case file panel, the map location panel, and the take a photo panel.