How to create the UI button at Runtime through script?

Hi,

I have an UI canvas in my hierarchy, i have four buttons in my canvas panel by default. Now i need to add the some more buttons, when my scene is running(at runtime) through my script.

I don't know whether its possible or not, can anyone please help me whether we can do this or not?

if its possible kindly tell me how to do this?

 

1. Easy way: Create button prefab, instantiate button prefab and set its parent, add Button.onClick listeners, maybe change text and image if needed. Instead of button prefab you could use existing button.
2. Hard way: add GameObject, set its parent to Canvas, AddComponent<Button>, AddComponent<Image> (both Button and Image are from namespace UnityEngine.UI), set almost all of button and image parameters manually like sprite, onClick, etc. Maybe add Text component to child gameobject too.

If using layouts, setting position might not be needed as buttons will allign automatically when you parent new button to GameObject with Layout Component (horizontal/vertical/grid). Otherwise, also set new button position.

 

Thanks for you replay @Teravisor. Let me go woth your idea.
is there any unity pacakge or plugin to play around with the canvas button at runtime?

 

It's too simple for that and has too many use-cases to make a unified asset. First create a button (From top menu GameObject->UI->Button), then make that button a prefab by dragging it to assets.
Then simple code:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3.  
4. public class ButtonCreator : MonoBehaviour
5. {
6.     public GameObject buttonPrefab;
7.     public GameObject panelToAttachButtonsTo;
8.     void Start()//Creates a button and sets it up
9.     {
10.         GameObject button = (GameObject)Instantiate(buttonPrefab);
11.         button.transform.SetParent(panelToAttachButtonsTo.transform);//Setting button parent
12.         button.GetComponent<Button>().onClick.AddListener(OnClick);//Setting what button does when clicked
13. //Next line assumes button has child with text as first gameobject like button created from GameObject->UI->Button
14.         button.transform.GetChild(0).GetComponent<Text>().text = "This is button text";//Changing text
15.     }
16.     void OnClick()
17.     {
18.         Debug.Log("clicked!");
19.     }
20. }

Set this ButtonCreator's buttonPrefab to prefab you just created. Then create a panel and add Vertical Layout Group component to it ("Add Component"->"Layout"->"Vertical Layout Group"), set it to panelToAttachButtonsTo.

Now it will create button, position it on panel according to what's set up on layout group(you can play with its toggles) and will log "clicked!" when you click on button.

Assumes panelToAttachButtonsTo has VerticalLayoutGroup or HorizontalLayoutGroup or GridLayoutGroup component attached which will position button.

Maybe you might need to attach LayoutElement component to button and play with its values to get what you like.

 

where to call it please ?

 

It is automatically called in Start()

 

My button in Vertical layout group doesn't instantiate on the coordinates that I want it to instantiate on. Apparently, this line is not working except for instantiating at (0,0,0):

Code (CSharp):

1. GameObject button = (GameObject)Instantiate(buttonPrefab, new Vector3(250f, -250f, 0), Quaternion.Euler(0, 0, 0));

Any idea how to fix?

 

Buttons (and all UnityUI) completely ignores everything to do with Transform, transform.position, etc (*)... you need to learn a whole new way of positioning things, that is ONLY used for UI. The key term to google is "Unity RectTransform" (RectTransform is a "magic" thing that replaces Transform, while still being a Transform - and yes, this is confusing)

You will have to go through all the tutorials and learn how to use this layout system that Unity created.

(or, if you want something simpler/easier to use, you could get my asset that lets you use CSS/Flexbox instead - the free version is "CSS Flexbox LITE", or the full-featured version in my sig below)

(* - this is a slight simplification, but for most people's cases it's true.)

 

How can I add an argument to the function it calls?