How do I create a button that toggles with the 4.6 UI?

Questions & Answers
1

I’ve been setting up my UI with the new UI released with the 4.6 beta and I can’t seem to figure out a way to create a button that toggles. There is a button that you can press, and a check box, but no button that toggles.

I am essentially trying to have a button that I can press once and change the shape of my player, and then press it again to return the player to it’s original shape. I also would like the graphic to toggle as well.

Am I missing something simple, or are toggle buttons not supported?

4

There is toggle in unity 4.6, with the new UI system, really easy to use.
Just create a canvas right click on hierarchy then UI->Canvas
Then right click on Canvas and UI->Toggle

if you want a toggle group, you can create an empty gameobject and add toggle group component to it, then for each toggle you created that you want inside that group, just link the group you just created on your toggles.

5

This question was answered a long while ago, but it is the top result on google when searching for toggle buttons, so I am adding my solution here.

I had need for a color change, not a graphic change. the standard toggle does not handle this properly. Use the following overridden class in place of the standard Toggle if you want the capability to toggle the color state:

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

public class ToggleButton : Toggle {
    public override void OnPointerClick(UnityEngine.EventSystems.PointerEventData eventData) {
        base.OnPointerClick(eventData);

        // override the color such that the toggle state of the button is obvious
        // by its color. 
        if (isOn) {
            image.color = this.colors.pressedColor;            
        } else {
            image.color = this.colors.normalColor;           
        }
    }
}

Now the pressed color will be persistent if the toggle is on. Your highlight color should match the normal color if you do not want the last selected button to have a different color.

6

This is better implementation and handles the programmatic isOn changes too.

using System;
using UnityEngine;
using UnityEngine.UI;

class ToggleButton : Toggle
{
    #region Inspector
    // ReSharper disable InconsistentNaming
    Sprite normalSprite;
    // ReSharper restore InconsistentNaming
    #endregion

    protected override void Start()
    {
        base.Start();

        normalSprite = ((Image)targetGraphic).sprite;
        onValueChanged.AddListener(value =>
        {
            switch (transition)
            {
            case Transition.ColorTint: image.color = isOn ? colors.pressedColor : colors.normalColor; break;
            case Transition.SpriteSwap: image.sprite = isOn ? spriteState.pressedSprite : normalSprite; break;
            default: throw new NotImplementedException();
            }
        });
    }
}
2

As far as I know, there is no toggle button as you want in new Unity 4.6 beta.

But you can easily create one if you want.

Have two Buttons placed at the same position so that one button will overlap another.
Now write a script that will switch between these two buttons when any of that button is clicked. You can set different sprites for each button to show different states. And you can also perform the action of switching player’s look when one button is clicked.

3

Indeed it’s easy to create one, but there actually is a Toggle button in 4.6 and even a ToggleGroup for radio buttons.

I used it in 4.60b17 and it’s called UnityEngine.UI.Toggle, but I can’t find any documentation about it

7

Forgive the resurrection of an old thread. Although a toggle is nice, here is another alternative script to make the UI Button toggle. This could be tweaked to toggle animation, color tints, or even handle button click events to pass the toggle state of the button.

using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Button))]
[RequireComponent(typeof(Image))]
public class ButtonToggle : MonoBehaviour
{
    public bool IsEnabled = true;

    public Sprite EnabledGraphic;
    public Sprite DisabledGraphic;

    private Button button;
    private Image image;

    void Start()
    {
        this.image = GetComponent<Image>();
        this.button = GetComponent<Button>();
        this.button.onClick.AddListener(OnClick);
        SetGraphic(IsEnabled);
    }

    private void OnClick()
    {
        IsEnabled = !IsEnabled;
        SetGraphic(IsEnabled);
    }

    public void SetGraphic(bool enabled)
    {
        image.sprite = (enabled) ? EnabledGraphic : DisabledGraphic;
    }
}