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

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!

 

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?

 

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.

 

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.

 

Worked perfectly, thanks!

 

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!

 

This is so awesome! I'll definitely be using this. Keep up the work and I'm looking forwards to more updates!

 

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

 

many thanks, when can I expect the next release?

 

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

 

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?

 

Was a few hours late, but check the latest release (You may have to re-create your SelectionBoxes for them to work properly)

 

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.

 

Great, ty!

 

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.

 

Does it point to a line in the code?

 

also, can I start off with any default value from dropdown instead of starting with the text SELECTION?

 

Yup, just change the text of 'SelectedText', then stretch the parent RectTransform (SelectionBox) to fit the text. (Latest release, 0.1.3)

 

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.

 

Looking good.

Some more suggestions:

• Namespace it just to keep it cleanly separated from anything else
• Make it imported under a single parent folder for clean organization when importing into an existing project
  
• Maybe talk to these guys about integrating it into a simple data binding framework http://forum.unity3d.com/threads/data-bind-for-unity.283252/#post-1884757

 

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).

 

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!

 

Interesting project!

 

This looks pretty interesting!

 

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.

 

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.

 

Version 0.2.2 is out now guys! Works with the latest version of Unity, and has a whole lot of new stuff. Get it here: https://github.com/InvexGames/MaterialUI/releases

 

Wow Saxy_Guy! Last version is amazing!
Thanks!

 

Hello,

Just wanted to say I followed you on Reddit with this project, and I'm really happy (for you and me ) 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

 

Awesome Pkg. Would be great if this Work With NGUI.

 

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)

 

NGUI Free Ver also available in assets store Would be great if you Work With it.

 

This is great. thanks for sharing this with the community!!

 

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.

 

This is great!

Why NGUI? Does it add any functionality?

 

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.

 

It currently doesn't, but will certainly be something I'll add.

 

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?

 

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.

 

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

 

Thanks!

 

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.

 

Seem to be getting an error on my project, on a seperate project it seems to work. http://gyazo.com/91f6e926cc53cdb9397e155d8573694a

 

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

 

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!

 

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!

 

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

 

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.

 

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?

 

Thanks for that (and sorry for the late reply).
I'll fix that in the next release