Unity UI: Easy Tabs (no scripting)

Today I would like to demonstrate a method I have devised to create Tabs with Unity's UI tools (v4.6 and up).  This implementation behaves similar to tabs seen in web browsers and numerous other applications.

For this tutorial you will need Tab sprites.  Below you will find the atlas I made (in GIMP) for my project.  This atlas is meant to be sliced into 3 64x64 sprites with all border values at 18 (the Unity manual has more information on canvas and sprite settings).  If you want to use this atlas right click and save as.

Tab Sprites Atlas

From left to right these sprites will be referred to as "Tab_Window", "Tab_Inactive" and "Tab_Active".

Step 1:

Add a new UI image (UI>Image) to your canvas and rename it (TabPanel), set the source image to Tab_Window and adjust the rect size and position to your liking.

Next, create an empty child to contain the tabs (TabContainer).

Step 1

Step 2:
Add a Toggle Group (Add Component>UI) and a Horizontal Layout Group (Add Component>Layout) to the TabContainer.

The Toggle Group will ensure that only one tab is active at a time, and the Horizontal Layout Group will control the size and spacing of tabs.

Set the TabContainer's Anchor to top-stretch (you can wait to set it's position until tab images are added).

Next, add a UI Toggle to the TabContainer.

Step 2

Step 3:
The Toggle will be your first Tab, (renamed "TabOne").

Select the Group field and choose the TabContainer.

Step 3

Step 4:
Change the Background's Source Image to Tab_Inactive, set it's Anchor to stretch and set it's dimension values to zero.

Rename Checkmark to "Active", change it's Source Image to Tab_Active, set it's Anchor to stretch and set it's dimension values to zero.

Center the Label and change it's text to the tab's name.

Next, adjust the TabContainer's position so that the bottom of the new tab aligns with the top of the TabPanel.

Step 4

Step 5:
Duplicate the tab (Ctrl+D) to add more tabs.

Adjust The TabConatiner's Horizontal Layout Group spacing to you liking.

Uncheck "Is On" for all tabs but the first.

Rename and change the Label text of your tabs.

Step 5

Step 6:
Create content containers for your tabs (empty game objects).

Add UI elements to the containers (text, buttons, images, etc).

Add a new action (+) to the On Value Changed (Boolean) listener on each tab.

Set the corresponding content container as the target object for each action.

Disable all the content containers except the one corresponding to the active tab.

Choose GameObject>(Dynamic Bool) Set Active as the function.

Step 6

That's it! Each tab will now activate it's content when selected, and deactivate it's content when a different tab is selected.