Creating a Dynamic Scrollable List in Unity

Unity is a fascinating game engine which allows you to create games with minimal effort. Unity’s GUI system isn’t the best but surely not the worst. In this post you will learn how to create a dynamic scrollable list using the Scroll View Component. This will be useful if, for some reason you don’t want to use the default drop down list provided by Unity. Unity’s Canvas UI allow you to create anything that you want and it is not that complex to get started with as well.

The Plan

• Create a UI Canvas in a new Unity Scene.
• Add and Set Up UI Scroll View in the Canvas.
• Create List Item Prefab.
• Write Scripts to Create a Dynamic List.

How to Create the Dynamic Scrollable List

First, I am going to assume that you have the basic understanding of Unity. I won’t be covering basic concepts like creating project, game objects, or how to use inspector etc…

• Create a new Unity Project, it can be 2D or 3D.
• In the Sample Scene, Create a new Scroll View. This will create a Canvas and add a Scroll View object to it.

• Select the Scroll View object in hierarchy and in the inspector under Rect Transform set its Anchor Presets by holding Shift + ALT for Windows or Shift + Option for Mac to stretch in Width and Height

• Under the Scroll Rect Component Uncheck Horizontal.

• In the Hierarchy under Scroll View Object, Select Scrollbar Horizontal and Delete it.

• Select Content under Viewport, Right Click and Click Create Empty.
• Then, Select that Game Object and Rename it to “SpawnPoint”.

• Then, in the inspector under Rect Transform set its Anchor Presets of SpawnPoint by holding Shift + ALT for Windows or Shift + Option for Mac to Top Left.

• Now, Right Click on SpawnPoint and Create an UI Image.
• In the inspector first by holding Shift + ALT for Windows or Shift + Option for Mac set its Anchor Presets to middle stretch (To fit the width of the item with the scroll view’s width) and then select Top Left.
• Then set the Height of the Item Object to 60.
• In the Inspector now select Add Component and create a new script and name it “ItemDetails”.

Write the Following Code in the ItemDetails Script:

• Then, Create a UI Text and UI Image like in the Image Below.

Then, Drag and Drop Text and Image to the fields in ItemDetails respectively as shown below.

• Now, make Item Game Object into a Prefab by Dragging and Dropping it into the assets folder and Delete it from the hierarchy.
• Create a new Folder in Assets Folder and name it Images.
• Import three images to the folder and convert them to sprite.

• Now, Select the Scroll View Object in the hierarchy.
• In the Inspector now select Add Component and create a new script and name it “ListCreator”.

Write the Following Code in the ListCreator Script:

• Now, Drag and Drop the respective components to their field as show below.

Now hit Play.

Conclusion

This is a very basic way to create a dynamic list in which you can set the name and image. I hope that this was useful and hope that you see, how you can use this in your project. Keep Coding!