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

MaterialUI v1.1.3 is available on the Unity Asset Store

For the next update, we'll be working on the release video, more tutorial videos, code documentation and written guides, and preparing for the behemoth update that will be v1.2.0!

Here is the v1.1.3 changelog:

------ Version 1.1.3 ------
Recommended Unity version is 5.3.4f1, compatible down to 5.2.0f3.

-- IMPROVEMENTS --
- Added DragEventSender to help send input events to various objects, depending on the orientation of the drag.
- [Dialogs] Added Dialog Prompt with option to display only one or two fields.
- [Extensions] Added Transform extension to set the parent and scale of a Transform.
- [Snackbar] Added an overload to the Show method to specify the duration.
- [ToastManager] Added optional parameters to specify on which Canvas to show the toast.

-- FIXES --
- [Dropdown] Fixed weird positioning when scaled.
- [MaterialButton] Fixed issue where text would be improperly scaled if a MaterialButton is created in an empty scene.
- [MaterialSlider] Fixed bug with inputting text with the input field when the slider has a min value.
- [InputField] Add DirectoryExistsTextValidator and FileExistsTextValidator.
- [ProgressIndicators] Fixed issue with LinearProgressIndicators and 'Hide on start'.
- [Ripples] Fixed issues with non 'screen-overlay' canvas modes.
- [Toast] Now correctly initialize (for when you add the ToastManager in the scene yourself).

As always, please direct any feature requests/queries/feedback to our support forum, or you can email us at contact@materialunity.com. We hope you like the update

~ Declan Smith and Yohan Hadjedj, the MaterialUI team.

 

Here's a video to show some of the changes in 1.1.3!

 

What's performance like now? Anywhere near native?

 

I've fixed the glaring/major performance issues with all the components (eg. Buttons having wayyy too many draw calls). However, I'm still yet to go through everything with a fine-tooth comb and work out the more subtle performance issues and further optimize things. I will be rewriting many of the components in v1.2.0 with performance in mind, though, which should help a lot.

In all honesty, due to limitations of Unity and the inability to decouple the UI from the rest of the Unity engine means that MaterialUI will likely never be quite as fast as say, something built in Java with the latest Android SDKs. With that said, my goal for v1.2.0, along with adding quite a few more features, is to have MaterialUI as lightweight as it can be without reducing ease-of-use and customization, with as little draw calls as possible. This should result in a consistently high framerate and little stuttering for mid-to-high end devices, and a suitable framerate for lower-end devices.

~ Declan.

 

Hello everyone!

We released 2 new tutorials, available right here:

 

Hey,

Bought the asset, loving it.

1. Couldn't find a way to modify the Tab View example scene so that I would have only text instead of icons on each tab. Is there a way to do that?

2. When changing to portrait view, the nav drawer looks scaled improperly - from what I understood the fix will be included in the next major update?

3. Feature request: I know there are lots of things much more important to add right now but it would be really cool if you could include the custom scrollbar from the Contacts menu (of any android phone). For example, if I have a long list of people and would like to scroll directly to J, K, L and so on.

Many thanks,
Raydekk

 

Thanks a lot!

Well that's because in this example scene, we use a TabView that only has icons...
It is all controlled under Tab View/Tab Bar/Container/Tab Item Template
On this GameObject (Tab Item Template), you'll see a TabItem script attached, and there's a components dropdown, you'll see "Item Text" and "Item Icon".
If you just want a text, you'll have to remove the reference to the Item Icon here, and create a Text child to "Tab Item Template" that will be your title, then drag it to the "Item Text" component of the Tab Item script.
And on each Page (under Pages/Container) you'll have to define the text you want to display, and click the small X on the icon to say you don't want an icon.
But the fastes way might be to go to the MaterialUI menu and create a TabView with text only

Declan will take a look at it and fix it for a next update

This is a great idea, we'll add it to the feature list

Have a great day!

~ Yohan

 

Worked perfectly, thanks!

 

There are no mobile-optimized afterwards.
Tab view is a problem, depending on the screen size.
A problem occurs when the screen is large (Android LG G4 device)
In addition, there should not click on strange sometimes placed in the input field also screen.
In addition, Galaxy Note 5 Click the button should be well aware of this.
Galaxy Note 5 is recognized must click several times.
And so there are a variety of problems.

I was released in Google Play this week.
But I do not know what to do too many problems.
I regret using this plugin.

What should I do if I am?

 

Hey again,

1. Been playing around with MaterialUI and noticed a somewhat weird bug regarding buttons in general.
In my example I have a Nav Drawer, and each of the elements in the List opens up a different Screen with an App Bar (that has a back button which takes you back to the Nav Drawer).

If I touch the button and the finger stops touching the screen above the button, the ripple is created and the back function is executed successfully (screen tweens out and nav drawer appears). Now, if I touch the button and the finger stops touching the screen somewhere NOT above the button (basically touch the screen, slide to the middle of the screen and release touch), the ripple is created but the back function is NOT executed - nothing happens.
In my opinion, if the ripple is shown, the function should be executed. I'm guessing maybe you need to change the execution of the buttons from OnFingerUp to OnFingerDown (like the ripple).

2. Another feature request
This is related to the tweening mechanism - mostly the Slide In one.
I have a button on my screen and when I touch it I want a Screen to slide in from below, but it must not cover the entire screen. This is similar to Google Maps when touching a certain point on the map, a screen slides in from below about 1/10 of the screen with the name of the place you touched like a restaurant's name and an icon for a restaurant. You can choose to slide down or touch outside the 1/10 screen - thus hiding it or you can slide it up to cover the entire screen if you want more information on that specific place.

EDIT: I managed to do no. 2 with the current features of MaterialUI, but it would be cool if it was somewhat build in (also with the swipe up/down component).

Thanks,
Raydekk

 

This would be really great! Any idea if/when this will be available?

Would love to see a timeline/roadmap.

 

Hello,

I'm sorry but I can't really understand everything you're saying, can you post your issues on the support forum? http://materialunity.com/support/

 

It would be nice to have some compatibility with TextMeshPro. For example, right now I can't use a Text Mesh Pro Text in a tab view. It's not showing up even though they are in the same layer. A normal text object works though. Let me know if you need a copy of TMP.

 

https://material.google.com/components/expansion-panels.html#expansion-panels-behavior

Not sure if I missed this before, but I just found some documentation on "expansion panels". A feature that myself and others have requested. Now there's some docs to go with it

 

https://material.google.com/whats-new/whats-new.html

Looks like expansion panels were added in May.

 

We are using Unity 5.3.5p1 and material UI 1.1.3..and we are facing a huge performance/Fps drop on our iPad(second generation) Device. Help Please. This happens when the button is clicked and the ripple begins.

 

I've added this to the list of feature requests, not sure how soon we'd be able to get it done however.

They look really nice! We'll definitely be adding those as soon as we can, along with other missing controls from the guidelines

 

Thanks for letting us know. This is something we're aware of and we're working to improve things for the next update

 

The buttons in MaterialUI are designed to work like the default Unity UI buttons, along with pretty much every button ever In your current OS, try clicking down on a button, moving your mouse/finger away, then releasing - you'll notice that the button's function isn't performed, but there is (usually) visual feedback upon the click down (or hover).

As for #2, you might want to look into using a panel that slides up from below the screen with the tween system.

Eg. When you press the button, you could fire this:

TweenManager.TweenVector2(vector2 => panelRect.anchoredPosition = vector2, startPosition, endPosition, 0.5f);

~ Declan.

 

I've added functionality to MaterialUIScaler for v1.1.4, that will swap the CanvasScaler's reference resolution's orientation if the screen's orientation changes - this should mean that components (NavDrawer included) don't scale weirdly if the device is turned sideways

 

MaterialUI v1.1.4 has been submitted to the Unity Asset Store

For this update, we've been working on improving performance on Mobile devices, although it's a task that we'll continue to focus on throughout the v1.1.x releases.

The biggest performance improvement is in the way ripples now work:

Previously, ripples used the same VectorImage system that our icons and other (non-sliced) graphics use. Although this resulted in really nice crisp ripples, it also meant that every frame, a new ripple had to be drawn (from the vector font data) in the font texture - turns out this really killed performance on low-mid end devices (who knew?).

The new ripples use a really cool (borderline black magic) thing called signed distance fields - the upshot of this is that ripples all use a single 8kb texture, but still look (more or less) smooth at any size and scaling, all whilst sharing a material for a single draw call. Yay! The best part, however, is that all these changes are internal, and you won't have to change a thing

Other noteworthy changes include inspector reorganization and improvements, useful methods added to MaterialColor, and more components working with the Canvas' world space mode (which should help those of you wanting to use MaterialUI in VR).

Here is the v1.1.4 changelog:

------ Version 1.1.4 ------
Recommended Unity version is 5.3.5f1.

-- FEATURES ---
- [AppBar] Added MaterialAppBar component to tween app bar colors, and convinience inspector fields for child buttons.
- [Buttons] Added RefreshRippleMatchColor method to refresh the ripple's color to match the target graphic, at any desired time.
- [Dialogs] Added CreateDialogDatePicker in DialogManager.
- [Dialogs] Added localisation methods to DialogDatePicker (SetDayOfWeek + CultureInfo + DateFormatPattern).
- [DragEventSender] Added options to have seperate left/right and up/down, or horizontal and vertical.
- [Extensions] Added InvokeIfNotNull extension method to Func<T>.
- [MaterialColor] Added method to calculate whether light or dark icons/text are more suitable over a certain color.
- [MaterialColor] Added ColorDistance and ClosestMatrialColor methods to help with finding relevant MD colors from various colors.
- [MaterialColor] Added ClosestMaterialColorSet() method to get the closest material color set to a given color.
- [MaterialColor] Added OffsetShade() method to get a lighter or darker color from the Material palette to a given color.
- [Ripples] Added ability to match the Ripple color to a Graphic's color (eg. Button icon or text) for easier theming.
- [Ripples] Added an option to MaterialRipple to explicitly disable ripples, instead of just creating one with a size of 0.
- [Utils] Added SetBoolValueIfTrue method for easier bool handling in some cases.

-- IMPROVEMENTS --
- [AnimatedShadow] Improved tweening behaviour.
- [Dialogs] DialogDatePicker now has a cancel callback.
- [Dialogs] isModal is now able to be modified at runtime.
- [Editor] 'Selection Controls' in create menu renamed to 'Toggles'.
- [InputFields] TextValidator classes can now have a custom error message (for localisation for example).
- [InputFields] IsSelected method is now public.
- [Inspector] Added custom foldouts to various MaterialUI components for better organization.
- [InstantiationHelper] Modified HelpInstantiate method to use int[] instead of enum[], so it's more easily extendable.
- [MaterialColor] Rewrote the internal color values to be neater, and more easily accessible without extra overhead.
- [MaterialUIScaler] Added functionality to allow reference resolution orientation change upon screen orientation change.
- [ProgressIndicators] (Linear) Bar (child) height no longer hardcoded to 4, but now matches the root object's height, allowing for taller/shorter bars.
- [ProgressIndicator] Added custom inspectors for Circular and Linear indicators.
- [ProgressIndicators] When calling Show(), the indeterminate animation is now optional.
- [Ripples] Improved highlight behaviour when background normal color is transparent and not the same color (apart from alpha) as the highlight color.
- [Ripples] Now use a *much* faster rendering/smoothing method, which should greatly improve mobile performance.
- [Ripples] Improved behaviour in worldspace mode.
- [Sliders] animationDuration is greyed out in the inspector if the popup is disabed.
- [Texts] Rich text disabled by default.
- [Utils] Added SetBoolValueIfTrue method for easier bool handling in some cases.
- [VectorImagePickerWindow] Added ability to modify multiple VectorImageData items per pick (For VectorImages, Buttons etc).

-- FIXES --
- [Buttons] Setting values now works properly when multiple buttons are selected.
- [Dialogs] Now work in worldspace mode.
- [Dropdowns] Now work in worldspace mode.
- [InputFields] Removed a call that was causing issues with OpenGL.
- [InspectorFields] VectorImage fields now update their respective VectorImage/s when picked in play mode.
- [InputFields] Animations now use actual animationDuration.
- [NavDrawer] Now refreshes background size to avoid part of screen not being covered if scaling/orientation changes.
- [ProgressIndicators] Fixed issue with the 'starts hidden' option and hiding in edit mode.
- [Sliders] Changes to slider colors will now update the slider's colors in the scene.
- [Sliders] Added public UpdateColors() method to force the slider to update its colors.
- [Sliders] Fix issue of a slider input field not displaying 0 if the slider value is 0 (because of using ##.##).
- [TabViews] Now work in worldspace mode.
- [VectorImageManager] Updated CommunityMD set download to work with updated source.
- [VectorImageManager] Updated Octicons set download to work with updated source.

-- NOTES --
- [Ripples] Now use a *much* faster rendering/smoothing method, which should greatly improve mobile performance. This will eventually make its way to other graphics that must be crisp, but change size often (eg. radiobutton dots, slider handle).
- As ripples now use a custom material, using other custom materials now won't work.
- Due to the tweening system (introduced in v1.1.0) working in a different way, EasyTween is still no longer be able to tween values. This functionality will be replaced in v1.2.0.

-- EXAMPLE SCENES UPDATED --
- [Animation] Improved visuals.
- [AppBar] Added MaterialAppBar to example scene.
- [Dialogs] Small fix to the dialog example script (was using the wrong string array).
- [Dialogs] Show toast instead of printing to console in the prompt dialog example scene.
- [NavDrawer] EventSystem dragThreshold raised to 10, making it easier to press buttons in the NavDrawer.
- [NavDrawer] DragEventSender added to NavDrawer buttons, also making them easier to press.
- [ProgressIndicators] Fixed 'animate' option for SetProgress being flipped.

As always, please direct any feature requests/queries/feedback to our support forum, or you can email us atcontact@materialunity.com. We hope you like the update

~ Declan Smith and Yohan Hadjedj, the MaterialUI team.

 

Thanks for the big update. Looks promising. Another feature that would be nice since I'm using MaterialUI for a desktop application, would be menus.

https://material.google.com/components/menus.html#menus-usage

 

Great update!

When upgrading from 1.1.3 to 1.1.4 do we need to recreate any UI elements like buttons? Or everything is automated?

 

There are a couple of components that may benefit from being recreated if you're planning to use any improvements made to their prefab:

- LinearProgressIndicator bar (child) height no longer hardcoded to 4, but now matches the root object's height, allowing for taller/shorter bars.
- [Text] Rich text disabled by default.

However, as far as I'm aware, no existing UI elements should break from the update like they did in previous ones

~ Declan

 

Damn this Unity process takes a long time. Been wanting to check the new update for a couple of days now. Just updated to Unity 5.3.5 from 5.2.3 and some weird stuff happened (Material UI v1.1.3):

- buttons remain in the clicked state after being clicked
- I have a list of items (buttons) that is generated when a screen tweens in from the right and the tweening looks weird

But these issues were not present in Unity 5.2.3 - so I'm guessing (and hoping) they will not be present in v1.1.4 with Unity 5.3.5.

Would be nice if you could give access to alpha/beta versions to users that have bought the asset - after verifying the purchase of course.

EDIT: No.1 persists in v1.1.4 (I click a button in a screen and then the screen slides down - but when I slide the screen back up, the button stays in the Pushed state). Fixed no. 2 by removing an image component.

 

I've added the button state issue to the list of things to be done for the next release
Thanks for reporting it!

~ Yohan

 

What do you mean by 'pushed state'? Are the raised shadow and highlight both still present? Is this on mobile or desktop?

~ Declan.

 

I've uploaded a screenshot of the button problem. It manifests everywhere (editor, android, ios). If I press the right button and the panel slides back down, next time I slide it back up the pushed button doesn't have Shadow no.1 active. If I hover over the button, it resets back - but you know you can't hover over on Android

I also took a shot at the new 1.1.5 version and here are my thoughts:
- the tab menu portrait to landscape and back seems to be fixed (will try it later on an android build)
- the nav drawer has a couple of problems:
1. when the nav drawer slides in, it looks like it slides with the dimmed background. Before it worked fine, meaning the nav drawer slides in and the background turns dim, it doesn't slide from the left. This happens on portrait. I will check it out on Android with while changing device orientation.
2. portrait view again seems to be at 1/3 of the screen - check second screenshot. It should cover almost as much as the dimmed background is shown.

 

When in portrait, what is your reference resolution for the CanvasScaler? It's best to always have it the same orientation as the screen resolution (the resolutions don't have to match, just the orientation). MaterialUIScaler should automatically take care of this upon screen rotation, but you'll likely have to check it when the scene is started

 

This is my Canvas. I haven't been able to reproduce the weird dimmed background from the second screenshot in my earlier post. I suspected it was some DeviceOrientation function I was using (and not MaterialUI), but I played around with that one and still nothing. I guess you can write it off the list

Can you move the NavDrawer on the portrait to cover more of the screen - like the one in truePortrait.png?
Were you able to reproduce the button problem? I'm guessing that when I touch the button and it fires up the event that slides its parent screen back down and sets it inactive - maybe the ripple effect and some other animation are frozen or they don't finish.

 

It's been quite some time since we released a tutorial!
Here's the tutorial #8 about dropdowns

 

Hello,
Looks like a great asset. I'm considering buying this asset as a replacement for my homegrown UI solution, but was wondering how customizable is it. My apps typically deal with a lot of user data over time and the UI plays a big role in explain what data exists, or doesn't exist. Are the assets setup for modification (localization, new features, etc.)? For example, would I be able to extend the calendar to allow selecting multiple dates and/or adding an icon to specific dates?

Thanks!

 

Hello!

Well, we deliver the full C# source code, so you can easily modify the existing DatePicker for example, to allow multiple selection and add icons. It's just a prefab and some C# scripts

What do you mean by : "Are the assets setup for modification (localization, new features, etc.)"?

~ Yohan

 

Thanks, Yohan.
I was just referring to how modular the code is. Some 3rd party assets are great for a single purpose, but due to choices the developer made, functionality may be scattered or broken down in odd ways. Modifying those means that any time an update comes out I would be looking at a major effort to port my changes over. Ideally, I could write classes/widgets that inherit from your own, extending existing functions, and just focus on what's different.

I just spotted your main site and documentation so I'm going through that now. Thanks again for the quick response.

E.

 

@MaterialUnity any chance we can get an APK to checkout mobile performance before we purchase?

Thanks!

 

Hey
This is something we plan to do (release a demo scene on Android, iOS, WebGL, Mac, Windows etc...) but we're having a hard time finding time to do that!

 

Hello, very nice asset.

However I'm having an issue with scaling for mobile and using the dropdown. Everything looks perfect with my scaling settings but when I open a dropdown menu, it's position is all wrong. It's like the measurements are off.

I have my canvas scaler set to scale with screen size.. also base resolution is 360x640. Everything looks great... but not the popup position.

PS. It looks normal in the editor .. but when I run the game on my phone, that's when the dropdown position is wrong.

 

Hey

Are you able to send us a really simple small project (contact at materialunity.com) so we can work on it and fix the issue?

Thanks!

 

Hi! Actually the issue is easy to reproduce just using MaterialUI sample scene. (which is what I've been testing with).

Steps:
1. Create a new project, import MaterialUI and open example scene: "App Bars"
2. Create a new screen profile in the game view (iPhone 6s Plus Tall: 1080x1920)
3. On the canvas game object set the Canvas scaler's reference resolution to whatever you like.
4. Make sure UI Scale Mode is "Scale With Screen Size" and Match the height
5. Run the game and click on the dropdown button in the top right corner

Result: The popup menu will display in the wrong spot on the screen.

I've included screen shots of my setup for this example scene. As you can see from the images, all other UI elements scaled correctly and look great on mobile. However the dropdown's popup is placed incorrectly. This behaves the same in the editor and on the device.

 

Thanks, I've been able to reproduce it
Declan will take a look when he's back, he's the one who worked on Dropdowns.

 

Wow! thank you so much! great support. I'll be rating this asset now. definitely worth the money!

 

Hi, After more testing I've discovered another issue. This time with the Screen View component. (by the way it seems all these issues are isolated to the iPhone 6 plus screen size and larger resolution screens).

Steps:
1. Create a new project, import MaterialUI and open example scene: "Screens"
2. Create a new screen profile in the game view (iPhone 6s Plus Tall: 1080x1920)
3. On the canvas game object set the Canvas scaler's Match slider to "Height".
4. Run the game and noticed the animation transition between screens

Result:
The animation pauses half-way through the animation and it doesn't run smoothly.

It really seems like there are some scaling issues for high resolution screens... iPhone 6 Plus (the only testing device I have) is really allowing me to notice these issues.

 

Hey there,

Yes... seems like we have some issues with scaling the UI.
We'll look into all of it whenever we can

Thanks a lot for your support!

 

There is a problem with scaler.scaler.scalerFactor. Replace it with scaler.scaler.transform.localScale.x (or y) to resolve the pb with the dropdown.

 

Thanks for sharing this!
Yes, the scaling issues we have are clearly from us, introducing a new way to handle scaling

 

It works also with the spriteSwapper.
Thanks for your work. It's a great plugin

 

Hi, I've been looking at the comments here and your tutorial videos and while the asset surely looks great, I'm wondering if it is only for flat/2D apps or if it can also be used on world space canvases in 3D and even more so in VR applications where the canvas is about 2-3 meters away from the camera? I've also read some comments in regards to draw calls not being optimized, can you elaborate on the current state of that? Especially in VR it is important that frame rate is consistent. Thanks a lot for your reply.

 

Hello, I'm using Material UI Version 1.1.3 in an app and I am having issues with the calendar date picker, there is quite a noticeable delay before it pops up, and also on iOS the calendar background is grey instead of white... am I doing something wrong or is this a known issue?

 

Looks like a really nice and good looking app you're creating (from the screenshots ).

The issue with the gray things in iOS are going to be fixed in the next release, but if you want to fix it right now, it's really simple. You just need to go to MaterialUI/Images/RoundedSquare_Stroke/ and here, you change all the textures properties from Crunched or Compressed to TrueColor. That will fix it

And yes, the issue with the date picker taking a little bit of time to show is a known issue, it's because it's taking time to instantiate all the GameObjects needed for each day, and for each year... We'll have to optimise it at some point...
BUT! Here's a way to avoid the freeze
- You simply instantiate a date picker prefab, somewhere in Awake or Start, and then you always reuse the same date picker whenever you need to show one.
- To do that, there's some things to do...
- First, you'll need to apply the modifications in the screenshots below (that will be part of MaterialUI 1.1.6)
http://i.imgur.com/Floz6BG.png and http://i.imgur.com/HWHaGtH.png
- Then, instead of calling DialogManager.ShowDatePicker every time, you simple call that once in a Start method like we said, by keeping the return value of ShowDatePicker in a variable.
- You have to set the datePicker to destroyOnHide = false. Otherwise it will be destroyed when you hide it
- And then you hide it (because you don't want it in the scene at start)
- Summary:


And now, every time you need to use the DatePicker, you simply call the Initialize method and THEN the show method, like this:


I hope it's not too complicated!

~ Yohan

 

Thanks! Combination of a good designer and a good UI framework

I'll give that a shot, thanks for the response