Dialogue Questions: Using images as icon, Pop up from the left

Question

Hi, how can I pass an image in building an option in the simple list? I saw the example is using a vector image, and I want one from my resource folder.

Also, I would like the dialog to show up from the right, how could I do it?

Comments

I don't need to have the image display correctly right away, so it will be great if you can put it in the next update!

---

Hello! (Declan here, Yohan made the previous comments/answers)

The dialog system is actually designed so you can use custom animations with it, limited only by your imagination! I just haven't quite documented it yet :/

You simply have to create a class inheriting from DialogAnimator.

You can find a 'slide from right' example here

Then create, setup, and show the dialog with something like this.

Hope that does what you wanted! - If not, try creating some other animators :)

Edit: I just noticed that you wanted it from the left, not the right. In which case, you'll want to just make 'halfScreenWidth' and 'halfDialogWidth' negative in both AnimateShow and AnimateHide :)

Answer 1

Hello :)

In the example scene, basically you have this:

OptionDataList optionDataList = new OptionDataList();

for (int i = 0; i < m_BigStringList.Length; i++)
{
        string itemValue = m_BigStringList[i];

        OptionData optionData = new OptionData(itemValue, MaterialIconHelper.GetRandomIcon(), () => { Debug.Log("I am selected: " + itemValue); });
        optionDataList.options.Add(optionData);
}

What you need to do is this:

OptionDataList optionDataList = new OptionDataList();

for (int i = 0; i < m_BigStringList.Length; i++)
{
        string itemValue = m_BigStringList[i];

        OptionData optionData = new OptionData(itemValue, new ImageData(REFERENCE_TO_YOUR_SPRITE), () => { Debug.Log("I am selected: " + itemValue); });
        optionDataList.options.Add(optionData);
}

Where REFERENCE_TO_YOUR_SPRITE is just a sprite you declared as public Sprite mySprite; for example.

Doing all of this will produce what you want BUT there's an issue we'll fix with the next update, is that the icons using sprite are grey instead of white... If this is really urgent for you, I can tell you how to fix that, if not, it will be in the next update ;) 

Answer 2

And for the dialog showing from the right. It's currently not possible.
If you look at the class called DialogAnimator (MaterialUI/Scripts/Components/Dialogs/DialogAnimator.cs), you'll see a class called "DialogAnimatorSlideUp" inside. It's what control showing the dialog from the bottom.

We wanted to follow the guidelines from Material Design, and this is the expected behaviour, but we could add support to show dialogs from different directions in the future. Is this something really useful for you?

Comments

Thanks for the quick response!

I tried the code below to load "Shroom" sprite from my resources file:

OptionDataList optionDataList = new OptionDataList();
        optionDataList.imageType = ImageDataType.Sprite;

        Sprite newSprite = new Sprite();
        newSprite = Resources.Load("Shrrom") as Sprite;

        for (int i = 0; i < m_BigStringList.Length; i++)
        {
            string itemValue = m_BigStringList[i];

            OptionData optionData = new OptionData(itemValue, new ImageData(newSprite), () => { Debug.Log("I am selected: " + itemValue); });
            optionDataList.options.Add(optionData);
        }

Yet, the sprite was mssing from the icon slot. Anything that I did wrong?

---

Can you added a Debug.Log(newSprite); just after your newSprite = Resources.Load?
Just to make sure the sprite is correctly loaded.

Plus, there's still the issue with the sprite not being white, we have just submitted a new version which contains the fix.
In the meantime, if you want to make it work on your end, just open MaterialUI/Scripts/Components/Dialogs/DialogSimpleList.cs
Around line 120, there is a call to: graphic.SetImage(data.imageData);
Just before this line, add this:

if (data.imageData.imageDataType == ImageDataType.Sprite) graphic.color = Color.white;

And everything should be working ;)