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/.
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
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.
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.
<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
file:///mnt/sdcard/AppInventor/assets/*NAME OF YOUR FILE*.html.
Else, use
file:///android_asset/*NAME OF YOUR HTML FILE*.html
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
I won't be going into the details of adding javascript and using the
webviewstring.aia
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#2webviewstringwebviewstring.aia
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:<div class="progress">
<div class="determinate" style="width: 70%"></div>
</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.
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
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
material_design.aia (68.6 KB)
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)
댓글 없음:
댓글 쓰기