Search Unity

  1. Engage, network and learn at Unite Austin 2017, Oct 3 - 5. Get your ticket today!
    Dismiss Notice
  2. Introducing the Unity Essentials Packs! Find out more.
    Dismiss Notice
  3. Check out all the fixes for 5.6 on the patch releases page.
    Dismiss Notice
  4. Unity 2017.1 is now released.
    Dismiss Notice
  5. Unity 2017.2 beta is now available for download.
    Dismiss Notice

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

Discussion in 'Works In Progress' started by Saxy_Guy, Dec 8, 2014.

  1. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    After a bit of work, I finally have MaterialUI in a state that can be used. This version just includes the core components (buttons, checkboxes etc), and some supplementary ones too (shadow generator, custom ink blots etc).

    From this point I'll be listening (intently) to all your feedback, mockups, questions and complaints, so please feel free to flood me with them! I also intend to add some more complex components in the upcoming versions, such as screen/page transitions, dialogs, global color theming, and some cool other stuff.

    Get it here!

    Also, here's a basic video tutorial - It's only for the buttons, but it's the same concept for everything else. (apologies for the quality, my mic was doing silly things)

    If you're working with Material Design, be sure to read up on the official guidelines!
     
    Last edited: Dec 9, 2014
    MrDasixMr, WOODSY, EMGPY and 10 others like this.
  2. AlexJBoyd

    AlexJBoyd

    Joined:
    Dec 6, 2012
    Posts:
    8
    Great package! I was messing around with it in a new scene to see how flexible it was and I ran into a problem. How do you properly scale buttons to larger size? Whenever I try to scale a button the shadow gets messed up. Is this because of Material Design standards?
     
  3. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    The scaling is something I'm still working on. If you're using the normal (rectangle) buttons, try adding a 'ShadowSnap' component to the 'Shadows' objects, and making the anchor not stretched (alt+click the center option). Assign the Button Layer to the ShadowSnap target and mess with the values until the shadow lines up again. After that, you shouldn't have any problem scaling the button.

    Edit: Easier way to do this - simply set the RectTransform anchors of the button rect to stretched (min=0,0 max=1,1) Then just resize the parent object and you're sweet.
     
  4. foomanchu1989

    foomanchu1989

    Joined:
    Nov 28, 2014
    Posts:
    12
    This is really amazing work! I haven't had much to play but what you have already done as far as I can tell from the videos is a much needed upgrade over what Unity has given us as just the baseline. I'm looking forward to incorporating this into my projects in the coming weeks.
     
    Saxy_Guy likes this.
  5. AlexJBoyd

    AlexJBoyd

    Joined:
    Dec 6, 2012
    Posts:
    8
    Worked perfectly, thanks!
     
    Saxy_Guy likes this.
  6. Elit3d

    Elit3d

    Joined:
    Jan 25, 2014
    Posts:
    21
    Hey man, fantastic work on materialUI, it is just what I was looking for. Now two questions with the selection box:

    1. is it possible to make one of the button half showing so the user knows that they can scroll past that point?

    2. when i select an option in the drop down, can i make it highlighted and kept highlighted until i want to switch it to show what the user previously clicked on?

    many thanks!
     
  7. Eric2241

    Eric2241

    Joined:
    Dec 2, 2012
    Posts:
    618
    This is so awesome! I'll definitely be using this. Keep up the work and I'm looking forwards to more updates!
     
  8. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32

    I'll make it possible (and very easy) to do both those things in the next release :)
     
  9. Elit3d

    Elit3d

    Joined:
    Jan 25, 2014
    Posts:
    21
    many thanks, when can I expect the next release? :)
     
  10. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    It's pretty late here right now, so I'll be heading to bed (don't want to make any stupid, easy-to-avoid mistakes), but my schedule for tomorrow is clear. Expect a release within 15 hours :)
     
  11. sonicviz

    sonicviz

    Joined:
    May 19, 2009
    Posts:
    959
    Hi,
    Nice work on converting the material UI to uGui.

    Having a play with it now.

    Looking at the selection box, is it possible to limit the number displayed so it goes into scroll mode automatically but takes up a smaller size on screen? Like a picker control.

    Is there any auto switching of assets based on resolution needed?
     
    Last edited: Dec 11, 2014
  12. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    Was a few hours late, but check the latest release :) (You may have to re-create your SelectionBoxes for them to work properly)
     
  13. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    Check the latest release :)

    If you want the height to be determained by the screen height, check the 'Auto Max Screen Height' option and set the 'Percentage of Screen Height' to your desired value.

    If you want the height to be an absolute number of items, uncheck the 'Auto Max Screen Height' option and set the 'Manual Max Item Height' to your desired value.

    As of now, most of the assets will scale as far as 4x before losing any quality, but I will be implementing such a system later on.
     
  14. sonicviz

    sonicviz

    Joined:
    May 19, 2009
    Posts:
    959
    Great, ty!
     
  15. Candescence

    Candescence

    Joined:
    Aug 26, 2014
    Posts:
    94
    Hey, I'm getting an error with the latest version of this package:

    "Assets/MaterialUI/Scripts/Components/ButtonConfig.cs(96,70): error CS1061: Type `Button' does not contain a definition for `transition' and no extension method `transition' of type `Button' could be found (are you missing a using directive or an assembly reference?)"

    There's multiple similar errors in that script and some others. That being said, it might just be a problem with my project, it works fine in a fresh project.
     
    Last edited: Dec 11, 2014
  16. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    Does it point to a line in the code?
     
  17. Elit3d

    Elit3d

    Joined:
    Jan 25, 2014
    Posts:
    21
    also, can I start off with any default value from dropdown instead of starting with the text SELECTION?
     
  18. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    Yup, just change the text of 'SelectedText', then stretch the parent RectTransform (SelectionBox) to fit the text. (Latest release, 0.1.3)
     
  19. Candescence

    Candescence

    Joined:
    Aug 26, 2014
    Posts:
    94
    Yeah, line 96, as stated in the error - the problem is with any line that has <Button> in it, such as "gameObject.GetComponentInChildren<Button> ().transition = Selectable.Transition.ColorTint;", though as I said, it might simply be an issue with my own project for all I know, it works fine in fresh projects.
     
  20. sonicviz

    sonicviz

    Joined:
    May 19, 2009
    Posts:
    959
    Looking good.

    Some more suggestions:
     
  21. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    Thanks for the link, it looks like an interesting data binding framework! I'll definitely be using namespaces in the near future, cheers for the suggestion. As for the single folder, unfortunately it seems like I'm unable to manage that at the moment, due to Unity's 'magic folders' (Editor/Resources).
     
  22. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    New in MaterialUI v0.1.4 - AnimTrigger component allows you to animate a massive variety of variables from different scripts, all without a single line of code!

    See it in action here!

    Get it here!
     
  23. sjm-tech

    sjm-tech

    Joined:
    Sep 23, 2010
    Posts:
    621
    Interesting project!
     
  24. Sykoo

    Sykoo

    Joined:
    Jul 25, 2014
    Posts:
    1,390
    This looks pretty interesting!
     
  25. fffMalzbier

    fffMalzbier

    Joined:
    Jun 14, 2011
    Posts:
    2,547
    Could it be that MaterialUI package 0.1.5 is out of date and not compatible with the the newest GUI changes?
    In general , a very nice idea.
     
  26. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    Yes, unfortunately. However, version 0.2.0 will be coming out soon, with fixes to existing issues, a whole lot of new features, and will be compatible with the latest (4.6.2) version of Unity.
     
    ercu likes this.
  27. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
  28. sjm-tech

    sjm-tech

    Joined:
    Sep 23, 2010
    Posts:
    621
    Wow Saxy_Guy! Last version is amazing!
    Thanks!
     
  29. nah0y

    nah0y

    Joined:
    Apr 4, 2011
    Posts:
    74
    Hello,

    Just wanted to say I followed you on Reddit with this project, and I'm really happy (for you and me :D) that you released it! Congrats ;) Looks really cool!

    PS : There is no issue with Editor/Resources "magic" folders of Unity, they can be anywhere, even inside 27 folders, it will still work.
    (Just to make sure I'm clear, puting things in Editor/xx.cs or SaxyGuy/Editor/xx.cs is the same thing)

    Edit: Ok you already switched to a single folder :)
    Just wanted to stay. Wow, I'm astounished by the quality! Really really great work! Will play with it to see all of it :)
     
    Last edited: Feb 17, 2015
  30. Play_Edu

    Play_Edu

    Joined:
    Jun 10, 2012
    Posts:
    674
    Awesome Pkg. Would be great if this Work With NGUI.
     
  31. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    You buy me a license and I'll make it happen ;)

    (Seriously though, I'm actually planning on getting one and porting it to NGUI. I'll keep this thread updated with the details)
     
  32. Play_Edu

    Play_Edu

    Joined:
    Jun 10, 2012
    Posts:
    674
    NGUI Free Ver also available in assets store Would be great if you Work With it.
     
    Last edited: Feb 19, 2015
  33. SAOTA

    SAOTA

    Joined:
    Feb 9, 2015
    Posts:
    220
    This is great. thanks for sharing this with the community!!
     
  34. fffMalzbier

    fffMalzbier

    Joined:
    Jun 14, 2011
    Posts:
    2,547
    NGUI free is not really a option... its the last 2.x version and the current version if NGUI is 3.8.0 .
    Its not compatible anymore.
     
  35. Allen0012

    Allen0012

    Joined:
    Sep 5, 2009
    Posts:
    86
    This is great!

    Why NGUI? Does it add any functionality?
     
  36. jasonFHH

    jasonFHH

    Joined:
    Jul 17, 2012
    Posts:
    21
    Does this framework (or any other framework) support a tab-based navigation controller? Or even the concept of a navigation controller period? Would be great to have a cross-platform solution for something like that.
     
  37. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    It currently doesn't, but will certainly be something I'll add.
     
  38. grosssmutttr

    grosssmutttr

    Joined:
    Apr 15, 2014
    Posts:
    166
    Awesome work!

    I'm not sure whether I'm allowed to use it in my commercial project (mobile app).
    I saw the apache 2 license but I'm not sure whether I have to mention your work (name, link) or what else I must consider?
     
  39. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    For the prerelease (<1.0.0), as long as you mention that you used MaterialUI (eg. This uses MaterialUI for Unity https://github.com/InvexGames/MaterialUI) in your app description, and include the license in any distribution of your source (you don't have to open-source it if you don't want), that will be fine.
     
  40. SekyCZ

    SekyCZ

    Joined:
    Mar 31, 2015
    Posts:
    2
    Awesome work, keep it up :) I found a bug in Navigation drawer. If i double click at some item at list it creates window out of border
     
  41. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    Thanks!
     
  42. SekyCZ

    SekyCZ

    Joined:
    Mar 31, 2015
    Posts:
    2
    You're welcome. Also in ScreenConfig.cs script at 166 row, "SetActive" would be more probably more convenient in Update method or synced with animation, because sometimes it causes blinking screen in the middle and after that starts the animation (It occurs at left/right slideIn, moving activation into Update fixed it for me). I'll keep you noted, if i found anything else.
     
  43. Elit3d

    Elit3d

    Joined:
    Jan 25, 2014
    Posts:
    21
  44. thangpq

    thangpq

    Joined:
    May 21, 2015
    Posts:
    3
    Hi. I'm new to Unity and figuring how to change the fixed size of List Item ?
    I tried move the sub-item up and down further but the List Item's size still didn't change
     
  45. Seth-McCumber

    Seth-McCumber

    Joined:
    May 26, 2013
    Posts:
    141
    Still loving this package! It just gets better and better.

    I was wondering if there was anyway to use something like Androids Palette class with this framework. It essentially pulls the main colors out of the image and gives them back to you in the Material palette form.

    Thanks!
     
  46. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    Hey guys.

    I'm now working on MaterialUI in a private repo, adding features and the likes for an official release on the Asset Store - this means that I won't be adding/fixing anything more in the current open-source one (sorry).

    Feel free to fork it if you'd like to fix any issues or add any new features yourself, and/or send me an email at invex@invexgames.com if you want me to let you know when it's available. Of course, I'll still use this thread to keep you guys updated on the state of things.

    Also, a huge thanks to the totally unexpected amount of enthusiasm - it's certainly helped me decide to make this a serious project that people will be able to use for useful things.

    Cheers!
     
  47. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    I'm not sure how easy it would be to use the actual Android class for that, but the Image -> pallette function is a feature I'm planning on adding in the near future :)
     
  48. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    RIght now, a lot a things are fixed-size and don't really offer a whole lot of customization if you're sizing things outside the spec. The plan is to eventually make everything fully customizable and easy to resize like the default Unity UI, although I couldn't really give you a date on that.
     
  49. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    Hey there, sorry for the late reply! Have you checked all the references are accounted for, and you maybe don't have another class called Toggle?
     
  50. Saxy_Guy

    Saxy_Guy

    Joined:
    Nov 27, 2013
    Posts:
    32
    Thanks for that (and sorry for the late reply).
    I'll fix that in the next release :)