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

Interesting. Mind showing me a screenshot of the ScrollView, Viewport, and Panel in the inspector?

 

Sorry for the delay! I became busy at PAX South and just returned. Here's the inspector values you requested.
EDIT: Just a note that in the Panel inspector I set "Top" to -350 just to get the panel to line up along the top of the window properly.

 

Maybe try setting the Y pivot of the panel to 1. It should make it so you no longer need the -350 position, but I'm not sure if it'll affect the scrolling.

~ Declan.

 

Hmm, it looks like it had no visible effect. The panel scrolled just a usual as well.

 

Hello,

I'm looking to buy a UI component, and Material UI seems to be Awesome, but i have some doubts:

1 - What is the main difference between MaterialUI and DoozyUI?
2 - Can i integrate MaterialUI with other ui tools (DoozyUI, Ngui and others...) ?

Sorry if i made some bad questions, but i'm a new on unity world and i'm starting a new game, so, i'm very confused.

thanks!

Fabio

 

I think your Content needs to be streched only horizontally and have the Y pivot set to 1, if you don't know the size of the Content vertically as it may change you can combine some vertical layout with the content size fitter preferred size option. This is am unity ui feature, it has nothing to do with material ui

 

Hi, i just wonder, because i didn't find any info about that. Is it possible to create Tabs View Pager with dynamic content? I.e. I pull data from API and I want to prepare tabs with pages in runtime. Same question for lists..?

 

Hi @MaterialUnity, I just bought the plugin and I'm getting a couple warnings after import. Can you please sort those out? I'm using Unity 5.5.1.

 

@MaterialUnity The calendar picker seems to be broken...

 

@MaterialUnity Just wanted to say how much I love materialUI! It's one of my favorite assets and I plan on using it in every mobile app.

That being said, is anyone having any trouble with the time picker on android? In the editor I can select and adjust the hour and the minute. But on android I can't even select the hour. It only lets me select the minutes and adjust it.

It appears the am/pm doesnt work on android either. But it works in the editor.

I started playing around with it. If you just copy the timepicker prefab into the scene it works fine. Its when you call the DialogManager.ShowTimePicker() method that causes it to stop working. Its something to do with the way it is instantiated at runtime and the way it is set up in the hierarchy. More specifically it seems to be caused by the materialui SpriteSwapper and the canvas root scaler.

I'm just gonna bypass it by placing the prefab in the scene and just manipulating the one timepicker instead of stuffing around. But a fix in the future would be appreciated

 

Hello!

We've never tried DozzyUI, so we can't answer this :/
Yes you should be able to use MaterialUI with anything, as MaterialUI basically consists of gameObjects/prefabs created to "mimic" the Material Design guidelines. So it's a set of UI "pre-made" components you can use anywhere.

But one advise is to avoid having a lot of different UI solutions in your game. Either use only NGUI, or only DoozyUI or only MaterialUI. You'll have a more consistent look and can focus on using one solution instead of learning how to use a lot of them

~ Yohan

 

Hello!

Currently it's not possible to create tabs at runtime, this is something planned, but not in the near future (not at all).
About lists, well, we're in the process of making a really great list component that will do awesome things (recycle, cache, infinite scroll, super easy to use etc...) but its not here yet :/
But you can manage lists yourself for now using a simple Unity UI ScrollView and GameObjects that you can dynamically create/delete by creating/removing GameObjects

~ Yohan

 

We sure can help! But can you tell us what are those warnings?

~ Yohan

 

Yes, the DatePicker is broken. But I just fixed it a few hours ago
If you don't want to wait for the next update of MaterialUI, here's what you need to modify on the file MaterialUI/Scripts/Components/Dialogs/pickers/datePicker/DialogDatePickerDayItem.cs



~ Yohan

 

Thanks a lot for the kind words!

For the time picker, I think it's because the collider on the AM/PM text is too small.
Can you trying to be super super precise with your finger when touching it to see if it works and tell me?

Oh and I just read the rest of your post... ok, so it seems like an issue, I'll add that to the list of things to do!
Thanks a lot for reporting

 

I found the problem.. I'll post back in a few mins once I get it working again

Ok! The problem seems to be with these lines in the show() method;

Code (csharp):

1.  
2.             dialogAnimator.dialog = this;
3.            dialogAnimator.AnimateShow(m_CallbackShowAnimationOver);
4.  

And the relevant similar code in the hide() method.

The collider sizes of the text is fine. They don't need changing at all.

This is how I've gotten it to work, place the time picker prefab into the scene and made a custom singleton script which manages the time picker (basically just copy and pasted everything from the DialogTimePicker script and the required methods from the materialDialog script). Linked all the inspector values up. I use scriptname.instance.ShowTimePicker() to show/hide it and pass in the parameters to the initialize() method and then returns a callback just like the original one does.

In the show/hide methods I just use gameobject.setactive() to show hide it (removed all the animation stuff). Everything works fine but of course there is no slide-into/out of-view animation like before. Theres just something about the animation part that locks the header text children up. The clocklistener script works and you can select numbers on the clockface but you can't select any of the hour/minute/am/pm text.

 

Hey there!

It's not directly implemented in the MaterialInputField component as Declan said, but I have hacked a small thing (that I use in production in my own software). Basically you attach the following component to your InputField, and you assign the m_SelectOnUp and m_SelectOnDown InputFields to the inspector. When you press tab on the keyboard, it will jump to the selectOnDown inputField (if it exists), and if you press Shift+tab it will jump to the selectOnUp inputField (if it exists).
This is super simple code and it only handle up/down between InputFields, but you can easily modify it to adapt to your needs

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.EventSystems;
3. using UnityEngine.UI;
4. using MaterialUI;
5.  
6. public class InputFieldTabSelect : MonoBehaviour
7. {
8.     [SerializeField] private MaterialInputField m_SelectOnUp;
9.     [SerializeField] private MaterialInputField m_SelectOnDown;
10.  
11.     private MaterialInputField m_CurrentInputField;
12.     private Selectable m_SelectOnUpSelectable;
13.     private Selectable m_SelectOnDownSelectable;
14.  
15.     void Awake()
16.     {
17.         m_CurrentInputField = this.GetComponent<MaterialInputField>();
18.  
19.         if (m_SelectOnUp != null)
20.         {
21.             m_SelectOnUpSelectable = m_SelectOnUp.GetComponent<Selectable>();
22.         }
23.  
24.         if (m_SelectOnDown != null)
25.         {
26.             m_SelectOnDownSelectable = m_SelectOnDown.GetComponent<Selectable>();
27.         }
28.     }
29.  
30.     void Update()
31.     {
32.         if (Input.GetKeyDown(KeyCode.Tab))
33.         {
34.             if (!m_CurrentInputField.IsSelected())
35.             {
36.                 return;
37.             }
38.  
39.             // When SHIFT is held along with tab, go backwards instead of forwards
40.             if (Input.GetKey(KeyCode.LeftShift) || Input.GetKey(KeyCode.RightShift))
41.             {
42.                 if (m_SelectOnUpSelectable != null)
43.                 {
44.                     m_SelectOnUpSelectable.Select();
45.                 }
46.             }
47.             else
48.             {
49.                 if (m_SelectOnDownSelectable != null)
50.                 {
51.                     m_SelectOnDownSelectable.Select();
52.                 }
53.             }
54.         }
55.     }
56. }
57.  

~ Yohan

 

Well thanks a lot for reporting this!
This only happens in an Android build and never in the editor right?
I'll have to take a look!

EDIT: I just tried, and I can confirm (at least for me), that this is because the collider zone to click is super small (basically only the AM/PM text). I'll have to work on a fix for that!

 

I don't have access at the moment. But you'll see them as soon as you import the package into an empty Unity 5.5 project.

 

That's right. Only on android build and not in editor. Editor works fine.

Unity 5.5 and android 6.0.

I tried commenting out the animation code in your dialogTimePicker script to see if it works with the default timepicker but it still didn't work right.

Its only working now because I have made a singleton out of the prefab. Maybe yours is being destroyed and instantiated every time the dialogueManager.showtimepicker() is called and that has something to do with it?

 

I only have 3 warnings (and it's because I didn't run the API Updater):

- Assets/MaterialUI/Scripts/MaterialUtils/AdaptiveUIGrid.cs(66,22): warning CS0649: Field `MaterialUI.AdaptiveUIGrid.m_Rect' is never assigned to, and will always have its default value
- Assets/MaterialUI/Editor/PostProcessors/GeneratedShadowPostProcessor.cs(24,75): warning CS0618: `UnityEditor.TextureImporterGenerateCubemap.None' is obsolete: `This value is deprecated (use TextureImporter.textureShape instead).'
- Assets/MaterialUI/Editor/PostProcessors/GeneratedShadowPostProcessor.cs(42,64): warning CS0618: `UnityEditor.TextureImporterType.Advanced' is obsolete: `Use Default instead. All texture types now have an Advanced foldout (UnityUpgradable) -> Default'

They will be fixed with the next update, but if you want to fix them:

1. AdaptiveUIGrid.cs, you can replace line 66 from:
   private Rect m_Rect;
   to
   private Rect m_Rect = new Rect();
   
   
2. GeneratedShadowPostProcessor, you can replace line 24 from:
   importer.generateCubemap = TextureImporterGenerateCubemap.None;
   to
   importer.textureShape = TextureImporterShape.Texture2D;
   
   
3. GeneratedShadowPostProcessor, you can replace line 42 from:
   importer.textureType = TextureImporterType.Advanced;
   to
   importer.textureType = TextureImporterType.Default;

 

I just tried, and I can confirm (at least for me), that this is because the collider zone to click is super small (basically only the AM/PM text). I'll have to work on a fix for that!

 

I saw that suggestion on the comments and i tried it first. I can make the size as big as the screen and it does nothing. Even if i put a debug.log in the onhoursclicked() and make the collider huge it doesnt register the onpointerclicked at all.

I'm using your prefab right now with the original tiny sizes and it works because i removed the animation code.

One thing i did notice is the bottom buttons have a clickable height of something like 30. I think the materialui guidelines say it should be at least 48?

I will play with it some more tomorrow and see if i can find the exact cause. I have a feeling i might be able to parent the timepicker to something else and call the animation code on the parent instead.

At least its working in the meantime.

 

Hum... ok. (yes at least it's working for you )

The thing is, when you make the size as big as the screen, you mean the size of... what? Because it's really the gameObjects with the texts AM and PM on them that needs to be bigger.

 

Yeah the text object. Because you use an event trigger component with onpointerclicked linked to dialogtimepicker.onhourselected(). So yeah its that game object that needs to be bigger cos the event component uses the recttransform. I can literally set a width and height so that its larger than the display device and it wont call onpointerclicked().

Now that i think of it. I remember seeing in your code a call to canvasgroup.blockraycasts = true somewhere. That may be the issue (blocking the raycast to the text gameobject)... i'll poke around tonight and have another look.

But like i said. Right now i'm just using your prefab with the sizes you set and it works as long as i remove the animation code. So i doubt the collider sizes have anything to do with it. Its gotta be in the animation stuff...

 

I'll see when I'll take a look
Thanks again for everything!

~ Yohan

 

Hello,

I think dropdown control has some problem.

In editor, it works fine.

But in Android 6.0, even touch event, item not selected at once.

Only twice or third times touches, it's selected.

What's wrong?

 

the dropdown works fine on my galaxy s6 edge with android 6.0 and i use a LOT of dropdowns. Over 50 on one screen (its a list where each item is a dropdown).

I think what your referring to is not really a problem its more of a touch nuance to do with phones in general. For example, if i try to use one hand and click a button nothing happens even tho the button ripples. But when I hold the phone with my left hand and use my right hand to press the button directly and firmly it will work.

In other words the phone thought i might of accidentally swiped instead of pressed. Even if my finger only slid a micro millimeter when i pressed. The problem is your finger, not the phone

 

Still trying to work out the issue. Something interesting I noticed is on the time picker, the background gameobject under dialogLayer>clock>background, it has the vector image component. The size mode is set to match min. On my singleton version of your prefab the vector image is half the size of the vector image in your prefab. Even though they have the same settings. I assume its because my version isn't being instantiated so it misses out on having the canvasscaler and other recttransforms assigned?

Anyway, I wanted the vector image to be the same size as yours, so I started increasing the size with it set to manual. If I set the size to 1200 then it is the same size as yours on android, but heres the kicker.... the header text no longer works! I can't select the hour/minute/am/pm any more.

But if I set the vector image size back to match min then the header text is selectable again. How weird? Just changing the size of the vector image stops it from working.This makes no sense to me.

Bed time now. I'll try at it again sometime tomorrow.

 

I can understand your opinion.

But I don't agree with you.

Over 10 people tested this situation with galaxy s6 edge and other tablets.

And normal unity GUI and Material UI.

It's absolutely different.

I tracked your ripple. Sometimes ripple effect not occupied perfectly such as touch quickly or other case.

Then it's not select item.

First button is no no problem.

After shown dropdown, problem is occurred.

It's a real.

Why only dropdown item can't select at once(almost) but your button and all other features can press at once?

 

Try increasing the pixelDragThreshold in your EventSystem object, and let me know if your problem persists.

~ Declan.

 

Hi, I just bought the Material UI. I was using the tab view. I have two problems:
1. I wanted the scroll between the tabs to be really really fast. I tried changing the sensitivity of the "scroll Rect" component on "Pages" gameobject, but it has no affect on it. To give you an idea of the desired sensitivity I would like you to check it with the whatsapp application's tabs. Basically with a very gentle flick the tabs change in whatsapp.
2. There are two types of tab view available. One with text and one with text & icon. I required a tab where one tab has icon and others have text. Is it possible?

Thank you in advance

 

Hi Iqu,

I am planning on rewriting the TabView component in the future, which will include further customisations like this - I'm not sure when that will be though.
In the meantime, you can change the speed by opening Scripts/Components/Tabs/TabView.cs and modifying these '0.5f' values to whatever you'd like. The lower the value, the faster the animations between tabs.


Hope that helps!
~ Declan.

 

Hi, this asset looks awesome, but apparently doesnt work with TextMesh Pro yet.
I consider that one essential for professional apps with text, and it was bought by Unity and made free just recently. So, will you consider adding support for that ?

 

Hi. Thanks for your answer on my last query. So far I have used a few more functionalities. I was working with transitions when I stumbled upon a new problem. I am using the transition type "InOut" since I want one screen to transition out and one to transition in. Transitions are working fine but if the transitions happen fast i.e if I click on the buttons fast, the buttons become black. I hope the video explains the problem.

 

Hey,
I've added that to the list of things to do and will check when I can
I've never used TextMeshPro for now, but if it can be rendered by a canvas and used like a normal Unity UI GameObject, I don't think what cause this to not work :/

~ Yohan

 

Hello,

This is weird. Do you have a black sprite with a mask somewhere or something like that?
Or can you tell me what you're doing to animate all that?
What I would recommend is having two root Game Objects. One for the entire UI of the left, and one for the UI on the right, and then just animate these two root objects.
~ Yohan

 

I don't really understand what you mean by that :/
This particular Vector Image is set to Match Min, but it could be set to manual with a size of 300. We just wanted it to be 300x300.
Hum... and is you instantiated version under the same canvas as everyone else? It should be under the same canvas. Or under another canvas but that has the same parameters you're using on the canvas for your regular UI.

You mean that if you let the size to 300, then the clock circle background is super small on Android? If that's the case, yes this is probably a scaling issue caused by a bad use of the canvas scaler or something like that.

Also I don't think it's weird that the AM/PM stopped working when you increased the size of the background, because if the background becomes too big it will be on top of the AM/PM and it will receive all the click/touch events, because it's in front of AM/PM.

I hope it's clear and I understood what you said :/

~ Yohan

 

Hi,
No ,I dont have any black sprite or any mask anywhere. I am not animating the screens by myself. I am using the screenview component for the transitions. The transition I am using is of the type inOut since I want one screen to transition out of the screen and one to transition in. The Hierarchy of Game objects is not an issue. I am attaching the pics of the respective screens
I observed the problem. The problem is with the transition type inOut and not with other transition types. If the transitions happen very fast the material button or ripple gets disturbed somehow.



here is my scene's package link :
-Removed by Admin-

 

Hello,

I just tried your package and don't see anything wrong :/
Plus you're telling me the issue is with the type inOut but you're using only out?
Can you give me more details, such as the GameView size you're using, maybe the target platform? Your OS? Your Unity version?

Also, please remove the link you shared, it contains the entire source code of MaterialUI...
Thanks!

 

Purchased this excellent asset after waiting until the right project came along, and I love it.

With regards to the issues mentioned in this forum since Jan 2017, will there be an update any time soon fixing those issues?

 

How to add pages/tabs to the default tab design?
Only 3 tabs are available by default and I can't find a way to add more tabs to it.
I tried to change something in code, which immediately threw an error.

Step wise tutorial would be best form to learn.

 

1. Just duplicate one of the existing pages and the TabView should automatically pick it up.
2. Hit play, you should see the new tab and be able to swipe to the new page

~ Declan.

 

An update is on its way - waiting for me to finish the Lists system, and we're still ironing out some bugs that 5.5/5.6 introduced. I'll let you know when it's nearing release.

~ Declan.

 

Hi, in the slider component (left to right), is it possible to have the popup to appear on the bottom of the slider instead of on top? Thanks

 

Hello,

Unfortunately no, at least not from us, because we'd like to stick to Material Design guidelines for now.
So you'll have to do that yourself by modifying our code.
Here's what you'll need to do:

 

Hey just wanted to drop by and say that I love Material UI got it recently and have been playing around with it for a while now and it is awesome. I was wondering if you will be implementing support for the recently acquired by unity Text Mesh Pro text fields with Material UI ? (Or will you wait to see if unity will integrate it completely as they said they would)

 

Hi!

I bought asset and I have issue with simple materialUI button. I want change background image for button. I can choose image, but when I put play button to run program a image is reset to roundedsquare? Why?


After click run button image is reset:

 

Hi,

I just found a annoying warning after updated to the latest version.
In the Canvas object, a script adds a missing script. When looking at the content of scene file, it looks like this:

m_TypeName: MaterialUI.MaterialUIScaler+CanvasAreaChangedEvent, Assembly-CSharp,
Version=0.0.0.0, Culture=neutral, PublicKeyToken=null
​

It seems that it is added by MaterialUIScaler.cs, but CanvasAreaChangedEvent is a inner class and unity always report missing script.

Please fix it. Thanks.

 

We'll be waiting for Unity to integrate Text Mesh Pro natively into the engine before adding support for it.

~ Declan.