Make a Button Behave Like a Toggle

Questions & Answers
1

Hello!
I am working with the unity Gui and have run into a interesting problem. I want to make a button behave like a toggle or make a toggle appear like a button. I know about GUI Skins, but can’t see any way to change the appearance of a toggle appear that drastically.

Thanks.

5

It’s a very old question, but if anyone search for the answer, there’s a simple way to do this.

Use a GUI.Toggle and set its style as “Button” :

bool pressed = true;

OnGUI() {
  pressed = GUILayout.Toggle(pressed, "Toggle me !", "Button");
}
4

I ended up adding new skins for each state of the button and not using a toggle becuase it was harder to edit to look like a button. I had a function that decided what skin the button should have before it was drawn in onGUI().

2

Look at the documentation on GUI Buttons. You can apply a texture to the button to make it appear how you like.

3

Hi Randmuser,

Here is a similar example from Sue Blackman’s book, “Beginning 3D Game Development with Unity”, page 468. She makes a GUI object look like a box, but behave like a label by creating a custom GUI style that looks like a box control and then adding it to a label control using the label’s style parameter. Here’s the code:

var boxStyleLabel : GUIStyle; // make a label that looks like a box

now change this line:

GUI.Box (Rect (Screen.width/2 - 250, Screen.height - 37, 500,35), " This is the text string for a Box Control ");

to this:

GUI.Label (Rect (Screen.width/2 - 250, Screen.height - 37, 500,35), "This is the text string for a fake Box Control", boxStyleLabel);

Maybe you can do something similar with your buttons and toggles.

Zaffer

`

6

You can use if statement then with modulus (%),
for example, if(counter%2==0), this is toggle button.
If you have three conditions, you can use if(counter%3==0) ,
four conditions you can use if(counter%4==0)

so every time the button is clicking, counter ++,

Here, I recommend you a simple video for toggle button using UI button, video tutorial

example script is as below, every simple and easy to understand.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class textBtn : MonoBehaviour {

	public Text mytext = null;
	public int counter = 0;
	public void changeText()
	{
		counter++;
		if (counter % 2 == 1) {
			mytext.text = "Pause";
		} else {
			mytext.text = "Start";
		}
	}
}
7

2022 solution here:

I needed to do such a thing for selecting custom tools like in a Collider component inspector.
197553-unity-emdlfefjue.gif

The simple way of doing this is to use

EditorGUILayout.EditorToolbarForTarget(EditorGUIUtility.TrTempContent("Edit"), this);

which draws a series of buttons for all the available tools of the given component.

Internally, this series of button is created like this:

// The whole element is made of a label and one or more selectable buttons in a horizontal layout
using (new EditorGUILayout.HorizontalScope())
{
	// Draw Label
	EditorGUILayout.PrefixLabel("Edit 2");

	// Start Change check to see if we clicked on an already selected button
	EditorGUI.BeginChangeCheck();
	int prevIndex = index;
	// Draw "Toolbar" (a group of selectable buttons). "AppCommand" is the style used for the Tools toolbar
	index = GUILayout.Toolbar(index, new[]{ EditorGUIUtility.IconContent("Profiler.Video") }, "AppCommand");
	// Enter the condition if a button is pressed (even an already selected one)
	if (EditorGUI.EndChangeCheck())
	{
		// if we clicked on the same index, deselect it
		if (index == prevIndex)
			index = -1;
	}
}

which gives me the same result as the first solution:
197554-unity-l3zompjgk4.gif

source used:

CapsuleColliderEditor.cs

EditorToolGUI.cs