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 allows 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 a basic understanding of Unity. I won’t be covering basic concepts like creating a 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 the 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 a 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
using UnityEngine;
using UnityEngine.UI;
public class ItemDetails : MonoBehaviour {
//Item Name
public Text text = null;
//Item Image
public Image image = null;
}
- 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
using UnityEngine;
public class ListCreator : MonoBehaviour {
[SerializeField]
private Transform SpawnPoint = null;
[SerializeField]
private GameObject item = null;
[SerializeField]
private RectTransform content = null;
[SerializeField]
private int numberOfItems = 3;
public string[] itemNames = null;
public Sprite[] itemImages = null;
// Use this for initialization
void Start () {
//setContent Holder Height;
content.sizeDelta = new Vector2(0, numberOfItems * 60);
for (int i = 0; i < numberOfItems; i++)
{
// 60 width of item
float spawnY = i * 60;
//newSpawn Position
Vector3 pos = new Vector3(SpawnPoint.position.x, -spawnY, SpawnPoint.position.z);
//instantiate item
GameObject SpawnedItem = Instantiate(item, pos, SpawnPoint.rotation);
//setParent
SpawnedItem.transform.SetParent(SpawnPoint, false);
//get ItemDetails Component
ItemDetails itemDetails = SpawnedItem.GetComponent<ItemDetails>();
//set name
itemDetails.text.text = itemNames[i];
//set image
itemDetails.image.sprite = itemImages[i];
}
}
}
- Now, Drag and Drop the respective components to their field as shown 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!
MEWKI
September 23, 2019HELLO, THANKS FOR THE TUTORIAL.
BUT IN “Write the Following Code in the ItemDetails Script” PART THERE’S NO CODE SHOWING.
Jayasurya A
November 20, 2019Sorry About that MEWKI. I’ve updated the blog. Now you can see the code.
UNITYSTUDENT
October 11, 2019this was a useful tutorial. well laid out and easy to follow. thanks for writing it.
Jayasurya A
November 20, 2019Thank You. Unity Student 🙂