Localizing UI Dropdown Options

What's the recommended way to localize a UI Dropdown component. I have a Settings screen with a Graphics Quality Dropdown with High, Medium and Low options. I'd like to use the StringTable for each of these options. I haven't been able to find any examples of how to do this.

I've been thinking about writing a LocalizeDropdown component similar to the built-in LocalizeString component. But before I attempt that, I wanted to see if anyone has crossed this bridge before or has suggestions for me.

 

jamesor, can you share with us the LocalizeDropdown component that you wrote?

 

For anyone coming here to find a solution:

Probably not the best code, but it allows you to add localized string and texture options in the Unity inspector. These then get used to populate the dropdown and to update all options if the locale changes

Currently (with my limited testing), the only bug I have right now is that the initial CaptionSprite does not show after initial population of the dropdown.

I'll probably improve on this as my needs change (and there is no official solution yet).
Any feedback is also welcome (be it on style or the logic itself)

Code (CSharp):

1.  
2. using System;
3. using System.Collections;
4. using System.Collections.Generic;
5. using System.Linq;
6. using TMPro;
7. using UnityEngine;
8. using UnityEngine.Localization;
9. using UnityEngine.Localization.Settings;
10.  
11. namespace Utilities.Localization
12. {
13.     [RequireComponent(typeof(TMP_Dropdown))]
14.     [AddComponentMenu("Localization/Localize dropdown")]
15.     public class LocalizeDropdown : MonoBehaviour
16.     {
17.         // Fields
18.         // =======
19.         public List<LocalizedDropdownOption> options;
20.  
21.         public int selectedOptionIndex = 0;
22.  
23.         // Properties
24.         // ===========
25.         private TMP_Dropdown Dropdown => GetComponent<TMP_Dropdown>();
26.        
27.         // Methods
28.         // ========
29.         private IEnumerator Start()
30.         {
31.             yield return PopulateDropdown();
32.         }
33.        
34.         private void OnEnable() => LocalizationSettings.SelectedLocaleChanged += UpdateDropdownOptions;
35.        
36.         private void OnDisable() => LocalizationSettings.SelectedLocaleChanged -= UpdateDropdownOptions;
37.  
38.         private void OnDestroy() => LocalizationSettings.SelectedLocaleChanged -= UpdateDropdownOptions;
39.  
40.         private IEnumerator PopulateDropdown()
41.         {
42.             // Clear any options that might be present
43.             Dropdown.ClearOptions();
44.             Dropdown.onValueChanged.RemoveListener(UpdateSelectedOptionIndex);
45.            
46.             for (var i = 0; i < options.Count; ++i)
47.             {
48.                 var option = options[i];
49.                 var localizedText = string.Empty;
50.                 Sprite localizedSprite = null;
51.                    
52.                 // If the option has text, fetch the localized version
53.                 if (!option.text.IsEmpty)
54.                 {
55.                     var localizedTextHandle = option.text.GetLocalizedString();
56.                     yield return localizedTextHandle;
57.  
58.                     localizedText = localizedTextHandle.Result;
59.                    
60.                     // If this is the selected item, also update the caption text
61.                     if (i == selectedOptionIndex)
62.                     {
63.                         UpdateSelectedText(localizedText);
64.                     }
65.                 }
66.  
67.                 // If the option has a sprite, fetch the localized version
68.                 if (!option.sprite.IsEmpty)
69.                 {
70.                     var localizedSpriteHandle = option.sprite.LoadAssetAsync();
71.                     yield return localizedSpriteHandle;
72.                    
73.                     localizedSprite = localizedSpriteHandle.Result;
74.                    
75.                     // If this is the selected item, also update the caption text
76.                     if (i == selectedOptionIndex)
77.                     {
78.                         UpdateSelectedSprite(localizedSprite);
79.                     }
80.                 }
81.                
82.                 // Finally add the option with the localized content
83.                 Dropdown.options.Add(new TMP_Dropdown.OptionData(localizedText, localizedSprite));
84.             }
85.  
86.             // Update selected option, to make sure the correct option can be displayed in the caption
87.             Dropdown.value = selectedOptionIndex;
88.             Dropdown.onValueChanged.AddListener(UpdateSelectedOptionIndex);
89.         }
90.  
91.         private void UpdateDropdownOptions(Locale locale)
92.         {
93.             // Updating all options in the dropdown
94.             // Assumes that this list is the same as the options passed on in the inspector window
95.             for (var i = 0; i < Dropdown.options.Count; ++i)
96.             {
97.                 var optionI = i;
98.                 var option = options[i];
99.  
100.                 // Update the text
101.                 if (!option.text.IsEmpty)
102.                 {
103.                     var localizedTextHandle = option.text.GetLocalizedString(locale);
104.                     localizedTextHandle.Completed += (handle) =>
105.                     {
106.                         Dropdown.options[optionI].text = handle.Result;
107.  
108.                         // If this is the selected item, also update the caption text
109.                         if (optionI == selectedOptionIndex)
110.                         {
111.                             UpdateSelectedText(handle.Result);
112.                         }
113.                     };
114.                 }
115.  
116.                 // Update the sprite
117.                 if (!option.sprite.IsEmpty)
118.                 {
119.                     var localizedSpriteHandle = option.sprite.LoadAssetAsync();
120.                     localizedSpriteHandle.Completed += (handle) =>
121.                     {
122.                         Dropdown.options[optionI].image = localizedSpriteHandle.Result;
123.  
124.                         // If this is the selected item, also update the caption sprite
125.                         if (optionI == selectedOptionIndex)
126.                         {
127.                             UpdateSelectedSprite(localizedSpriteHandle.Result);
128.                         }
129.                     };
130.                 }
131.             }
132.         }
133.  
134.         private void UpdateSelectedOptionIndex(int index) => selectedOptionIndex = index;
135.  
136.         private void UpdateSelectedText(string text)
137.         {
138.             if (Dropdown.captionText != null)
139.             {
140.                 Dropdown.captionText.text = text;
141.             }
142.         }
143.        
144.         private void UpdateSelectedSprite(Sprite sprite)
145.         {
146.             if (Dropdown.captionImage != null)
147.             {
148.                 Dropdown.captionImage.sprite = sprite;
149.             }
150.         }
151.     }
152.  
153.     [Serializable]
154.     public class LocalizedDropdownOption
155.     {
156.         public LocalizedString text;
157.  
158.         public LocalizedSprite sprite;
159.     }
160. }
161.  
162.  

EDIT: Updated script (Changed the code style a bit, applied some feedback and fixed a bug)

 

Thanks for taking the time to reply

Didn't know that was possible (still exploring the package), so I'll change that

I have not, but will try. I used the Texture because the table entry and my assets are Texture2D

I think it's a bug in my own code (the intention is to have it show up immediatly), but haven't had the time yet do take a decent look at it.
I'll (probably) be doing that this weekend

 

There is a small issue in your wonderful code. The selectedOptionIndex is set to 0 which prevents from setting the dropdown value from Prefs at start.

So I changed it like that and it works perfectly now:

EDIT: I also changed OnEnable so that a reenabled dropdown would update if the locale has been changed while it was disabled.

Code (CSharp):

1.        
2. // https://forum.unity.com/threads/localizing-ui-dropdown-options.896951/
3.  
4. using System;
5. using System.Collections;
6. using System.Collections.Generic;
7. using System.Linq;
8. using TMPro;
9. using UnityEngine;
10. using UnityEngine.Localization;
11. using UnityEngine.Localization.Settings;
12.  
13. namespace Utilities.Localization
14. {
15.     [RequireComponent(typeof(TMP_Dropdown))]
16.     [AddComponentMenu("Localization/Localize Dropdown")]
17.     public class LocalizeDropdown : MonoBehaviour
18.     {
19.         // Fields
20.         // =======
21.         public List<LocalizedDropdownOption> options;
22.  
23.         public int selectedOptionIndex = 0;
24.  
25.         private Locale currentLocale = null;
26.  
27.         // Properties
28.         // ===========
29.         private TMP_Dropdown Dropdown => GetComponent<TMP_Dropdown>();
30.  
31.         // Methods
32.         // ========
33.         private IEnumerator Start()
34.         {
35.             yield return PopulateDropdown();
36.         }
37.  
38.         private void OnEnable()
39.         {
40.             var locale = LocalizationSettings.SelectedLocale;
41.             if (currentLocale != null && locale != currentLocale)
42.             {
43.                 UpdateDropdownOptions(locale);
44.                 currentLocale = locale;
45.             }
46.             LocalizationSettings.SelectedLocaleChanged += UpdateDropdownOptions;
47.         }
48.  
49.         private void OnDisable() => LocalizationSettings.SelectedLocaleChanged -= UpdateDropdownOptions;
50.  
51.         private void OnDestroy() => LocalizationSettings.SelectedLocaleChanged -= UpdateDropdownOptions;
52.  
53.         private IEnumerator PopulateDropdown()
54.         {
55.             // Clear any options that might be present
56.             selectedOptionIndex = Dropdown.value;
57.  
58.             Dropdown.ClearOptions();
59.             Dropdown.onValueChanged.RemoveListener(UpdateSelectedOptionIndex);
60.  
61.             for (var i = 0; i < options.Count; ++i)
62.             {
63.                 var option = options[i];
64.                 var localizedText = string.Empty;
65.                 Sprite localizedSprite = null;
66.  
67.                 // If the option has text, fetch the localized version
68.                 if (!option.text.IsEmpty)
69.                 {
70.                     var localizedTextHandle = option.text.GetLocalizedString();
71.                     yield return localizedTextHandle;
72.  
73.                     localizedText = localizedTextHandle.Result;
74.  
75.                     // If this is the selected item, also update the caption text
76.                     if (i == selectedOptionIndex)
77.                     {
78.                         UpdateSelectedText(localizedText);
79.                     }
80.                 }
81.  
82.                 // If the option has a sprite, fetch the localized version
83.                 if (!option.sprite.IsEmpty)
84.                 {
85.                     var localizedSpriteHandle = option.sprite.LoadAssetAsync();
86.                     yield return localizedSpriteHandle;
87.  
88.                     localizedSprite = localizedSpriteHandle.Result;
89.  
90.                     // If this is the selected item, also update the caption text
91.                     if (i == selectedOptionIndex)
92.                     {
93.                         UpdateSelectedSprite(localizedSprite);
94.                     }
95.                 }
96.  
97.                 // Finally add the option with the localized content
98.                 Dropdown.options.Add(new TMP_Dropdown.OptionData(localizedText, localizedSprite));
99.             }
100.  
101.             // Update selected option, to make sure the correct option can be displayed in the caption
102.             Dropdown.value = selectedOptionIndex;
103.             Dropdown.onValueChanged.AddListener(UpdateSelectedOptionIndex);
104.             currentLocale = LocalizationSettings.SelectedLocale;
105.  
106.         }
107.  
108.         private void UpdateDropdownOptions(Locale locale)
109.         {
110.             // Updating all options in the dropdown
111.             // Assumes that this list is the same as the options passed on in the inspector window
112.             for (var i = 0; i < Dropdown.options.Count; ++i)
113.             {
114.                 var optionI = i;
115.                 var option = options[i];
116.  
117.                 // Update the text
118.                 if (!option.text.IsEmpty)
119.                 {
120.                     var localizedTextHandle = option.text.GetLocalizedString(locale);
121.                     localizedTextHandle.Completed += (handle) =>
122.                     {
123.                         Dropdown.options[optionI].text = handle.Result;
124.  
125.                         // If this is the selected item, also update the caption text
126.                         if (optionI == selectedOptionIndex)
127.                         {
128.                             UpdateSelectedText(handle.Result);
129.                         }
130.                     };
131.                 }
132.  
133.                 // Update the sprite
134.                 if (!option.sprite.IsEmpty)
135.                 {
136.                     var localizedSpriteHandle = option.sprite.LoadAssetAsync();
137.                     localizedSpriteHandle.Completed += (handle) =>
138.                     {
139.                         Dropdown.options[optionI].image = localizedSpriteHandle.Result;
140.  
141.                         // If this is the selected item, also update the caption sprite
142.                         if (optionI == selectedOptionIndex)
143.                         {
144.                             UpdateSelectedSprite(localizedSpriteHandle.Result);
145.                         }
146.                     };
147.                 }
148.             }
149.         }
150.  
151.         private void UpdateSelectedOptionIndex(int index) => selectedOptionIndex = index;
152.  
153.         private void UpdateSelectedText(string text)
154.         {
155.             if (Dropdown.captionText != null)
156.             {
157.                 Dropdown.captionText.text = text;
158.             }
159.         }
160.  
161.         private void UpdateSelectedSprite(Sprite sprite)
162.         {
163.             if (Dropdown.captionImage != null)
164.             {
165.                 Dropdown.captionImage.sprite = sprite;
166.             }
167.         }
168.     }
169.  
170.     [Serializable]
171.     public class LocalizedDropdownOption
172.     {
173.         public LocalizedString text;
174.  
175.         public LocalizedSprite sprite;
176.     }
177. }
178.  
179.  
180.  
181. ...

 

Keep getting this error:

Error CS1061 'string' does not contain a definition for 'Result' and no accessible extension method 'Result' accepting a first argument of type 'string' could be found (are you missing a using directive or an assembly reference?)

 

For some reasons I got an empty DropDown. Is it possible to fix it somehow?

Unity 2020.3.24f1

Spoiler: ERROR

A table with the same key `menu` already exists. Something went wrong during preloading.
UnityEngine.Localization.PreloadDatabaseOperation`2<UnityEngine.Localization.Tables.StringTable, UnityEngine.Localization.Tables.StringTableEntry>:LoadTableContents (UnityEngine.ResourceManagement.AsyncOperations.AsyncOperationHandle`1<System.Collections.Generic.IList`1<UnityEngine.Localization.Tables.StringTable>>)
DelegateList`1<UnityEngine.ResourceManagement.AsyncOperations.AsyncOperationHandle`1<System.Collections.Generic.IList`1<UnityEngine.Localization.Tables.StringTable>>>:Invoke (UnityEngine.ResourceManagement.AsyncOperations.AsyncOperationHandle`1<System.Collections.Generic.IList`1<UnityEngine.Localization.Tables.StringTable>>) (at Library/PackageCache/com.unity.addressables@1.19.9/Runtime/ResourceManager/Util/DelegateList.cs:69)
UnityEngine.ResourceManagement.ChainOperationTypelessDepedency`1<System.Collections.Generic.IList`1<UnityEngine.Localization.Tables.StringTable>>:OnWrappedCompleted (UnityEngine.ResourceManagement.AsyncOperations.AsyncOperationHandle`1<System.Collections.Generic.IList`1<UnityEngine.Localization.Tables.StringTable>>)

 

NO errors found by analyzer

Code (CSharp):

1.  private IEnumerator PopulateDropdown()
2.         {
3.             // Clear any options that might be present
4.             selectedOptionIndex = Dropdown.value;
5.             Dropdown.ClearOptions();
6.             Dropdown.onValueChanged.RemoveListener(UpdateSelectedOptionIndex);
7.             for (var i = 0; i < options.Count; ++i)
8.             {
9.                //THIS CODE EXECTUES ONLY ONCE
10.              }

I found that inside the FOR cycle the iterations runs only once, even if you have like 10 "options" added.

 

it is exact copy of the script from dlorre:

the only thing i've changed is

GetLocalizedString

to

GetLocalizedStringAsync

in lines where were errors.

 

Based on previous answers I wrote my own simple script that works:

Code (CSharp):

1. using System;
2. using System.Collections.Generic;
3. using UnityEngine.UI;
4. using UnityEngine;
5. using UnityEngine.Localization;
6. using UnityEngine.Localization.Settings;
7.  
8. namespace UVH.Localization
9. {
10.     [RequireComponent(typeof(Dropdown))]
11.     [AddComponentMenu("Localization/Localize Dropdown")]
12.     public class LocalizeDropdown : MonoBehaviour
13.     {
14.  
15.         [Serializable]
16.         public class LocalizedDropdownOption
17.         {
18.             public LocalizedString text;
19.  
20.             public LocalizedSprite sprite; //not implemented yet!
21.         }
22.  
23.         public List<LocalizedDropdownOption> options;
24.         public int selectedOptionIndex = 0;
25.         private Locale currentLocale = null;
26.         private Dropdown Dropdown => GetComponent<Dropdown>();
27.  
28.  
29.         private void Start()
30.         {
31.             getLocale();
32.             UpdateDropdown(currentLocale);
33.             LocalizationSettings.SelectedLocaleChanged += UpdateDropdown;
34.         }
35.  
36.  
37.         private void OnEnable()=> LocalizationSettings.SelectedLocaleChanged += UpdateDropdown;
38.         private void OnDisable()=> LocalizationSettings.SelectedLocaleChanged -= UpdateDropdown;
39.         void OnDestroy() => LocalizationSettings.SelectedLocaleChanged -= UpdateDropdown;
40.  
41.  
42.  
43.         private void getLocale()
44.         {
45.             var locale = LocalizationSettings.SelectedLocale;
46.             if (currentLocale != null && locale != currentLocale)
47.             {
48.                 currentLocale = locale;
49.             }
50.         }
51.  
52.  
53.         private void UpdateDropdown(Locale locale)
54.         {
55.             selectedOptionIndex = Dropdown.value;
56.             Dropdown.ClearOptions();
57.  
58.             for (int i = 0; i < options.Count; i++)
59.             {
60.                 //sprite functionality isn't ready yet.
61.                 Sprite localizedSprite = null;
62.  
63.                 String localizedText = options[i].text.GetLocalizedString();
64.                 Dropdown.options.Add(new Dropdown.OptionData(localizedText, localizedSprite));
65.             }
66.  
67.             Dropdown.value = selectedOptionIndex;
68.             Dropdown.RefreshShownValue();
69.         }
70.  
71.     }
72. }
73.  

 

I created my own Dropdown Localizer.
This is as addiction of the TMP_Dropdown component. Instead of options in the Dropdown component you can add the LocalizedString options in this script.
Any feedback is welcome!

Code (CSharp):

1. using System.Collections.Generic;
2. using UnityEngine;
3. using UnityEngine.Localization;
4. using UnityEngine.Localization.Settings;
5. using TMPro;
6.  
7. public class LocalizeDropdown : MonoBehaviour
8. {
9.     [SerializeField] private List<LocalizedString> dropdownOptions;
10.     private TMP_Dropdown tmpDropdown;
11.  
12.     private void Awake()
13.     {
14.         List<TMP_Dropdown.OptionData> tmpDropdownOptions = new List<TMP_Dropdown.OptionData>();
15.         for (int i = 0; i < dropdownOptions.Count; i++)
16.         {
17.             tmpDropdownOptions.Add(new TMP_Dropdown.OptionData(dropdownOptions[i].GetLocalizedString()));
18.         }
19.         if (!tmpDropdown) tmpDropdown = GetComponent<TMP_Dropdown>();
20.         tmpDropdown.options = tmpDropdownOptions;
21.     }
22.  
23.     Locale currentLocale;
24.     private void ChangedLocale(Locale newLocale)
25.     {
26.         if (currentLocale == newLocale) return;
27.         currentLocale = newLocale;
28.         List<TMP_Dropdown.OptionData> tmpDropdownOptions = new List<TMP_Dropdown.OptionData>();
29.         for (int i = 0; i < dropdownOptions.Count; i++)
30.         {
31.             tmpDropdownOptions.Add(new TMP_Dropdown.OptionData(dropdownOptions[i].GetLocalizedString()));
32.         }
33.         tmpDropdown.options = tmpDropdownOptions;
34.     }
35.  
36.     private void Update()
37.     {
38.         LocalizationSettings.SelectedLocaleChanged += ChangedLocale;
39.     }
40. }
41.  

 

Did you know how to hide the Default Dropdown Localizer which on top right in Game window?
It a dropdown button to change localized language，and I want to undisplay that.
Very thanks.

 

Hi Karl,

Any chance on elaborating how to use it on dropdowns?

Some guidance would be much appreciated!

 

I enabled track changes but the options in the dropdown list are not localized like the text. What do I need to do localize the options in the dropdown? There is no localize button available in the editor for Dropdown like it is for text.

 

I am using 1.3.2 but there is no localize option in the dropdown menu (see below). I do have the Track Changes enabled but it didn't make any difference.

 

I changed Male to Männlich in the Options above and change the language from English to German. However when I go back to English it displays Männlich only. Why is it not tracking changes? Or what do I need to change for it to put different translations of Male based on selected Local just like it works for UI Text? I have been stuck on this for days.

 

Unity version is 2021.3.5f1. My game is localized in 27 languages and there are ~30 dropdown options that need to be localized. Does that impact which approach I should use?

 

I already used the script from this thread above and it worked perfectly

 

I just used this code and it worked perfectly fine with no errors. Simple and well done, thank you for sharing with us

 

This was perfect for me. Thanks a lot!

 

Thank you!