Prototyping UI in Unity Part 5 — Creating the UI Navigation Bar

Published in

Design + Sketch

9 min readFeb 11, 2018

Now that you have a basic understanding of Unity UI concepts, we can now begin to apply those ideas towards a practical example. In the introductory article, I gave a preview of the prototype app we will be building, this Instagram-like photo app found here.

Tips for designing for Unity

I designed this in Sketch, but really any design application can be used. There’s really no limitations to what you use to design. In my everyday workflow, I use a mixture of Sketch, Photoshop, and Illustrator, since one software is usually better at one thing than the other.

But regardless of what you use, there’s a few best practices when designing for Unity.

For a prototype targeted for a phone, design at 2x. For example, for an iPhone, design at 750x1334 instead of 375x640
For a prototype targeted for a high density tablet, design at 1x. For example, for an iPad, design at 1024x768 instead of 2048x1536.

Abiding by these rules, ensures that your designs will look consistent across all devices, without the need for exporting multiple assets at different scales or managing large source files.

Tips for designing within Unity

When recreating your designs in Unity, there’s a few general rules to follow to ensure your designs will look as expected.

The canvas reference resolution on your Canvas component and the pixel dimensions of your design source file should be exactly the same. For example, if your target device is a landscape iPhone 8, both should be 750x1334.
Use the Rect Transforms Height and Width to size your GameObjects, not Scale.
Depth is opposite to typical design tools, meaning that a GameObject that’s lower in the Hierarchy is higher in depth. So if something is hidden that shouldn’t be, it’s most likely incorrectly placed in the Hierarchy.
Save your Scene often! This is just good practice all together, but you don’t want to lose anything if Unity crashes.

Recreating the UI in Unity

If you’re using Sketch, you can download the source file here.

In our Unity PhotoApp project we started previously, delete the GameObjects inside the Canvas that were added in the previous tutorial.

After deleting everything inside the Canvas, the Hierarchy should look like this:

Set up the Unity Canvas and Game View to Mirror the artboard size

In the source file, you’ll notice that the artboard dimensions are 750x1334. In Unity, we’ll match those dimensions so our pixels will be exactly the same.

Ensure that the Canvas is using the same Reference Resolution:

And that your Game View is set to the same:

Creating the bottom navigation

The bottom navigation is shared by both screens, so we’ll start by building that first.

This bar will contain the Home and Profile buttons and will eventually be hooked up to toggle between those two pages.

Tip: Another easy way to add a UI GameObject is by right-clicking the object you want to add an element to in the Hierarchy

Add an Image to the Canvas and rename it NavBar.

This will be the container that will hold our buttons. You can either just refer to the Sketch file and input the same values in Unity, or you can use this pixel spec:

The bottom navigation needs to anchor to the bottom of the canvas. Start by selecting the NavBar object in the Hierarchy and click the Anchor presets button in the Rect Transform component.

Then hold shift and alt/option and click the bottom stretch option.

This will snap the object to the bottom and also make sure it stretches horizontally to the Canvas and adjust on any device width.

According to the pixel spec, the height of the bar is 82, so change the Rect Transform to reflect this.

Change the Color of the NavBar Image to #FAFAFA

To add the 1px stroke to the top of the NavBar, we will create another Image GameObject inside of it and anchor it to the top.

Right-click the NavBar and add a UI Image inside it. Call it TopLine.

To anchor it to the top of the NavBar, you follow the same technique as anchoring objects to the Canvas. Go into the Anchor Presets, hold shift and alt/option and select the top stretch option and set the Height to 1.

Change the Color in the Image Component to #D1D1D1

Preview it in the Game View and it should look like this:

Test it in any of the device resolution to make sure it’s horizontally stretching properly.

Creating the Layout Group to Hold the Buttons

If you refer back to the pixel spec, there are two buttons that are 40 px apart. To create this easily, we’ll be using a Horizontal Layout Group, which we learned about in the last article. Adding a Horizontal Layout Group on the NavBar object will make all the objects inside it adhere to its parameters, making it a nice easy way to automatically lay out multiple objects.

But since we don’t want TopLine to be part of this layout (since it’s nicely anchored to the top of the NavBar) we need to add a Layout Element component that says to ignore this.

Select TopLine in the Hierarchy, click Add Component, type Layout and select Layout Element.

Check Ignore Layout.

This will make sure that it will ignore any Layout component added to it’s parent object and retain it’s expected appearance.

Now we can add the Horizontal Layout Group to the NavBar by selecting it in the Hierarchy add adding the component in the Inspector.

Change the Alignment to Middle Center since we want this middle aligned. Uncheck Child Force Expand, Width and Height since we want our buttons to have a fixed size. Child Controls Size is useful when you are dynamically adding children to a layout group. In this case, we don’t have many children to add and they will all be manually added, so we can keep this unchecked.

Creating the Home button

There’s a couple ways to add buttons in Unity. One is through the GameObject top pull down menu. The other similar way is through the right-click menu in the Hierarchy. Both of these add a predefined button, with a default image and text label, which looks like this:

This is fine for placeholder buttons, but for more custom versions like this example, it’s sometimes easier to just create your own.

Like I mentioned in a previous article, different variations of UI in Unity are defined by what components they use. For example, an Image is just a Rect Transform with an Image component. A button in Unity is simply a Rect Transform with a Button component. Generally, a button should also contain an Image component so it has an actual defined tappable area.

So let’s create our first button by right-clicking the NavBar object in the Hierarchy and adding an Image.

Rename the new image BtnHome and save your scene to see the image adjust to the Horizontal Layout Group. It should look like this:

With BtnHome selected in the Hierarchy, change the Height and Width to 50 x 50 to match the pixel spec. Then click the circle to the right of the Source Image parameter in the Image component to select the Home Icon.

With BtnHome still selected, click Add Component, search for Button and add a Button component.

Congrats, you just made a Unity Button! For now it doesn’t do anything since we haven’t really hooked it up yet. But to make sure we know it is handling taps, we can make the Press color state more obvious.

Change the Color on Press

In the Button component, click the Pressed Color and change the Alpha to 100.

Play Mode

Once you start adding interactive objects like buttons, to test them out you need to press Play to run Unity. If you have the Game View docked, it will automatically bring it to focus where you can interact with your UI.

Important! No changes will be reflected to your project in Play mode. So it’s critical to remember to press play again to exit play mode before you start editing your work again.

Tip: I also highly recommend setting a color tint to your play mode inside your Unity Preferences. This will make it obvious when you are or aren’t in Play Mode.

So let’s change ours to red, just so it’s obvious we’re in Play Mode. I used #F81B1BFF to be exact, but you can use any color you want as long as it’s noticeable.

Now Press Play at the very top of the Application and click the home button to see the colors change.

Creating the Profile button

Now that we know that works, we can duplicate it and create the Profile button.

Make sure you click Play to exit play mode and select BtnHome in the Hierarchy.

Press ⌘-d (Ctrl-d for Windows) to duplicate BtnHome and Rename it BtnProfile

Now change the Source Image to use Profile1.

Adjusting the Spacing in the Horizontal Layout Group

We’ve successfully added two custom buttons, but they look really close together. If you refer back to the pixel spec, the distance between the two buttons is 40 px. To set this, select the NavBar GameObject in the Hierarchy and set the spacing to 40.

Press Play to test out both buttons

Conclusion

To summarize, we began to apply some of the concepts learned in the previous tutorials to a practical example. By doing this, you hopefully start to get more comfortable with adding components, anchoring and layout groups and also see how these concepts work in a real-life situation.

The next article will continue to build upon these techniques to create the scrollable photo feed.

Once again, if you want to just download the final project you can right here: https://github.com/marianomike/unity-prototype-photoapp

So be on the look out for the next article! And if you have any questions, feel free to contact me.

Email: mike@uiuxartist.com
Twitter: https://twitter.com/marianomike