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

I see. That brand guide by Google helped to open my eyes a bit to its potential. It reminds me of motion graphics and its near limitless combinations.

At first moure's above response turned me off to the asset, as it seemed to confirm the "narrowness" I had feared (...this package is aimed at those who want to develop apps that mimic the material design theme of Android Lollipop...). I see now that this is just one of the more obvious implementations of the asset, but certainly not the only one.

So it is not at all that this asset is aimed, specifically, at designing an aesthetic in the spirit of Android; it's more accurate to say that it's for anyone interested in the broader concept of Material Design. The practical uses for Material UI, and its purpose, are far broader and wide ranging.

I understand that my confusion on the matter has more to do with my lack of knowledge on Material Design than with your clarity on presenting Material UI, which has not been vague or misleading. If Material UI really is no more bound than the guidelines themselves, then it might be what I'm looking for.

 

Hello again
We removed support for lists for now, in the released version of MaterialUI.
Because we want to rework and improve it before submitting it to the world (yes, as you know, lots of things to do!)

~Yohan

 

Hello Internet!
MaterialUI 1.1.0 has been submitted to the Asset Store! We're waiting for it to be approved

 

Got a change log?

 

The animations seem to "vibrate". Anyone else seeing this?

 

Any word on the v1.1.0 update? I keep eagerly checking the asset store to see if it's available yet, as I'm really hoping to get better frame rates on mobile! Looking forward to the update; MaterialUI is easily the most polished 2D UI option I've seen for Unity, and with some performance improvements and bug fixes, it will be phenomenal. Keep up the good work!

 

Hello!
We submitted it to the Asset Store 6 days ago, waiting for approval

Thanks a lot for the compliments!
We are working hard to add new features and improvements to make it as best as we can!

~Yohan

EDIT: 1.1.0 is now available!

 

v1.1.0 is now live on the Asset Store - would you mind letting me know if this is still present in that version? Thanks

~ Declan.

 

Hey, just following up with a previous poster's question. Is the current version compatible with Web GL (if not any progress towards it in the near future)?

As we have a copy of MaterialUI we have tried some Web GL builds of the example scenes and they work sometimes (1/3 refreshes). Most often we get a NS_MEMORY_OUT_OF_ERROR (across various memory settings).

 

Hey

We recently made a WebGL demo that we'll be able to share soon (we hope).
And we didn't ran into any issue :/

What does "(1/3 refreshes)" means?
Also, when do you get the NS_MEMORY_OUT_OF_ERROR? When building?

Thanks!

~Yohan

 

Sorry I should of been clearer was tired yesterday. We can successfully build the demo scenes to Web GL. But when we test out the result of the build (i.e. launch the index.html) we run into a few issues.

The launching results seem quite variable. Roughly one out of three times we launch that index.html will succeed (i.e. we are able to get in and play with Material UI components in WebGL). When this succeeds however we still receive errors (http://imgur.com/0J6e6VC). We have tried different memory settings and different example scenes.

Most of the time when launching the index.html in a browser in developer tools we receive a NS_MEMORY_OUT_OF_ERROR. Other times we receive an uknown error.

 

Hum... is this something you have only when using MaterialUI? Or with any WebGL build?

 

Hello everyone!

We're proud to tell you that MaterialUI 1.1.0 is now available on the Asset Store!
We also made a small video to show what's new

-- IMPROVEMENTS --
- [Buttons] Massive performance improvements in both the editor and (especially) at runtime!
- [Buttons] A bit easier to use, thanks to an inspector redecoration and unneeded method/variable culling.
- [Components] Almost every component now has a interactable boolean, similar to that on standard uGUI components.(interactable can still be toggled manually on uGUI components for custom 'disabled' behaviour).
- [DialogAnimator] Added ability to choose slide in/out direction and tween type (you can see an example of how to use that in the Dialog example scene).
- [Divider] Added ability to create vertical dividers.
- [Icons] Update MaterialDesign icon set(41new icons).
- [InputField] Improved the use of customTextValidator, we now just need to call IsTextValid() instead of ValidateText(text, validationText).
- [InputField] Added option to only validate text upon first selection of InputField, rather than on Start.
- [Panel] Added more creation options (go to MaterialUI -> Panel to see them).
- [Performance] The sprites used by MaterialUI are now packed into a spritesheet for better use of space at runtime.
- [Performance] Improved shadow behaviour and performance, now each shadow doesn't have its own Update().
- [Ripple] New 'SetGraphicColor' method correctly sets the graphic's color, regardless of its ripple/highlight settings. Smooth animation to new color is optional.
- [Ripple] Added property 'rippleColor' to change ripple color and automatically update the highlight color.
- [Ripple] Added highlight blend amount option (to specify the amount of blend to use when automatic highlight is selected).
- [SelectionControl] Now has some layout components so it's always nicely aligned in every layout group.
- [Slider] Added option to make left/right content opacity less, when not interactable.
- [Tab] Added a simple SetPage method that you can now call from the UnityEvent system in the inspector to change tabs.
- [Tab] Renamed pageEnabled to interactable.
- [Tab] Lower disabled Tab opacity.
- [Tween] Massively improved the Tween engine, which is now way faster! But will break your script if you used the old one.
- [Tween] Completely rewrote the tweening engine which now uses a new tweening method and pools tweens, resulting in a system which is now orders of magnitude faster! It's also a bit easy to use and keep track of active tweens.

-- FIXES --
- [Dialog] No longer overrides parentCanvas if it isset manually.
- [Dialog] Fixed the dialog example scene.
- [Divider] Now have a min width/height (depending on horizontal or vertical divider) of 1.
- [Dropdown] Fixed bug where the first expansion of a dropdown would be positioned incorrectly, and sometimes go offscreen.
- [Dropdown] Fixed issue where Dropdowns created under a LayoutGroup would sometimes have a width of 0.
- [InputField] No longer rebuilds the canvas every frame when it doesn'tneedto.
- [Ripple] Fixed issue where enabling 'auto highlight color' at runtime wouldn't automatically refresh the color.
- [Screen] Fixed issue where transitioning to the already current screen would break things.
- [Slider] Fixed behaviour if'hasPopup'isfalse.
- [Slider] Fixed incorrect icon color (it was too dark).
- [Slider] Fixed issue where Sliders created under a LayoutGroup would sometimes have a width of 0.
- [Toggles] Fixed issue where RadioButtons would have incorrect labels on Start().
- [Tween] Removed from'AddComponent' menu as it is not a component to addon any GameObject.
- [VectorImage] Icons where not updated when changed via the Icon Picker while the Editor is playing.

-- NOTES --
- Due to the new tweening system working in a different way, EasyTween will no longer be able to tween values. This functionality will be replaced in the next update.

-- APIS UPDATED --
- The TweenManager and AutoTween classes have been changed dramatically. Check out the 'Animation' example scene to learn more about it.

-- EXAMPLE SCENES UPDATED --
(You might want to check these out to take a look at some of the above new features)
-*NEW* Animation (Shows how the Tweening system works)
- Dialogs (added example on how to change dialog show/hide directions)
- Inputs (updated example on how to use validation via script)

-- PREFABS UPDATED --
(* You may need to re-create/re-instantiate these in your project to apply some of the above changes)
- *Buttons (due to improvements, buttons you already have in your scenes might lose references to some components).
- Selection Controls (Checkbox, Switch, RadioButton)
--^ Fixed some color and opacity values for when they are selected or not
--^ Added some layout components in order to have great alignment in layout groups

 

Yes, they are still vibrating even in the latest version. Also, now the checkboxes seem to flash to a black color just before the animation finishes.

 

Fresh project with fresh import. The gif doesn't really show the vibrating, but it is there.

 

Also, the "sliders" example scene looks like this:

 

Hum... that's weird, I don't have that at all on my machine (neither the checkbox flash, nor the slider example scene broken).
Can you tell me what version of Unity you're using and is you're on Mac/PC (and which version)?

Thanks

~Yohan

 

5.2.2 on Windows.

 

Can you add me on Skype please? Username is tatelax.

 

Done

 

Hey everyone!

We just released our very first tutorial video, on buttons!
More will follow

 

Hey

If you want to remove the vibrating issues, you just need to uncheck the pixel perfect toggle on the canvas

 

Cool. Thanks.

Also, would love to see a cascading navigation drawer available as an option.

 

You mean something like that?

 

Yes, something like that. I don't understand the image 100%. This is a clearer example taken from the Material Design website.

https://www.google.com/design/spec/patterns/navigation.html#navigation-patterns

 

Hi,

I try to use the Tween Manager.

But I do not have help for Tween.

I try to handle the function after the end of the animation "Tween.CubeIn".

So I tried to use the "TweenManager.TweenFloat" There is no change in value.

How do I do?

m_OverscrollAmounts = Tween.CubeIn(m_EdgeAnimsCurrent, m_EdgeAnimsPower, m_EdgeAnimsDeltaTime, m_EdgeAnimDuration * 2f);

TweenManager.TweenFloat(f => m_OverscrollAmounts = f, m_EdgeAnimsCurrent, m_EdgeAnimsPower, m_EdgeAnimDuration * 2f, 0f, () => hLoadingBarHide(),false, Tween.TweenType.Linear);

And, What are the methods used for the EasyTween?

 

I just added that to the feature list, but know that there's a lot of other things more important for us to work on first :/

~Yohan

 

Hello everyone!

New tutorial is out
This time, on ripples!

 

Here's an example of what you'd do to move a RectTransform's position (attach to a RectTransform): http://pastebin.com/mjQTbGwA

Easytween is a component that allows you to run AutoTweens, without any code. Unfortunately, its functionality was removed in v1.1.0, due to major changes in the TweenManager/AutoTween system. It will return in v1.2.0

~ Declan

 

Hi,

first of all, thanks for the awesome work. The plugin's extremely handy, well done and time saving.
I wanted to ask which Canvas UI Scale Mode you suggest to work with (specifically talking about mobile development). I usually develop using a Canvas scaling with Screen size, but it doesn't seem to work well with the MaterialUI components (for example, the Nav Drawer in Portrait mode).
Would you suggest to use "Constant Pixel Size" and rely on the MaterialUIScaler component? What if I needed to mix some custom UI elements?

Thanks in advance!

 

Thanks! I'm glad you like it

All the components are designed to work best when scaled with screen size. On mobile, I'd recommend setting the 'base' resolution to 640x360 (swapped if portrait).

We're in the process of making in-depth tutorial videos for each aspect of MaterialUI, and one of them will definitely be covering scaling. Unfortunately, I can't quite pin an eta on it just yet.

What about the Nav Drawer in portrait mode doesn't work well? It very well may be a bug, but I don't seem to be seeing any issues.

I'd suggest doing what I mentioned above about the scaling mode, and using the values from the CanvasScaler, as custom UI elements likely wouldn't use MaterialUI's components

Cheers!
~ Declan.

 

Thank you for quick answer!

For example, this is what happens opening (as it is, from a freshly imported asset in an empty project) the Example scene "18 - Nav Drawers" and switching the preview to a Portrait aspect (I'm using 800x1280, in the screenshot).

In the scene, the Canvas Scaler is already set to "Scale With Screen Size", but the aspect and behaviour of the Nav Drawer already set up clearly seems off. Creating a new one using the Right-Click menu gives the same results.

Unity version is 5.3.3.f1.

I'm sure I'm just missing some important settings, I'd just like to figure out which ones.

Thanks again!

 

Hmm, looks like an issue. I'll take a look at it when I can

PS. We've just submitted v1.1.1, so a fix for this won't be in that update, but it should be in the next one

 

New tutorial on Vector Images! Watch it to see how to use vector graphics inside your UI

 

All your images are a solid color. Does it work vector images that are already colored before being imported?

Specifically these: https://roundicons.com/

 

Hello,

Sorry but no, we only support vector images with a single color. It seems like when you have multiple colors on a vector image and try to convert that to an icon font it causes some issues because an icon will use more than one unicode character.

 

Hello everyone!

We're proud to tell you that MaterialUI 1.1.1 is now available on the Asset Store!
We also made a small video to show what's new

-- IMPROVEMENTS --
- [Dropdown] Added new verticalPivotType modes: AboveBase, Top, Bottom, BelowBase.
- [Dropdown] Added optional delay to input after dropdown is shown to help prevent it from accidentally being closed straight away.
- [Menu] Added option to create empty UI objects with various layout components.
- [Menu] Added option create horizontal and vertical circle progress indicators with a label.
- [ProgressIndicators] Added option to start hidden.
- [TweenManager] Added Generic tween methods.
- [VectorImageData/ImageData] Added methods to check if the object contains actual image data.

-- FIXES --
- [Button] preferredWidth now returns the proper value.
- [Dropdown] Fixed issue where dropdowns with lots of items sometimes wouldn't animate properly.
- [Dropdown] Fixed issues with verticalPivotType.
- [Dropdown] When showing, dropdown won't have an icon object for list items that don't have any image data.
- [Snackbar] Fixed button position on portrait screens.
- [Tween System] Fixed bug where using Custom Curves wouldn't work.

 

We also released version 1.1.2 right after 1.1.1

Here's the changelog:
-- FIXES --
- [NavDrawer] Now takes scaling into account when being dragged in/out.
- [NavDrawer] Fixed background size when scaled.
- [ProgressIndicators]"StartHidden" now works with Progress Indicators with a label.
- [TabView]"Only show selected page" feature will check to see if the pages are enabled/disabled before enabling/disabling them.

 

A new tutorial is available. This time, it's on Toggles (Checkboxes, Switches and Radio Buttons).

 

Hello,
Thank you for the amazing job that you've on this. Any luck with expandable views? As soon as it's in, I'm jumping on board! Also, how's the mobile performance?
Thanks!

 

Hello
Thanks a lot! What do you mean by "expandable views"? Can you show an example?

Also performance on mobile seems to be working great!

 

Hey guys, did I miss something in an update somewhere? What happened to the ScreenManager?

 

Hello,
ScreenManager has been replaced with ScreenView
You should take a look at the example scene #17!

 

A new tutorial on Input Fields is now available!

 

Hi, here's one.
https://s-media-cache-ak0.pinimg.com/736x/38/db/67/38db678ea2528447f24cbd0fdaaf40ad.jpg

 

Oh yes!
We already have that on the feature list, unfortunately, there is a lot of more important things we need to finish first :/
But it'll be there in an update some day

~ Yohan

 

Would be nice for the next tutorial to cover dialogs.

 

Whats the best way to change the color of a button through code on a click? Having a few issues with this.

 

Hello, you can find the answer to your question, right here: http://materialunity.com/support/116/change-button-color-in-script

Have a great day

 

We haven't had a chance to do any tutorials as of late, but I like the idea of this possibly being the next one

~ Declan.