Material design using Materialize

aia
design

#1

Hello everyone
Thunkable has come a long way from the deprecated UI AppInventor has, with a fresher material design appeal. Yet, there are quite a few components that are not fully ‘material’ yet. Thankfully, there’s a workaround using the webviewer component and a few third-party resources. (Including some idea of HTML!)


To begin with, go to http://materializecss.com/getting-started.html and download ‘Materialize’. This will be our material design framework (sort of). Extract the zip and copy the css/materialize.min.css and js/materialize.min.js files to a single directory.

Create an HTML file in the same directory(you may use notepad, Adobe Brackets, anything!) For those of you who want further documentation with HTML, visit this page: http://www.w3schools.com/html/.

Copy this text into your HTML file:
materialize.txt (730 Bytes)

In the <body> section, you can add any component of your choice. I will be doing a demo on adding buttons, progress bars and cards. All other components are as easy as these. Plus, there’s plenty of documentation on www.materializecss.com


Adding a button

In the <body> section of your HTML file, add the following code:
<a class="waves-effect waves-light btn teal">Test</a>
The word ‘Test’ will be displayed on the button. You can either go with other colors like blue, green or red or use the colour palette.
btn-large instead of just btn will give a bigger button.
Save your HTML file. Upload it to Thunkable through the upload media button on the bottom right of the screen. Also upload the materialize.min.css and materialize.min.js to Thunkable.

Next, drag and drop a webviewer component from the palette. If you’re using the companion, set the home URL to:
file:///mnt/sdcard/AppInventor/assets/NAME OF YOUR FILE.html.
Else, use
file:///android_asset/NAME OF YOUR HTML FILE.html

Set the height and width of the webviewer so as to suit your needs.
I won’t be going into the details of adding javascript and using the Webviewer.WebViewString to communicate with the button. There’s a tutorial on this: http://puravidaapps.com/snippets.php#2webviewstring

Screenshot:

From left: A normal button, large button and one with a different colour.
(All buttons have the signature ripple-effect as well!)

##Making a progress bar

This is the same as the button, basically. Instead of adding the code for the button in the <body>, add this:

`


` The progress bar will have a width of 70%. You can change that. Another option is to use the `Webviewer.WebViewString` to communicate back and forth between the app and the `webviewer` to increment the percentage.

Screenshot:

Progress bars at different percentages.

##Cards, cards and more cards

One of material design’s major highlights is the use of cards. Cards enable the user to see necessary information at a glance and also provide options for further action. Here’s how to add a card:
In the <body> of your HTML file, add:
<div class="row"> <div class="col s12 m6"> <div class="card blue-grey darken-1"> <div class="card-content white-text"> <span class="card-title">Card Title</span> <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#">BUTTON 1</a> <a href="#">BUTTON 2</a> </div> </div> </div> </div>

Screenshot:


The possibilities are endless. Material design is finally within the reach of each and every Thunker. Please like if you found this useful!

Edit: Here’s an AIA containing some examples demonstrating the use of the WebViewString and JavaScript. Feel free to modify it to your taste! (The home URL is set to the path used by the companion app. Change it before building the app!)
material_design.aia (68.6 KB)


UI and design for an app
Button Touch Effect
ListView with multiple columns & a bit more
Non urgent request - Spinner colour blocks
Displaying records
How to set Materialize Carousel with indicators height to webviewer height
Why don’t thunkers use Material Design?
Buttons lose material properties upon editing
Additional Button Properties (cosmetic enhancements)
How to use html code
#2

Thanks @Helios, great article! I like the look of materializecss, seems really good.

Do you have an . aia file you can share too perhaps?

I’ve used getmdl.io too, and this framework would also work with your approach too.
Perhaps others on the forum could add a comment about front end frameworks that they’ve used?


#3

Awesome job @Helios Thanks for this!


#4

Glad to hear you like it. Currently, I don’t have one. But I will make one soon to show the capabilities of using Materialize and the Webviewer.WebViewString.
Cheers!


#5

That’s really great!!! I’ll add here in my Favorites. Thank you, @Helios


#6

I have added an AIA file now. Hope you like it!
Helios


#7

Using Thunkable has actually helped our company’s total app downloads grow because thunkable supports Material Design. Appinventor’s bland design scheme was something we were glad we moved away from. Thanks for this tutorial by the way, it is of much use to us!


#8

Thank a lot.

But how can I change the font of the text


#9

As long as you keep all the resources in the same directory the you should have the appropriate font.

If you want to use a different font simply modify the CSS file where ever you need to change the font.


#10

As @Domhnall mentioned, you can change the appropriate CSS file. Else, you can simply create an inline style declaration in your HTML file. Like this:
<p style= "font-family:'Roboto',sans-serif">Your text here</p>
Hope this helps!


#11

We do need this in native Thunkable though, I’m tired of using workarounds to do everything.


#12

There’s nothing I can do about that. Something the developers should look into…


#13

You may use this now:


The extension is as native as it can get.

Helios


Is it Possible to Give Button Effects using CSS?
#14

q1.hey here in this aia file you have used three different html files on(/for) same css and jss files so does that means I can make anything with help of this two files? just need to use different htmls?

Q2. on Internet I have seen that all buttons come with their own js css and html files so does that all files necessary or I just have use once for all buttons (by combining them together)?

Q3. also I realized that your html files consists of start and done activity in html file for a button , but on files of buttons on internet there is no such things are present take a look

so what to do there?(or how to get on click activty here?
@Helios
@Domhnall
I hope you guys will help me?


#15

Your the best point_up: keep it up.