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!