Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

MaterialUI - A Unity UI kit that follows Google's material design guidelines

Discussion in 'Assets and Asset Store' started by MaterialUnity, Jan 7, 2016.

  1. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    If we can see some screenshots/videos/gifs or anything, that would be awesome :D (even in private via email contact at materialunity.com)
     
  2. ericalan

    ericalan

    Joined:
    Jun 10, 2016
    Posts:
    17
    Cool, when I put it on the play store I'll be putting some screenshots together so I'll email you when it's up
     
    MaterialUnity likes this.
  3. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hey :)
    Thanks a lot for the compliments!

    - About 3D and VR: Most components should support it, but we haven't officially gone through and double-checked everything so there *may* be some bugs...
    - We fixed a lot of issues regarding performances, but they were mostly related to mobile platforms (iOS and Android), so you should be good to go :)

    ~ Yohan
     
  4. vabd920

    vabd920

    Joined:
    Oct 31, 2015
    Posts:
    15
    Hi! Your asset seems nice :) Are you going to implement a navigation system in the MaterialUI?
     
  5. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Any chance you're able to elaborate on what you mean by a 'navigation system'?

    ~ Declan.
     
  6. vabd920

    vabd920

    Joined:
    Oct 31, 2015
    Posts:
    15
    The UI navigation system to let a player use interface by the controller or keyboard. For instance: when alert window is open the system prevents player to choose buttons behind the alert.
     
    Last edited: Sep 3, 2016
  7. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Well, adding keyboard and controller support is something on our todo list, but it's not a the top, so it's unlikely to be present soon, sorry :(

    ~ Yohan
     
  8. vabd920

    vabd920

    Joined:
    Oct 31, 2015
    Posts:
    15
    It's ok. Thanks for your reply!
     
  9. Jimww

    Jimww

    Joined:
    May 14, 2013
    Posts:
    63
    Hi, seems to be a nice asset but I can't find anything related to the "Material Design color palettes". Is there no system included that helps manage palettes? Or is the focus of this asset to have just one look.? Just changing the color of some text and wanting that color to be consistent across all states and the other components, involves a significant number of adjustments in colors settings. Say I want to change all of the items that are green by default in MaterialUI, I cannot find a way to do that easily at all. Every materialUI element I add would need to be reconfigured.? I'd have to dig through the deep hierarchies looking for every color that I might need to change..?

    Also, I've spent a lot longer than I anticipated getting this to work for me. The problem I see is that there is not enough glue between the components to be able to do what I want easily. Say I want to have a Nav Drawer. I add it but then I want it wider. I can increase the width, but the shadows will not automatically resize. Then I also need to adjust the whole thing to the left that same amount I widened it so it's all off screen. Just a bunch of these kinds of things everywhere I look whenever I change settings. This asset could be much better and more worth the price with some attention in these areas.

    Also the dragging slider has a popup balloon that is nice but on mobile, your finger covers part of the balloon that pops up. Ideally, having that distant be a configuration could make it more usable.

    Another thing: I used myDropDown.Select(0) and it would "sometimes" refresh my dropdown, but when using myDropDown.currentlySelected = 0; it always works. Not clear on the differences or when I should use .Select().

    Is it possible to have a up/down slider? If I create a discrete MaterialUI slider and change the orientation and max value, the material slider does not conform.
     
    Last edited: Sep 13, 2016
  10. ericalan

    ericalan

    Joined:
    Jun 10, 2016
    Posts:
    17
    Hi again,

    Not sure if it's related to "Navigation System" mentioned earlier, but is there a way of creating a flow between inputs, so once I have finished adding input to an input field I want it to jump to the next input field automatically (on mobile, or when I press tab/enter on desktop)?

    I noticed there is a property called "Navigation" with the options (none/horizontal/vertical/automatic/explicit) but if that is the right property it doesn't seem to work.
     
  11. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Well... sorry but for now yes... there's currently no way to handle color palettes...
    It's just like using the Unity UI system for this :)
    But it's on our roadmap!

    You're 100% right, please just tell us everything you see wrong, and we'll try to fix it! (You can post this here: materialunity.com/support/)

    We'll see about that, but we want to respect as mush as possible the Material Design guidelines... I'll add that on our list :)

    Seems like something we need to fix, thanks!

    It's also on our todo list, but frankly, not at the top at all, sorry :/

    Thanks a lot for all the feedback!
    Have a great day :)
     
  12. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hey :)

    Sorry it's not something we've done yet with our own input fields.
    The correct way to do that is exactly as you said, by using the navigation options from the Unity Input Field, but currently our MaterialInputField does not support that.

    I'll add that to the list!
     
  13. Jimww

    Jimww

    Joined:
    May 14, 2013
    Posts:
    63
    I can sort of respect the mentality of following guidelines until it becomes apparent that the guidelines have a flaw. Then I usually jump ship pretty quick.
     
    MaterialUnity likes this.
  14. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hi Paylo,

    The next feature update will bring back the EasyTween system and (hopefully) a Lists system. I'm not 100% sure on when these will be done - likely within the next week or two.

    What are your CanvasScaler settings? Try using 360x640 (I've found that this reference resolution works well with MaterialUI) and see if the scaling issues are still present.

    As for the DatePicker, I'll take a look at that when I can :)

    Thanks for your support!

    ~ Declan.
     
  15. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    I'm designing the system to support infinite/recyclable lists with inheritable list item and data types, in vertical/horizontal/grid/custom layouts, as well as custom actions like swipe to delete, and reordering. It's gonna be really, really cool, but it's a bit of a task to implement :/

    Curious - which documents are you referring to?

    ~ Declan.
     
    Hodgson_SDAS likes this.
  16. Hodgson_SDAS

    Hodgson_SDAS

    Joined:
    Apr 30, 2015
    Posts:
    123
    Any chance you might support SDF fonts and Icons?
     
  17. ianjgrant

    ianjgrant

    Joined:
    Mar 11, 2013
    Posts:
    28
    Hi, Two things: I'm creating a 'toast' when an object is enabled. The first toast appears central. The next toast is offset and slightly off-screen. If I repeatedly (de)activate the objects that trigger the toast, eventually a future toast is central again.

    I think: if I activate a toast when the first is still displayed, the next toast is central.
    If I wait for the toast to disappear and enable the next toast - it is offset on the -X

    Is there something I can manually destroy to ensure the toasts are always central?

    [2] The second thing: can I have a multiline toast? What would be the line-break character?

    Thanks, Ian
     
    Last edited: Oct 24, 2016
  18. ianjgrant

    ianjgrant

    Joined:
    Mar 11, 2013
    Posts:
    28
    Hi, I worked out a minimal example and the behaviour is present:

    In Game mode: Disable and re-enable an object in the editor then using a switch that is set to toggle the object) with the following delays:

    [1] Wait for the toast to finish
    [2] Interupt the toast.

    Note the positions:

    When enabled/disabled In the Editor:
    [1] Central
    [2] Off on the -X

    Using the switch, all behaved as expected.

    So this is not a world changing bug as it only happens using the editor at game time - but it appeared during testing before I'd built the UI to enable / disable the objects and I scratched my head and around for a solution for a while...
    Cheers Ian
     
  19. ianjgrant

    ianjgrant

    Joined:
    Mar 11, 2013
    Posts:
    28
    Hi is it possible to get two duplicate radiogroups in sync? I've tried a circular reference for the 'toggle.isOn' but that seems to lock the group. One way sync is working fine. I have a pop-up with key controls and I'm binding the state of duplicated controls.
    Thanks, Ian
     
  20. ianjgrant

    ianjgrant

    Joined:
    Mar 11, 2013
    Posts:
    28
    Yes it is! In one direction [There are three radio buttons in the group] I sent messages: 'Toggle.isOn' (true), 'Toggle.isOn' (false) , 'Toggle.isOn' (false) from a toggle in one group and in the other direction I sent 'MaterialRadio.TurnOn', 'MaterialRadio.TurnOff', 'MaterialRadio.TurnOff' messages from each radiobutton. This way I think I avoided functions triggering each other in a loop.

    I thought setting the 'group' field to the same Radio Button group might work but it didn't. I hope this helps someone else.. Kind regards, Ian
     
  21. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hi Ian!

    I've searched why this issue happens, and you're right, it's only in the Editor. You won't have this issue in builds.
    The reason is that, to display toasts at the correct position, we use Screen.width and Screen.height, which returns the current window dimensions.
    And here's the issue, it's the current window dimensions, not the Game View dimensions.
    This mean that if you're "activating" things from the Game View (by using switches for example), it will work fine, because the current window is the GameView. But if you activate/deactivate a GameObject from the Inspector, or Hierarchy or anywhere else... well... Screen.width and Screen.height will return the dimensions of the Inspector (or Hierarchy). So that's the issue :)
    And in builds you don't have this issue, because the current window is always the Game window!

    I've submitted a bug report to Unity for that. We'll see if they fix that or not.

    If you don't want this issue, just make sure you trigger everything from the GameView :)
    Have a great day and thanks for reporting the issue!

    ~ Yohan
     
  22. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    And thanks for sharing this Ian :)
     
  23. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hey there,
    Sorry we took this time to answer...

    So! Yes, we'd like to support SDF fonts in the future. In fact, we already have a SDF implementation for ripples :)
    Icons do not need this, as we're using Vector Fonts, so they'll look good and crisp whatever the size!

    Right now if you want to have text with SDF support, I suggest using Text Mesh Pro on the Asset Store, which does that. But! I've never tried Text Mesh Pro and MaterialUI together, so I don't know if it's 100% compatible...

    ~ Yohan
     
  24. Noob_Vulcan

    Noob_Vulcan

    Joined:
    Mar 20, 2014
    Posts:
    14
    Hi ,

    I really like your asset . But i'm facing a problem in resizing it . The UI elements are not resizing according to the screen . Please help (In Canvas scalar i have selected "Scale with screensize ")
     
  25. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hello,

    Can you show me a screenshot (or multiples) showing the issue?
    If you selected Scale with screen size, maybe try moving the slider that has width/height?

    Also, make sure you understand correctly how to design UI for multiple resolutions, there's a Unity guide right here: https://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html

    ~ Yohan
     
  26. slimshader

    slimshader

    Joined:
    Jun 11, 2013
    Posts:
    187
    Hi, i Just bout your nice asset and I have an error when a button is used to load new scene, because animation is running while new scene is loaded (and old one is unloaded):

    MissingReferenceException: The object of type 'AnimatedShadow' has been destroyed but you are still trying to access it.
    Your script should either check if it is null or you should not destroy the object.
    MaterialUI.AnimatedShadow+<SetShadow>c__AnonStorey7B.<>m__E4 () (at Assets/MaterialUI/Scripts/Common/Shadows/AnimatedShadow.cs:84)
    MaterialUI.ActionExtension.InvokeIfNotNull (System.Action action) (at Assets/MaterialUI/Scripts/MaterialUtils/Extensions.cs:162)
    MaterialUI.AutoTween.EndTween (Boolean callback) (at Assets/MaterialUI/Scripts/Animation/AutoTween.cs:177)
    MaterialUI.AutoTween.UpdateTween () (at Assets/MaterialUI/Scripts/Animation/AutoTween.cs:164)
    MaterialUI.TweenManager.Update () (at Assets/MaterialUI/Scripts/Managers/TweenManager.cs:138)
     
  27. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hello!
    I can't seem to reproduce this :/

    Can you try sending us a small project (contact at materialunity.com) so I can take a look?

    ~ Yohan
     
  28. Luke57d

    Luke57d

    Joined:
    Dec 2, 2016
    Posts:
    6
    Hi,

    Just purchase your asset, loving it so far, great work!

    I'm just wondering if you have any tutorials for how I could customise the appearance of your UI elements, please? My main priority is being able to change the background/label color and fonts used by a dialog. Is this possible in code?

    Thanks,
    Luke
     
  29. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hey Luke!

    Glad you like it :)
    We don't have anything right now on how to customize elements sorry.
    But when you're creating your UI in your scene, you can easily click on each component and find the element you want to change the color of etc...
    About things inside the dialog.

    There's two ways to do that:
    - You can directly modify the prefabs of the components you want to modify. This will make EVERY dialog have the updated look you provided. But whenever an update to MaterialUI is available, you'll lose your modifications (or you'll have to deal with them with source control).
    - You can do that via code! When you display a dialog, with for example AlertDialog dialog = DialogManager.ShowAlertDialog, it will return a DialogAlert component, which is the GameObject holding the entire dialog. Then you can do dialog.titleSection to access some components on the title, or dialog.buttonSection to access the button section and then access each child gameObject you want. If a GameObject is not available like that (such as the background of the dialog), you can just do something like:
    -- iterate the dialog children
    -- find the one named "PanelLayer"
    -- get the Image component on it
    -- change the color
    I know it's not that great and fast to do it this way. But currently this is the one of the way to do it I can give you :)

    If you need help with that or anything else, just let me know!

    Have a great day.

    ~ Yohan
     
  30. Luke57d

    Luke57d

    Joined:
    Dec 2, 2016
    Posts:
    6
    Great, thanks for your quick reply.

    It did occur to me once I posted this I could just modify the prefabs, which is what I've done for now but I'll probably write some code to apply the 'theme' once it's been confirmed.

    Cheers,
    Luke
     
  31. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Yes that's a great workflow I think.
    First just modify the prefabs to look exactly how you want things to look, so you have a direct visual feedback.
    And when everything's ok, do that in code and revert the prefab to their original state ;)
     
  32. Deathfate

    Deathfate

    Joined:
    Sep 10, 2012
    Posts:
    46
    Does this plugin support constant physical size without too many effort?

    I know I can use that option in canvas scaler to for example points, but the majority of plugins of this type make you rescale every single prefab they come with and thats a pain in the ass.

    For example If I want the app bar to have 48 dp as in Android (21.60 points) Do I have to rescale every element and prefab or there is an automatic method to support this.

    This plugin looks super awesome, will buy it as soon as it has list support
     
  33. abhayaagrawal

    abhayaagrawal

    Joined:
    Sep 30, 2016
    Posts:
    8
    Hi,

    I was trying to implement Left Swipe. In your code only Right swipe is there. Can you help me in this?
     
    Last edited: Dec 24, 2016
  34. vabd920

    vabd920

    Joined:
    Oct 31, 2015
    Posts:
    15
    I use MaterialUI elements in my prefab and VectorImage-s in the prefab always miss the icons.

    I tried to fix the problem by using my script that assign required Icons to VectorImages but I can't use default "MaterialUI Icons" pack by script.

    For instance, MaterialUIIconHelper.GetIcon("switch_back") return an Error.

    How can I handle it?
     
  35. vabd920

    vabd920

    Joined:
    Oct 31, 2015
    Posts:
    15
    Oh ok, I figured out how to do that. Just have "the missing icons issue fix" in your to-do list :)
     
  36. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hello,
    Can you tell me where we implemented Right swipe? I can't think of anywhere we did this :)
    Thanks!

    ~ Yohan
     
  37. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hello!

    Do you mean that if you have a GameObject that has a VectorImage on it, set an icon, then save to prefab. Then the prefab doesn't keep the selected icon?

    ~ Yohan
     
  38. vabd920

    vabd920

    Joined:
    Oct 31, 2015
    Posts:
    15
    Yes, I mean that
     
  39. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hi Deathfate,

    A way to achieve this would be to add a 'custom scale' variable to an inherited CanvasScaler class, and use it in place of CanvasScaler. Here's an example. This should work well once you find a good scale, as all the controls are designed to have consistent relative sizes.

    The biggest issue with this is that it will scale everything under that Canvas, not just the MaterialUI controls, but as far as I know it's not currently possible to globally only scale the MUI controls without rewritng a *lot* of stuff.

    ~ Declan.
     
    Last edited: Jan 5, 2017
  40. Deathfate

    Deathfate

    Joined:
    Sep 10, 2012
    Posts:
    46
    Hi, using this script and setting the scaler to points, scale to 0.45 (as 1dp = 0.45 pt) and Default Sprite DPI to 70 (I don't know why this number but seems to fix shadows) seems to let me work using units as dp which is pretty awesome.

    Although it isn't perfect, It would be awesome if you provide a canvas of some sort that lets you work with constant physical size and matched 1 unit = 1dp (as every of your component seems to be builded using material ui metrics, f.e. app bar = 56 unity units)

    Thank you.
     
  41. Luke57d

    Luke57d

    Joined:
    Dec 2, 2016
    Posts:
    6
    Hi,

    This is sort of related to Deathfate's question, however, I'm trying to get MaterialUI to scale differently to the root canvas scaler (which I know you've said is hard) because my canvas scaler is set to 960x640 which looks great for my UI components, however, MaterialUI components, especially the dialogs, look too small and are hard to read on mobiles.

    Therefore, I'm wondering if there is a way I can increase the size of the MaterialUI components without changing all my other UI components?

    Thanks,
    Luke
     
  42. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    It's likely not practically possible to do that at the moment, unfortunately (at least not without adjusting scaling settings).
    What other UI components are you using?

    ~ Declan.
     
  43. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    I've found that 72 is the best fallback and sprite DPI to use (I suspect that's because Unity treats 72DPI as the 'base' or something of the sort).

    I'll definitely look into this, although the Canvas may be difficult to extend/modify as (if I remeber correctly) a lot of the Canvas code is on the closed Unity side of things, rather than the open-source UI side.

    ~ Declan.
     
  44. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Well I absolutely don't have this issue :/
    Can you tell me what you're using?
    - Operating System
    - Unity version
    - MaterialUI version

    Thanks!

    ~ Yohan
     
  45. vabd920

    vabd920

    Joined:
    Oct 31, 2015
    Posts:
    15
    Windows 8.1
    Unity 5.4.2
    latest version of MaterialUI
     
  46. MetaMythril

    MetaMythril

    Joined:
    May 5, 2010
    Posts:
    150
    Hi @MaterialUnity I can't find any good examples on how to create a panel with scrolling content using your system. I've gone through the videos and all. It also seems your website http://www.materialunity.com/ is down.

    EDIT: Looks like the site came back online.
     
    Last edited: Jan 24, 2017
  47. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    Hello!

    Thanks for the website, I had the same thing here, but after Cmd+Shift+R (to hard refresh) it came back. Weird.
    About scrolling content, it's exactly the same as using Unity UI build it ScrollRect :)
    You can find tutorials online, for example:
    -

    -


    You'll just need to put your MaterialUI elements Inside the Unity UI ScrollRect ;)
     
  48. MetaMythril

    MetaMythril

    Joined:
    May 5, 2010
    Posts:
    150
    Hmm, I was able to try
    Sorry, I didn't have a chance to get back and update that I had sorted out the scrolling UI. Just like you said, I had to put the MaterialUI components inside the Scroll View > Viewport > Content gameobject. I was just thrown off that there wasn't something baked in that used scroll bars that better fit the Material UI style.

    Oddly enough I have to do strange things like offset the MaterialUI Panel by -50 on the Top of the rect in order for the content to show at the starting height that I want. Nothing wrong with that, but it just feels like a kludge.

    I'll keep plugging away at this. I gotta make survey form in a bit of a hurry and so far it's working out well for the most part.

    Thanks for the help. :)
     
  49. MaterialUnity

    MaterialUnity

    Joined:
    Dec 15, 2015
    Posts:
    122
    It's definitely a planned addition, I'll likely include it when I add the Lists system, when I finish that :)

    Is your Y pivot for the content set to 1? If not, try that.

    ~ Declan.
     
    MMOARgames likes this.
  50. MetaMythril

    MetaMythril

    Joined:
    May 5, 2010
    Posts:
    150
    It was already set to 1.

    Here is a screenshot showing the large gap at the top: