(Unity UI) Quick and Dirty – Settings Panel with Toggle Button

I created a quick & dirty “Settings Panel”. It’s possible to toggle the visibility of the “Settings Panel” with a UI Button. (Button is always visible) At least it is also possible to create more than one panel for settings, keep all the values visible during design-time and make them visible on request during run-time.

-Images for final buttons
-Test the size of the button
-Other sides? (dynamic?)

First implemented in:

Setup in the Unity Editor (Hierarchy):


The Script:

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

public class ButtonPanelHideShow : MonoBehaviour {
    [SerializeField]private bool inHiddenMode = true;
    public RectTransform assignedPanel;
    private Vector2 panelOpenXY = new Vector2(0f, 0f);
    private Vector2 panelClosedXY = new Vector2(150f,0.0f);

    public RectTransform openCloseButton;
    private Vector2 btnOpenXY = new Vector2(0f, 0f);
    private Vector2 btnClosedXY = new Vector2(150f, 0.0f);

    //public Color32 uiColor; //Not used right now

    public void Awake()
        //Check or Get the Panel we want to controll
        if(assignedPanel == null)
            assignedPanel = GetComponentInParent<RectTransform>();
        if (openCloseButton == null)
            Debug.Log("WARNING Button not assigend!");

        panelClosedXY = assignedPanel.anchoredPosition;
        panelOpenXY   = panelClosedXY;
        panelOpenXY.x = 0;

        btnClosedXY = openCloseButton.anchoredPosition;
        btnOpenXY = btnClosedXY;
        btnOpenXY.x = 0-openCloseButton.sizeDelta.x;

        //Init = allways hidden on start
        inHiddenMode = false;  //Will be switched asap in next fu
    public void OnClickHideShowButton()
        inHiddenMode = !inHiddenMode;
        if (inHiddenMode)
            assignedPanel.anchoredPosition = panelClosedXY;
            openCloseButton.anchoredPosition = btnClosedXY;
            assignedPanel.anchoredPosition = panelOpenXY;
            openCloseButton.anchoredPosition = btnOpenXY;

This example is available as a prefab on the shared dev drive.

Leave a Reply