Adding button with Text dynamically to UI at runtime in Unity

Question

I am working with C# an Unity 5.6.1f1, I done a mechanism that on UI button click should add an additional button with text to Panel that is already on UI, and it does work... since I am able to see Object appear there

public void MakeButton(string direction)
{

    GameObject button = new GameObject();
    button.AddComponent<RectTransform>();
    button.AddComponent<Button>();

    var panel = GameObject.Find("CommandPanel");
    button.transform.position = panel.transform.position;
    button.GetComponent<RectTransform>().SetParent(panel.transform);
    button.GetComponent<RectTransform>().SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left,0,10);
    button.SetActive(true);
    button.layer = 5;

    //button.GetComponentsInChildren<Text>()[0].text = "New Super Cool Button Text";

}

problem is it isn't visible and reason for that I believe that there is no text there... now how do I know that...

I tried running the following button.GetComponentsInChildren<Text>()[0].text = "New Super Cool Button Text";

and it gave me

IndexOutOfRangeException: Array index is out of range. Hero.MakeButton (System.String direction) (at Assets/Scripts/Hero.cs:37) Hero.Down () (at Assets/Scripts/Hero.cs:14) UnityEngine.Events.InvokableCall.Invoke (System.Object[] args) (at C:/buildslave/unity/build/Runtime/Export/UnityEvent.cs:154) UnityEngine.Events.InvokableCallList.Invoke (System.Object[] parameters) (at C:/buildslave/unity/build/Runtime/Export/UnityEvent.cs:637) UnityEngine.Events.UnityEventBase.Invoke (System.Object[] parameters) (at C:/buildslave/unity/build/Runtime/Export/UnityEvent.cs:773) UnityEngine.Events.UnityEvent.Invoke () (at C:/buildslave/unity/build/Runtime/Export/UnityEvent_0.cs:52) UnityEngine.UI.Button.Press () (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/UI/Core/Button.cs:35) UnityEngine.UI.Button.OnPointerClick (UnityEngine.EventSystems.PointerEventData eventData) (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/UI/Core/Button.cs:44) UnityEngine.EventSystems.ExecuteEvents.Execute (IPointerClickHandler handler, UnityEngine.EventSystems.BaseEventData eventData) (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/EventSystem/ExecuteEvents.cs:50) UnityEngine.EventSystems.ExecuteEvents.Execute[IPointerClickHandler] (UnityEngine.GameObject target, UnityEngine.EventSystems.BaseEventData eventData, UnityEngine.EventSystems.EventFunction`1 functor) (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/EventSystem/ExecuteEvents.cs:261) UnityEngine.EventSystems.EventSystem:Update()

Also as you can see in the screenshot there is no triangle Under New Game Object like it is under Run which is also a button...

How do I add from the script Button that has Text on it to panel in Unity?

Answer 1

I highly advise you to instantiate a prefab instead of creating the button from scratch.

A gameobject with a RectTransform and button only won't be visible, and won't react to clicks, because you need additionnal components (such as Canvas Renderer and Image / Raw Image).

// Drag & Drop the prefab of the button you will instantiate
public GameObject buttonPrefab ;

public void MakeButton(string direction)
{
    // Instantiate (clone) the prefab    
    GameObject button = (GameObject) Instantiate( buttonPrefab ) ;

    var panel = GameObject.Find("CommandPanel");
    button.transform.position = panel.transform.position;
    button.GetComponent<RectTransform>().SetParent(panel.transform);
    button.GetComponent<RectTransform>().SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left,0,10);
    button.layer = 5;

}

Moreover, you have to be careful to one additional thing : when you ask Unity to create a button (Using GameObject > UI > Button), Unity creates several gameobjects (the button + child) with all the appropriates components (button, canvas renderer, text, ...).

Adding the Button component won't add all the other components and children Unity does. Thus button.GetComponentsInChildren<Text>()[0].text = "New Super Cool Button Text"; won't work (since you haven't added the child and its Text component in your script)

Additional note : Check this link if you have some problems with placing your object : https://docs.unity3d.com/Manual/HOWTO-UICreateFromScripting.html