Material Design in App Builder?

How can we use Material Design ui in AppBuilder?
https://github.com/FezVrasta/bootstrap-material-design

Material Design can made app more interesting.

if cannot,can we add ripple effect to appbuilder?
http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design

Hello tin,

Are you tried the "Paper" theme already included in App Builder? (Take a look at the Theme app sample) They look similar to Material and we no need any other dependency, like the Javascript required by the theme you linked. Anyway, if you wanted, probably you can use the theme just by including their CSS and Javascript file. At least you can try it...

Thanks,David.
I try paper,it look better now.But not good as bootstrap-material-design.

Hello tin,

I am take a look at the project, and, certainly they looks good. However it's not only a theme for bootstrap, which can be used in App Builder just by copy the appropiate CSS stylesheet. In fact the theme requires jQuery other Javascript code, but even this can be used in App Builder "as is".

The problem I found is that the theme go ahead and requires certain controls markup, add new components, etc. App Builder uses a framework and offers certain componentes. Other can be added, of course, but we are talking about some kind of "theme-framework" not easy to adapt in App Builder.

About the "Ripple effect", apparently they consists in some CSS and Javascript code (plus jQuery) so may you can try with that tin. But again, CSS and Javascript must be "adaptable" to the existing stuff in App Builder. For example, I don't know if the "ripple effect" just work in controls like push buttons, which already incorporates their own style.

Just dig it.Because Appbuilder use Angular 1 and bootstrap 2.They are going to out of date now.

require Angular 2
https://progblog.io/Angular-2-Tutorial-Create-an-App-With-Angular-CLI-and-Angular-Material-Design/

require bootstrap 3+
https://github.com/FezVrasta/bootstrap-material-design

Hello tin,

AngularJS and Angular2 are differents projects and not compatibles at all. We can mix the both projects if needed (because we can expand AB with any HTML, Javascript and CSS), but, probably we no need that. App Builder uses AngularJS as their Javascript two-way data binding library, and, in fact, not too much more. Of course they also uses some of the useful AngularJS provided modules and directives, but mainly App Builder uses AngularJS for that.

AngularJS and Angular2 are not compatibles, and, certanily prepare App Builder to use Angular2 (or any other Javascript library) is not an easy task. Anyway I did not hear that Google abandond AngularJS at all. Out there are a miriad of projects that uses it, and, in fact the latest AngularJS release (included in App Builder right now) has been published a few days ago, and their development continues.

App Builder uses Bootstrap CSS 3 right now and not Bootstrap CSS 4. There is a good reason for that: Bootstrap 4 is in an alpha state yet, and, on the other hand, we uses Bootstrap CSS 3 in some ways than the 4 version can't handle right now, for example, App Builder includes dozens of Bootstrap CSS 3 themes do not available in Bootstrap CSS 4 yet.

So that mean we can try this theme now?(Appbuilder use Bootstrap 3 now)
http://fezvrasta.github.io/bootstrap-material-design/#getting-started

Hello tin,

Certainly we can try it. In fact I remember I try that theme in the past... The problem with that theme is they requires some Javascript stuff too, and, in my tests (if I did not remember bad) finally I can't get it working as expected. But of course you can try it and ask for help here if you find some specific problem!

I think this will fit with AB with angular1

https://material.angular.io/

Hello tin,

Certainly the framework you link uses AngularJS, however, they are not an stylesheet and some Javascript code, they are a complete framework, tin, for example, in the sense that they uses some special HTML code to declare text inputs, email inputs, etc. But AB already offers that kind of controls!

Maybe you can adapt the CSS code, or get some Bootstrap CSS theme that emulates the "material design" of Google... one thing is this, in which we have one ore more stylesheets, one ore more JS files, and, other thing is a complete framework like the linked one. With some works maybe you can get it working...

But probably this is not the objective of AB, which try to offer an easy way to create applications: and try to use an enterely different framework on App Builder is not something easy nor required. Anyway, if you have any specific question don't hesitate to post in the forum tin and we will try to help you.