Toggle the Images on Toggle Button .

I want to change the image of a toggle button , different images for on and off button , I can do the image change in code but I think it should be done with UI.
76797-screen-shot-2016-08-24-at-92345-am.png
The first image shows my toggle button hierarchy and second shows the toggle component off the Music Toggle GameObject , so i have dragged the gameObjects Music On and Music Off to the Graphic and Target Graphic Slot . I can see only one at the time when game is not playing , but in play mode one image toggles (present or not present) but one image is always present. Is it the way it is supposed to be . I don’t know how to do it in UI.

For the toggle, expand the toggle node. You will see the Background node.
Expand the Background node then you will see the Checkmark.
Click on Checkmark and set the source image to your On Image.

Next, click on the Background node and set it’s source image to your Off Image.
Then go back to the Toggle node, set your Transition to Sprite Swap, set the Target Graphic to Background from the scene list, set the Pressed Sprite to your Off Image.

Next, make sure ‘Is On’ is checked and lastly set Graphic to Checkmark from the scene list.

This is if you want to start your scene with the option on.

You can change it within the inspector, set Transition to Sprite swap.

Toggle did not work for me either in this case …

What i did :
make a button that has a simple uisprite background as its image and delete the text
here u can set the background colors and transparencys etc

then make a child of the button : an image. - this image will contain the symbols of your button (sprites in my case) which you wish to switch.
In the class where you invoke ( on button pressed ), you include this image as public and assign it in the editor.
and also get the two sprites into the class, which you assign the two sprites to.
then all you need to do is swap the sprite for the image.

make sure you only raycast the button and not the image with the symbol.
hope this helps …
i made an audio play / pause button like this (took me a while, and it was nice to know that the above answer does NOT work :),Toggle did not work for me either in this case …

What i did :
make a button that has a simple uisprite background as its image and delete the text
here u can set the background colors and transparencys etc

then make a child of the button : an image. - this image will contain the symbols of your button (sprites in my case) which you wish to switch.
In the class where you invoke ( on button pressed ), you include this image as public and assign it in the editor.
and also get the two sprites into the class, which you assign the two sprites to.
then all you need to do is swap the sprite for the image.

make sure you only raycast the button and not the image with the symbol.
hope this helps …
i made an audio play / pause button like this (took me a while, and it was nice to know that the above answer does NOT work :slight_smile:

I used a Toggle Group and 2 Toggles. The first toggle has my first graphic, my second toggle has my second graphic. The second toggle, I turn off transition, and let the first toggle handle it. I also don’t have any function called on my second toggle, because my function on toggle 1 handles all of that.

Made a quick script for this. Simply add to the Toggle game object.

Make sure background graphic is your Off image, and checkmark graphic is your On image

using UnityEngine.UI;

[ExecuteInEditMode]
public class UIToggleGraphic : MonoBehaviour
{
    public Toggle toggle;
    public void Start()
    {
        if (toggle == null) toggle = gameObject.GetComponent<Toggle>();
#if UNITY_EDITOR
        if (Application.isPlaying)
        {
#endif
            OnToggle(toggle.isOn);
            toggle.onValueChanged.AddListener(OnToggle);
#if UNITY_EDITOR
        }
#endif
    }
    void OnDestroy()
    {
        toggle.onValueChanged.RemoveListener(OnToggle);
    }
    public virtual void OnToggle(bool value)
    {
        toggle.targetGraphic.enabled = !value;
        toggle.graphic.enabled = value;
    }
}

Set source image of “Background” to “Off” sprite and source image for “Checkmark” to “On” sprite.
Now set the RectTransform values of “Background” and “Checkmark” all to zero. An set the anchors of both to min X 0 Y 0 and max X 1 Y 1. They now have both the size of “Toggle”. The"Checkmark" sprite will be on top of the “Background” sprite if the toggle is on.