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

Question

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?

Answer 1

Best Answer

Answer by meintgames · Sep 09, 2014 at 07:04 PM

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

1 Show 3 · Share

StianC · Oct 10, 2014 at 08:18 PM 0

Share

At the top of the script you can always add

 using UnityEngine.UI;

That way you can just use the Toggle object type. Example:

 public Toggle someToggle;

pixelone · Nov 22, 2014 at 10:25 PM 0

Share

Thank you this was very helpful

chrissung · Jan 24, 2015 at 05:10 PM 0

Share

Worth noting (at least to me) that since ToggleGroup functions as component on a GameObject, one way to add is to use the Inspector, e.g. Add Component > UI > ToggleGroup

Answer 2

Answer by denisb · Oct 11, 2014 at 03:56 AM

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.

3 Show 1 · Share

sotirosn · Feb 14, 2016 at 08:14 PM 0

Share

When you add the toggle button it looks like a checkbox with a label on its right. To make it more button like you can change the text label to an image which overlays the background and checkmark. Then make the checkmark image the same as the background image but with a different color. I think the background image is something like UISprite. Then when you click the activate the toggle the colored background will display on top of the unchecked background but under the image label.

Answer 3

Answer by rageingnonsense · May 04, 2015 at 04:33 PM

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.

2 Show 1 · Share

Xtro · Jul 03, 2015 at 02:26 PM 0

Share

if you override pointer click event, you can't handle programatic isOn changes.

Answer 4

Answer by Xtro · Jun 26, 2015 at 09:55 PM

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 Show 1 · Share

Heigl · Jul 03, 2015 at 01:42 PM 1

Share

I lost the selection of Toggle-Buttons with SpriteSwap transition. This solved it! Thank you very very much

Answer 5

Answer by HarshadK · Aug 29, 2014 at 09:42 AM

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.

1 · Share

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

6 Replies

Unity Answers is in Read-Only mode

Follow this Question

Related Questions