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)
<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
<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.
file:///android_asset/*NAME OF YOUR HTML FILE*.html
Set the height and width of the
webviewer so as to suit your needs.
Webviewer.WebViewString to communicate with the button. There's a tutorial on this: http://puravidaapps.com/snippets.php#2webviewstring
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:
<div class="determinate" style="width: 70%"></div>
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.
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:
<body> of your HTML file, add:
<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>
<a href="#">BUTTON 1</a>
<a href="#">BUTTON 2</a>
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
material_design.aia (68.6 KB)