How to make a scrollable list in Unity's New GUI

This is more for my future reference than anything else.

You can either watch an hour-long tutorial. Or you can look at this list of steps. Because it’s way too complicated for any sane human being to memorize.

Here’s the hour-long tutorial:

The following tutorial will make a scrollable panel with the following features:

  • Vertical scroll
  • Buttons (or any other content) have their preferred sizes
  • The scrollable panel automatically scales to fit the content
  • The content is clipped/masked using an image mask.

Here is your GameObject tree structure with names. I will be referring back to this. Create blank objects with this tree structure.

Panel
    Background
    ScrollView
        ScrollContent
            Button0
            Button1
            (other content)

Details

Here’s what each object does, the components it needs and the settings required:

Panel Object

Panel is just the parent. Stuff it wherever and change its size however you like.

  • Rect Transform Component. No specific settings required.

Background Object

A background graphic for your scrollable area. It’s not required.

  • Rect Transform Component (added automatically). No specific settings required.
  • Canvas Renderer Component (added automatically). No specific settings required.
  • Image Component. No specific settings required.

ScrollView Object

Sets up how the content is viewed.

  • ScrollRect Component. Set the Content to ScrollContent.
  • Mask Component. No specific settings.
  • Canvas Renderer Component (added automatically).
  • Image Component. Set an image to set up a clipping mask for the content in the scroll view.

ScrollContent

Deals with layout.

  • Vertical Layout Group Component. Disable force child expand Height.
  • Content Size Fitter Component. Set vertical fit to “Preferred Size”.

Button0, Button1 etc.

  • Layout Element Component. Set up the Min Height to something sane like 25
  • Any components you want, labels, buttons whatever

And that’s all you need to do to set up a vertical scrollable list!

If you want scrollbars, good luck.