├── Assets ├── SwitchToggleUI.meta ├── SwitchToggleUI │ ├── Scripts.meta │ ├── Scripts │ │ ├── SwitchToggle.cs │ │ └── SwitchToggle.cs.meta │ ├── Sprites.meta │ └── Sprites │ │ ├── bg1.png │ │ ├── bg1.png.meta │ │ ├── bg2.png │ │ ├── bg2.png.meta │ │ ├── handle1.png │ │ ├── handle1.png.meta │ │ ├── handle2.png │ │ └── handle2.png.meta ├── demo.unity └── demo.unity.meta └── README.md /Assets/SwitchToggleUI.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 25dadd562f584704caf013dd31961d45 3 | folderAsset: yes 4 | timeCreated: 1605963406 5 | licenseType: Pro 6 | DefaultImporter: 7 | userData: 8 | assetBundleName: 9 | assetBundleVariant: 10 | -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Scripts.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: b590f469aa46dc245ad5eba3216238f0 3 | folderAsset: yes 4 | timeCreated: 1605964103 5 | licenseType: Pro 6 | DefaultImporter: 7 | userData: 8 | assetBundleName: 9 | assetBundleVariant: 10 | -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Scripts/SwitchToggle.cs: -------------------------------------------------------------------------------- 1 | using UnityEngine ; 2 | using UnityEngine.UI ; 3 | using DG.Tweening ; 4 | 5 | public class SwitchToggle : MonoBehaviour { 6 | [SerializeField] RectTransform uiHandleRectTransform ; 7 | [SerializeField] Color backgroundActiveColor ; 8 | [SerializeField] Color handleActiveColor ; 9 | 10 | Image backgroundImage, handleImage ; 11 | 12 | Color backgroundDefaultColor, handleDefaultColor ; 13 | 14 | Toggle toggle ; 15 | 16 | Vector2 handlePosition ; 17 | 18 | void Awake ( ) { 19 | toggle = GetComponent ( ) ; 20 | 21 | handlePosition = uiHandleRectTransform.anchoredPosition ; 22 | 23 | backgroundImage = uiHandleRectTransform.parent.GetComponent ( ) ; 24 | handleImage = uiHandleRectTransform.GetComponent ( ) ; 25 | 26 | backgroundDefaultColor = backgroundImage.color ; 27 | handleDefaultColor = handleImage.color ; 28 | 29 | toggle.onValueChanged.AddListener (OnSwitch) ; 30 | 31 | if (toggle.isOn) 32 | OnSwitch (true) ; 33 | } 34 | 35 | void OnSwitch (bool on) { 36 | //uiHandleRectTransform.anchoredPosition = on ? handlePosition * -1 : handlePosition ; // no anim 37 | uiHandleRectTransform.DOAnchorPos (on ? handlePosition * -1 : handlePosition, .4f).SetEase (Ease.InOutBack) ; 38 | 39 | //backgroundImage.color = on ? backgroundActiveColor : backgroundDefaultColor ; // no anim 40 | backgroundImage.DOColor (on ? backgroundActiveColor : backgroundDefaultColor, .6f) ; 41 | 42 | //handleImage.color = on ? handleActiveColor : handleDefaultColor ; // no anim 43 | handleImage.DOColor (on ? handleActiveColor : handleDefaultColor, .4f) ; 44 | } 45 | 46 | void OnDestroy ( ) { 47 | toggle.onValueChanged.RemoveListener (OnSwitch) ; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Scripts/SwitchToggle.cs.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: cb7087d4d4073eb4ba574932dd7d01fc 3 | timeCreated: 1605964117 4 | licenseType: Pro 5 | MonoImporter: 6 | serializedVersion: 2 7 | defaultReferences: [] 8 | executionOrder: 0 9 | icon: {instanceID: 0} 10 | userData: 11 | assetBundleName: 12 | assetBundleVariant: 13 | -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Sprites.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 8c3609d9ac1f1bd4a9cf03cfc3b3f808 3 | folderAsset: yes 4 | timeCreated: 1605963413 5 | licenseType: Pro 6 | DefaultImporter: 7 | userData: 8 | assetBundleName: 9 | assetBundleVariant: 10 | -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Sprites/bg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/herbou/Unity_SwitchToggleUI/41f8e7668325b1e61bbec8b15720aaf450063024/Assets/SwitchToggleUI/Sprites/bg1.png -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Sprites/bg1.png.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: d21ea015d6d5425409d6eba17dcf1b5c 3 | timeCreated: 1605892716 4 | licenseType: Pro 5 | TextureImporter: 6 | fileIDToRecycleName: {} 7 | serializedVersion: 4 8 | mipmaps: 9 | mipMapMode: 0 10 | enableMipMap: 0 11 | sRGBTexture: 1 12 | linearTexture: 0 13 | fadeOut: 0 14 | borderMipMap: 0 15 | mipMapFadeDistanceStart: 1 16 | mipMapFadeDistanceEnd: 3 17 | bumpmap: 18 | convertToNormalMap: 0 19 | externalNormalMap: 0 20 | heightScale: 0.25 21 | normalMapFilter: 0 22 | isReadable: 0 23 | grayScaleToAlpha: 0 24 | generateCubemap: 6 25 | cubemapConvolution: 0 26 | seamlessCubemap: 0 27 | textureFormat: 1 28 | maxTextureSize: 2048 29 | textureSettings: 30 | filterMode: -1 31 | aniso: -1 32 | mipBias: -1 33 | wrapMode: 1 34 | nPOTScale: 0 35 | lightmap: 0 36 | compressionQuality: 50 37 | spriteMode: 1 38 | spriteExtrude: 1 39 | spriteMeshType: 1 40 | alignment: 0 41 | spritePivot: {x: 0.5, y: 0.5} 42 | spriteBorder: {x: 0, y: 0, z: 0, w: 0} 43 | spritePixelsToUnits: 100 44 | alphaUsage: 1 45 | alphaIsTransparency: 1 46 | spriteTessellationDetail: -1 47 | textureType: 8 48 | textureShape: 1 49 | maxTextureSizeSet: 0 50 | compressionQualitySet: 0 51 | textureFormatSet: 0 52 | platformSettings: 53 | - buildTarget: DefaultTexturePlatform 54 | maxTextureSize: 2048 55 | textureFormat: -1 56 | textureCompression: 1 57 | compressionQuality: 50 58 | crunchedCompression: 0 59 | allowsAlphaSplitting: 0 60 | overridden: 0 61 | - buildTarget: Standalone 62 | maxTextureSize: 2048 63 | textureFormat: -1 64 | textureCompression: 1 65 | compressionQuality: 50 66 | crunchedCompression: 0 67 | allowsAlphaSplitting: 0 68 | overridden: 0 69 | - buildTarget: Android 70 | maxTextureSize: 2048 71 | textureFormat: -1 72 | textureCompression: 1 73 | compressionQuality: 50 74 | crunchedCompression: 0 75 | allowsAlphaSplitting: 0 76 | overridden: 0 77 | spriteSheet: 78 | serializedVersion: 2 79 | sprites: [] 80 | outline: [] 81 | spritePackingTag: 82 | userData: 83 | assetBundleName: 84 | assetBundleVariant: 85 | -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Sprites/bg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/herbou/Unity_SwitchToggleUI/41f8e7668325b1e61bbec8b15720aaf450063024/Assets/SwitchToggleUI/Sprites/bg2.png -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Sprites/bg2.png.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 2cdb3a5feff86a4418800f0c849993b1 3 | timeCreated: 1605966046 4 | licenseType: Pro 5 | TextureImporter: 6 | fileIDToRecycleName: {} 7 | serializedVersion: 4 8 | mipmaps: 9 | mipMapMode: 0 10 | enableMipMap: 0 11 | sRGBTexture: 1 12 | linearTexture: 0 13 | fadeOut: 0 14 | borderMipMap: 0 15 | mipMapFadeDistanceStart: 1 16 | mipMapFadeDistanceEnd: 3 17 | bumpmap: 18 | convertToNormalMap: 0 19 | externalNormalMap: 0 20 | heightScale: 0.25 21 | normalMapFilter: 0 22 | isReadable: 0 23 | grayScaleToAlpha: 0 24 | generateCubemap: 6 25 | cubemapConvolution: 0 26 | seamlessCubemap: 0 27 | textureFormat: 1 28 | maxTextureSize: 2048 29 | textureSettings: 30 | filterMode: -1 31 | aniso: -1 32 | mipBias: -1 33 | wrapMode: 1 34 | nPOTScale: 0 35 | lightmap: 0 36 | compressionQuality: 50 37 | spriteMode: 1 38 | spriteExtrude: 1 39 | spriteMeshType: 1 40 | alignment: 0 41 | spritePivot: {x: 0.5, y: 0.5} 42 | spriteBorder: {x: 0, y: 0, z: 0, w: 0} 43 | spritePixelsToUnits: 100 44 | alphaUsage: 1 45 | alphaIsTransparency: 1 46 | spriteTessellationDetail: -1 47 | textureType: 8 48 | textureShape: 1 49 | maxTextureSizeSet: 0 50 | compressionQualitySet: 0 51 | textureFormatSet: 0 52 | platformSettings: 53 | - buildTarget: DefaultTexturePlatform 54 | maxTextureSize: 2048 55 | textureFormat: -1 56 | textureCompression: 1 57 | compressionQuality: 50 58 | crunchedCompression: 0 59 | allowsAlphaSplitting: 0 60 | overridden: 0 61 | spriteSheet: 62 | serializedVersion: 2 63 | sprites: [] 64 | outline: [] 65 | spritePackingTag: 66 | userData: 67 | assetBundleName: 68 | assetBundleVariant: 69 | -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Sprites/handle1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/herbou/Unity_SwitchToggleUI/41f8e7668325b1e61bbec8b15720aaf450063024/Assets/SwitchToggleUI/Sprites/handle1.png -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Sprites/handle1.png.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: 611f9044b1183374ebee0328a3d1bde9 3 | timeCreated: 1605892523 4 | licenseType: Pro 5 | TextureImporter: 6 | fileIDToRecycleName: {} 7 | serializedVersion: 4 8 | mipmaps: 9 | mipMapMode: 0 10 | enableMipMap: 0 11 | sRGBTexture: 1 12 | linearTexture: 0 13 | fadeOut: 0 14 | borderMipMap: 0 15 | mipMapFadeDistanceStart: 1 16 | mipMapFadeDistanceEnd: 3 17 | bumpmap: 18 | convertToNormalMap: 0 19 | externalNormalMap: 0 20 | heightScale: 0.25 21 | normalMapFilter: 0 22 | isReadable: 0 23 | grayScaleToAlpha: 0 24 | generateCubemap: 6 25 | cubemapConvolution: 0 26 | seamlessCubemap: 0 27 | textureFormat: 1 28 | maxTextureSize: 2048 29 | textureSettings: 30 | filterMode: -1 31 | aniso: -1 32 | mipBias: -1 33 | wrapMode: 1 34 | nPOTScale: 0 35 | lightmap: 0 36 | compressionQuality: 50 37 | spriteMode: 1 38 | spriteExtrude: 1 39 | spriteMeshType: 1 40 | alignment: 0 41 | spritePivot: {x: 0.5, y: 0.5} 42 | spriteBorder: {x: 0, y: 0, z: 0, w: 0} 43 | spritePixelsToUnits: 100 44 | alphaUsage: 1 45 | alphaIsTransparency: 1 46 | spriteTessellationDetail: -1 47 | textureType: 8 48 | textureShape: 1 49 | maxTextureSizeSet: 0 50 | compressionQualitySet: 0 51 | textureFormatSet: 0 52 | platformSettings: 53 | - buildTarget: DefaultTexturePlatform 54 | maxTextureSize: 2048 55 | textureFormat: -1 56 | textureCompression: 1 57 | compressionQuality: 50 58 | crunchedCompression: 0 59 | allowsAlphaSplitting: 0 60 | overridden: 0 61 | spriteSheet: 62 | serializedVersion: 2 63 | sprites: [] 64 | outline: [] 65 | spritePackingTag: 66 | userData: 67 | assetBundleName: 68 | assetBundleVariant: 69 | -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Sprites/handle2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/herbou/Unity_SwitchToggleUI/41f8e7668325b1e61bbec8b15720aaf450063024/Assets/SwitchToggleUI/Sprites/handle2.png -------------------------------------------------------------------------------- /Assets/SwitchToggleUI/Sprites/handle2.png.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: aa1353d7e6c145549b95be3604c37ba8 3 | timeCreated: 1605966233 4 | licenseType: Pro 5 | TextureImporter: 6 | fileIDToRecycleName: {} 7 | serializedVersion: 4 8 | mipmaps: 9 | mipMapMode: 0 10 | enableMipMap: 0 11 | sRGBTexture: 1 12 | linearTexture: 0 13 | fadeOut: 0 14 | borderMipMap: 0 15 | mipMapFadeDistanceStart: 1 16 | mipMapFadeDistanceEnd: 3 17 | bumpmap: 18 | convertToNormalMap: 0 19 | externalNormalMap: 0 20 | heightScale: 0.25 21 | normalMapFilter: 0 22 | isReadable: 0 23 | grayScaleToAlpha: 0 24 | generateCubemap: 6 25 | cubemapConvolution: 0 26 | seamlessCubemap: 0 27 | textureFormat: 1 28 | maxTextureSize: 2048 29 | textureSettings: 30 | filterMode: -1 31 | aniso: -1 32 | mipBias: -1 33 | wrapMode: 1 34 | nPOTScale: 0 35 | lightmap: 0 36 | compressionQuality: 50 37 | spriteMode: 1 38 | spriteExtrude: 1 39 | spriteMeshType: 1 40 | alignment: 0 41 | spritePivot: {x: 0.5, y: 0.5} 42 | spriteBorder: {x: 0, y: 0, z: 0, w: 0} 43 | spritePixelsToUnits: 100 44 | alphaUsage: 1 45 | alphaIsTransparency: 1 46 | spriteTessellationDetail: -1 47 | textureType: 8 48 | textureShape: 1 49 | maxTextureSizeSet: 0 50 | compressionQualitySet: 0 51 | textureFormatSet: 0 52 | platformSettings: 53 | - buildTarget: DefaultTexturePlatform 54 | maxTextureSize: 2048 55 | textureFormat: -1 56 | textureCompression: 1 57 | compressionQuality: 50 58 | crunchedCompression: 0 59 | allowsAlphaSplitting: 0 60 | overridden: 0 61 | spriteSheet: 62 | serializedVersion: 2 63 | sprites: [] 64 | outline: [] 65 | spritePackingTag: 66 | userData: 67 | assetBundleName: 68 | assetBundleVariant: 69 | -------------------------------------------------------------------------------- /Assets/demo.unity: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/herbou/Unity_SwitchToggleUI/41f8e7668325b1e61bbec8b15720aaf450063024/Assets/demo.unity -------------------------------------------------------------------------------- /Assets/demo.unity.meta: -------------------------------------------------------------------------------- 1 | fileFormatVersion: 2 2 | guid: df53a787625337042929948b84ded61c 3 | timeCreated: 1605890422 4 | licenseType: Pro 5 | DefaultImporter: 6 | userData: 7 | assetBundleName: 8 | assetBundleVariant: 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cusomized UI Toggle in Unity 2 | 3 | ### Video tutorial 👉 : [https://youtu.be/fRqqef8246Q](https://youtu.be/fRqqef8246Q) 4 | ![Video thumbnail](https://img.youtube.com/vi/fRqqef8246Q/0.jpg) 5 | --------------------------------------------------------------------------------