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

MaterialUI (Google Material Design for Unity)
Create beautiful Material Design layouts in your apps and games!

--

Hey guys! We're now available on the Asset Store!
​

​

It's now easier than ever to create beautiful Material Design layouts in your apps and games with MaterialUI!

Almost all of the components featured in Google's Material Design specification can be created with the click of a button, then tweaked and modified with powerful editor tools.

MaterialUI components act just like those in Unity's UI system, and are designed to be as compatible as possible with other uGUI-based assets.

These aren't just image elements; this is a real, full implementation of Material Design in Unity - pixel-perfect controls with gorgeous animations that are intended to take the place of the default uGUI components (eg. Input Field, Dropdown, toggles etc)

Features include...
- Menus to easily create all types of components
- Integrated (code and in-editor) Tween engine
- Complex dialogs that can be called with a single line of code (eg. Alert, Checkbox, List, Loading, Time picker, Date picker etc...)
- Screen component to create awesome animations between screens
- Example scenes for every type of control
- Vector icon support (via fonts)
- Full editor integration
- Material Design color palettes
- Full C# source code
- Great support
- And much more!

Launching price of $50!

Tutorials | Website

Screenshots









Videos

​

 

Been following this for a while now - really excited for its release. Drag to refresh, will it be in the first release?

 

We are too! Thanks
And no sorry, pull to refresh should be implemented in later versions!

 

Anything new since the beta?

 

Well, we polished everything, fixed a lot of issues, improve the usability, reworked components so they work great with the UI system, use vector fonts wherever possible and a lot more. There is (I think) more than 400 commits since the last beta version we sent

 

I can't even tell you how excited to get this. I've been following you guys since last year and tried the version you had on GitHub.

I did have a few questions though. Does your asset bind data to the UI using MVVM, MVC, or MVP? Is this something we need to implement on our end?

 

Any news on it being accepted to the store?

 

Thanks a lot!
And yes, this is something that you need to implement on your end for now. We tried to respect as much as we can the same "guidelines" that Unity does with the basic UI components. So they essentially work the same, basically you have multiple components attached to a GameObject on top of the ones Unity already has, that add all the Material things

Nope, no news
I think we'll have to wait again at least a full week though...

 

What's performance like on mobile?

 

It's still on the todo list to test all of that
But as it uses the Unity UI system, it should not be so different from it in term of performance, but we'll let you know once it's done!

 

You've not built it to mobile before submitting it? Thought you would have.

 

There's still a TON of things we want to do to with MaterialUI and we decided to stop doing things at a certain point to release a first version, otherwise it would have been released by the end of 2016

 

Understandable, but I know my friend on the beta got very low FPS when built to android

 

We've optimized a lot of the components since the last beta build, and having just tested a bunch of them in a scene, I can say that they run just fine

Also, your friend may have been using one of the early Unity 5 builds (the latest at that time), before Unity greatly improved the UI performance.

 

adding to watched threads, looks like a pro product

 

Hi,
Asset looks cool.
Where's the assetstore link? Doesn't seems to be able to find it with assetstore search.

Thanks

 

That's great, looking forward to release.

It's a big asset I think, might take Unity a while to verify.

 

Looks like it's live! https://www.assetstore.unity3d.com/en/#!/content/51870

 

https://www.assetstore.unity3d.com/en/#!/content/51870

its in

 

Hello Everyone!
As @the_greenlig and @DNArt said...

We're now available on the Asset Store! This is awesome \o/
​

 

It would be nice to see some demo, it is hard to say from video which effects included and which are just video FX

 

The whole thing is playing inside the Unity editor, I simply use recording software to capture it, and video editing software to zoom out at the end. Things like the map are simply image assets, but everything else is done via Unity components via the editor/code.

I'm planning on sharing the project for that video soon, once I clean it up a bit

 

An android demo build would be nice too

 

It's already on the todo list, but it's super big and full of urgent things to do ^^

 

I'm targeting a game to WebGL and I'd like to use this, but I'm a little hesitant to buy it for $50 in case it doesn't work well (although it looks nice in the video). Do you have an online version we could try? A web demo would be nice anyway so we could get a feel for the UI's look/feel

 

That's pretty cool then. When the price is going to be increased? May I ask to drop a note before that?

 

We aren't 100% sure right now, somewhere between 2-4 weeks.

We'll be sure to let you know before it happens

 

We're working (right now) on a demo app that we'll release on multiple platforms when it's ready (including WebGL), so yes, soon

 

Bought the asset and tried the demo scenes. Looks pretty cool, but I'd like to use it for a cross-platform iOS/Android app, and it doesn't work on iOS yet (using Unity 5.3.1f1).

When I try to do an iOS build, I get this error about Ionic.Zip.dll:

Cross compilation job Ionic.Zip.dll failed.
UnityEngine.UnityException: Failed AOT cross compiler: /Applications/Unity/PlaybackEngines/iOSSupport/Tools/OSX/mono-xcompiler-wrapper.sh --aot=full,asmonly,nodebug,static,outfile="Ionic.Zip.dll.s" "Ionic.Zip.dll" current dir : /Users/Radazen/Programming/unity/Projects/Test/Temp/StagingArea/Data/Managed
result file exists: False. Timed out: False

stdout:
Mono Ahead of Time compiler - compiling assembly /Users/Radazen/Programming/unity/Projects/Test/Temp/StagingArea/Data/Managed/Ionic.Zip.dll
The class Microsoft.CSharp.CSharpCodeProvider could not be loaded, used in System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089
The class System.Enum could not be loaded, used in mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e
The class System.Enum could not be loaded, used in mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e​

After some searching, I found that I can set Unity's API Compatibility setting to ".NET 2.0" instead of ".NET 2.0 subset," and that allows me to compile and run on an iOS device.

But then, while running on iOS, dialogs won't close and I get errors like the one below. This happens in the dialogs demo scene, but I imagine that it's an issue everywhere:

ExecutionEngineException: Attempting to JIT compile method 'System.Reflection.MonoProperty:GetterAdapterFrame<UnityEngine.CanvasGroup, single> (System.Reflection.MonoProperty/Getter`2<UnityEngine.CanvasGroup, single>,object)' while running with --aot-only.

at System.Reflection.MonoProperty.GetValue (System.Object obj, System.Object[] index) [0x00000] in <filename unknown>:0

at MaterialUI.AutoTweener.CheckValueType (System.String variableName) [0x00000] in <filename unknown>:0

at MaterialUI.AutoTweener.Init (UnityEngine.GameObject parentGameObject, System.Object parentComponent, System.String variableName, System.Object tweenEndValue, Single tweenDuration, Single delay, TweenType type, UnityEngine.AnimationCurve sourceCurve, System.Boolean[] modifySubvalues, System.Action callback) [0x00000] in <filename unknown>:0

at MaterialUI.TweenManager.Tween (UnityEngine.GameObject parentGameObject, System.Object parentClass, System.String variableName, System.Object endValue, Single duration, Single delay, TweenType tweenType, UnityEngine.AnimationCurve sourceCurve, System.Boolean[] modifySubvalues, System.Action callback) [0x00000] in <filename unknown>:0

at MaterialUI.TweenManager.AutoTween (UnityEngine.GameObject parentGameObject, System.Object parentClass, System.String variableName, System.Object endValue, Single duration, Single delay, TweenType tweenType, UnityEngine.AnimationCurve animationCurve, System.Boolean[] subvaluesToModify, System.Action callback) [0x00000] in <filename unknown>:0 ​

 

Any more on mobile performance yet? Will insta-buy if I get confirmation that it is good.

 

Hey there

Hum... that's weird, I don't have any error when building to iOS...
One better solution is to do this, though:
- Go to MaterialUI/Utils/
- You'll find a folder called "UnityZip"
- Create a folder called "Editor" inside MaterialUI/Utils/ (so you'll have MaterialUI/Utils/Editor/)
- Move the "UnityZip" folder inside this "Editor" folder

Before: MaterialUI/Utils/UnityZip/
After: MaterialUI/Utils/Editor/UnityZip/

Try rebuilding

 

Nope, nothing on it yet, we're still busy making demo scenes and fixing/improving other things :/

 

Weird, the build issues were definitely on my end. I created a new empty project and managed to build for iOS without having to change anything. Now my concern is performance...

I've noticed that most/all of the UI geometry is being rebuilt every frame, which is slowing things down a LOT on mobile. For example, MaterialButton is calling UpdateButtonSettings every frame, which is calling SetLayoutDirty every frame, which is causing the Canvas to rebuild stuff every frame. In something like the Dialogs demo scene, the profiler says Graphic.OnRectTransformDimensionsChange() is being called 220 times per frame, even though none of the geometry is actually changing dimensions.

Any idea if this can be fixed/changed? Thanks!

 

Hey there, good to hear it builds

We're currently working on (among other improvements and fixes) an update that will limit how often things like this are called, and should greatly improve performance. Can't quite pin an eta on it at this stage, though.

 

This is the only thing stopping me buying at the moment. If performance is bad the there might as well be no content. IMO this should be top of your to-do list.

 

Hi,
Do you think you're going to have a mobile performance feedback before price goes up?
Thanks

 

You'll be glad to know that I've just finished going through all the components, optimizing performance where I can

One of the tests I ran consisted of a scene with 600 floating action buttons. Before I made the changes, my i7-4770k took ~120ms () to complete a frame, now it only takes ~4ms. Admittedly, this is something I really should have done before release, but it will certainly no longer be a problem (and is something I will continually improve as I add features).

You can be sure that we won't be raising the price until the new version with updated performance has been out a couple of days. We'll also have a demo standalone application out by then so you can check out some component samples yourself

~ Declan.

 

MaterialUI Update - Version 1.0.1
An update is available on the Asset Store

-- IMPROVEMENTS --
-[Dialogs] 'Destroy on hide' is now optional.
-[Dialogs] Removed the need to specify the image type when passing an OptionDataList to dialogs (ies. SimpleList).
-[Dialogs] Can now have a sprite image in the title area.
-[Dropdowns] Performance when scrolling improved.
-[InputFields] System for validating text has changed (See Scripts/MaterialUtils/InputFieldValidators for examples).
-[Ripples] RippleData now has a PropertyDrawer and look nice in the editor if used by other classes.
-[Tabs] Tab content is now properly vertically positioned.
-[Tabs] TabPage now has a public property to enable/disable a page.
-[Tabs] When a page is disabled, the grey panel with 'Tabdisabled'is now optional.
-[Tabs] Deselected tabs now have less opacity (optional setting).
-[Tabs] Removed 'interactable' property from inspector (use respective TabPage to enable/disable instead).
-[Tabs] Ability to scroll through tabs is now an optional setting in TabView.

-- FIXES --
-[Buttons] 'Convert' is now disabled if more than 1 button is selected (as it doesn't work properly).
-[Dialogs] DialogSimple now correctly shows sprites.
-[Dropdowns] Fixed crash on Android devices when dropdowns opened.
-[Ripples] UpdateNormalColor now works properly, and can be reliably used to (smoothly) change a button'scolor.
-[ScreenView] Fixed issue where ScreenView would block input events from reaching objects visibly above it (ie. NavDrawer).

 

Like the sound of the new update.

I'd love to see a way of doing tables implemented into this asset.

 

Ooo and graphs too. That'd be cool.

 

I would really like to see tables too!

Eager to play with the new update!

 

This is on the feature list, but not before a version 2 of MaterialUI...
Sorry but other more important things have priority

 

I'm getting a little carried away with this. It just seems so cool!

 

Any word on mobile performance? If its not performing there I can't use it.

 

Hi again!

Quick question: do you think you're going to make a web demo so we can see some of the components in action?

Thanks!

 

That's currently on the top of our to-do list, and we're making some great progress on it. The next update we submit should perform wonderfully on a large variety of mobile devices

And that's next on the list

~ Declan

 

Does the final version have a way of adding list items via code. I have just used Instantiate on the beta.

 

This asset looks amazing, and I'm just about certain I want to purchase it. However, one thing holds me back. I'm concerned that anyone who uses Material UI will end up with a style that looks nearly identical to everyone else.

So my question is: are the aesthetics of the components highly adjustable? Judging by the screenshots, they obviously can be tweaked a lot, yet I get the impression that many of the stronger design elements (like line, shape, and [sense of] depth) are permanently locked away. More specifically, I guess what I'm asking is whether or not Material UI is capable of creating styles that can look and feel different from one developer to another, rather than just changes to the color palette and fonts.

I'm aware this is a subjective question. I'm also aware that this asset is based off of Google's guidelines for clean interface design. I just never fully grasped if such guidelines restricted the designer to a too-narrow visual style. I assume things will be permanently fixed in that flat, minimalist "Material" style. Which is the point. What I'm wondering is if you personally think designers who use this asset can break away from a feeling of sameness, namely from other designers who are also using this asset.

 

Well, this package is aimed at those who want to develop apps that mimic the material design theme of Android Lollopop + versions. That doesnt mean that you cant just use some of those ui widjets with your own textures to achieve a different visual style and just benefit from the scripted behavior and effects. I wouldnt expect though an out of the box solution for a fantasy themed ui - for example - from this package, and i dont think it should provide one to tell you the truth

 

The components are extensively customizable, and are designed to work with many (and in some cases, all) elements replaced and/or heavily modified.

With the level of customization available, MaterialUI should be no more bound to the narrow visual style than the guidelines themselves - I believe that there's not much, if anything, in our implementation that should restrict a user's ability to create differing designs.

As for the guidelines themselves and tips on how to avoid having that same narrow style, Google has provided a handy guide for expressing brand - I'd say it's worth a read

~Declan