Hi Guys,
I came across the awesome Material Design Project Ionic Material on Git. Does anyone know how to implement it on Ionic Beta 14 App ? I tried adding waves.min.css to the Project but still ink effects doesn’t seem to work.
Can you have a look please @mhartington , @shaulhadar
Thanks in advance.
Hi Naveen, I also came upon this project. it looks really great. i also tried implementing it and succeded half of the way, and i noticed there is a problem with the waves.js and some of the angular material elements, when checking through phone.
It works when you develop and check on the desktop, but not on exported apk… i asked the project’s creator about it and he said he will fix it… i didn’t have the time to play with it too much, but i admit, the waves animation do all the material animations, and looks sweet, if we could implement these animations in ionic it will be super… i will try and check it out more and if i find anything i’ll let you know. 
I attached an image from what i started checking in intel xdk…
Thes Ionic lads are already working on this i can confirm. If you look at the angular-material project the main commits are by Ionic lads. If you see the new view app on android, you will see that it has some material elems and also the new option box for ionic on android uses the material style.
Hi @shaulhadar,
Thanks for the message.
Could you please show the steps you followed to import the ionic-material Project files on Ionic App with Intel XDK?
Is there a dependancy injection and the source files order to be followed ?
Hi Naveen, to add ionic material to intel xdk, all you need to do is download their zip from the site, and than copy this folder to your intel xdk projects folder, than you need to add the project from within xdk so you can work on it…
If you are asking about the code hierarchy, you will see there a number of pages type (activity feed, categories, and such), you will need to pick one of them and start from it. currently the author is working on writing the documentation and the api, so until we have a regular git clone option and bower install, i assume it will take time.
But you will just need to pick one of the pages, check that your dependencies are configured, and than you can start, and everything is supposed to show correctly…
I hope you understood what i ment, in case you don’t understand, please let me know and i will try to help you…
Hi @shaulhadar,
Can you be more specific please. On downloading the .zip file and extracting it gives-src,preview,dist folders. Which folder should I import as an HTML5 Project on Intel XDK?
Can you please also mention the name of source files to be included that you got it working- ionicmaterial.js , ionicmaterial.css , wave.js , wave.css ?
Thank you.
Maybe @IonicTeam could make a starter template using material design.
We managed to get it working, it looks and loads nicely on the browser (ionic serve) but when uploaded to the phone (Moto E, Nexus 6, Nexus 7) the transitions are very slow and the overall experience is poor (delayed reactions of the interface, etc).
hi @radoo,
Could you please share how you managed to get it work. I’m so excited about this Project.
Naveen, I checked again, and what i had working is only the html page from their demos. it is not an ionic project with these dependencies. i tried , but couldn’t make waves.js work inside ionic.
I have told the project’s manager, zach about this. i assume there is a way to use it but i am waiting for the next demo that will be inside an ionic full project… currently there is not routing inside the demo, so there isn’t much i can do there…
I maybe am going to check it a bit more, and if i find anything, i will let you know 
Several apps like viceversa or buzzup use Material elements…
PS: just noticed this is a new lib. Sorry for the mistake…
Hi Loyx, yeah, they are using angular material , which is amazing , and ionic material is something different I hope we can make it work
I see.Ripple ink effects works smooth on Viceversa App’s List elements but couldn’t find that on ngMaterial Project List elements yet.
@shaulhadar Please put us in the loop. If you find some updates ,make a post and update us.
Thank you guys 
Hi Naveen, currently everytime i try to add the waves.js to a regular ionic tab element, and add the “waves-effect” class, which is supposed to give the tab the ripple effect, like vice versa, but it doesn’t work. i tried a few times, and currently i am trying to do something else, but it isn’t working yet. also you can check the ionic material web page, i think they added a bower command, to add all the library to your projects, i will test this and let you know if this works…
Hi guys! Sry to intrude but quick question… Ionic Material is different than angular material right? If yes I’m sensing that angular Material is more mature and thus documented already? Please let me know
Yeah, ionic material and angular material are different frameworks. the angular material is more mature, and is maintained by the guys from ionic + guys from google angular. so this is going to be the more mature framework to work with… ionic material is really new, and still doesn’t have documentation and some feature, but it seems it is on the right track, i am waiting to see what they will add there .
Hey guys, I’m the founder of Viceversa which was discussed earlier!
Just a clarification: we didn’t use angular material at all, and created our own elements when needed. I didn’t like how angular material and Ionic worked together (duplicate touch libs for example).
Ionic material looks promising but is still very young and don’t seem to do much more than displaying animation (which look good, but depend heavily on post-dom manipulation, which isn’t the angular-way of doing things)
@naveenkarippai1 : for Viceversa, we used waves.js in order to have the ripple effect. I don’t like it that much since it isn’t bundled in angular, will work on that on my spare time.
Hey guys OK just to mention a few things about above statements.
IntelXDK, you don’t have to download anything besides the actual xdk program. Then make your ionic project if you don’t already have one, open up XDK, inside go projects NEW, then import. You can pick the overall directory, there’s another menu that pops up and asks you to specify the www directory. Then with 1 click wrap it in Crosswalk and you got yourself an extremely efficient performing android app with latest html5 features and hardware access.
Google Material, OK so in my app things LOOK like its material design but I’m not using anything mentioned above. All you have to do is just look at the feature you want, let’s say paper style card, then go to angular material source code, copy the CSS paste it inside your app, change to match your classes, and bam you got yourself the exact same look. As for JS same exact thing just rename classes to make what’s in your app. The main benefits this way are A. 100% compatibility and B. File size reduction since you’re only taking the features you wamt .
Hi Widawskij, good to know about the waves… I have a question if its ok. I was trying to make the animations work on tabs but i wasn’t able to do it. I added the css and js, and added the script, and than added the class for the effect but it didn’t work. did you do anything special for it to work?
Thanks…
Can you supply a codepen? adding the class “waves-effect waves-classic” worked for me
