Building App UI- App Dev Series 2

Objective: using UI elements to create an app interface and create functional scroll bar.

When using Unity to create an app, there are some key function that you might need to use it. In this article, I will run through some core functions and share my tips of creating these UI elements.

Anchor points of UI

When creating the image, button, or text of UI elements, we need to focus on the anchor position. Since we are creating a mobile app, the screen ratio would be different depends on devices.
It would be safer if sets the anchor points to the whole screen area by clicking the bottom right button.

If press and hold Alt(for Mac, it would be Option), then it would scale the size to fit the whole screen.

As you can see, I’ve set almost every anchor point of elements in this panel to fill the screen size.

This would allow these elements will not dislocation when open on different devices.

And sometimes it might need some exceptions.
When create small icons or buttons that would not need to fill the whole screen, you can locate the anchor points of these elements at the corner of screen.

Overlay border

The display order in Unity would be: the elements which sorted in the bottom from Hierarchy, shows at the top of screen.
With this setting, when we need to create border or overlaying buttons, we need to put them at the bottom of the panel.

Or we can just create an empty object and dragging these elements need to be displayed on the top into it. And make this object at the bottom of Canvas in Hierarchy.

Setting the vertical scrollbar

It might be slightly complex to set the vertical scrollbar.
To create a scrollbar, when the contents of the panel which would be set the scrollbar is ready, right click on Canvas and create Scroll View.

Since we do not need to scroll this screen horizontally, we can delete the Scrollbar Horizontal.

Select Scroll View and set both anchor points and scale to fill the whole screen.

Then drag the panel you would like to use scrollbar, into the content column of Scroll View.

Once done, drag the Scrollbar Vertical our of Scroll View, then you can adjust the size of scrollbar.

Don’t forget to remove the Image component of Scroll View.

Then select Scroll View and adjust the rect size slightly cut through the panel, this would be the mask of panel.

Slightly cut through the bottom of panel.

Then delete the Content gameobject under Viewport of Scroll View.

And drag the panel as a child object of Viewport. You should see the mask effect on that panel.

You can enter Play mode to test the scrollbar.

If you are not able to scroll this panel, you might need to turn off the Raycast Target of your border image. This would block your mouse from the top of screen.

Once Scrollbar is finished, the rest setting of this panel would be simple.
Set the background image element out of this panel independently, and create a button at the mask edge of this panel.

Now you have a full functional vertical scrollbar of your app panel.