Quick Start

Get it

Proudly developed at Caffeina

Module to port Google Material Design to Titanium, specifically iOS!

Thanks to FPT Software for developing a great library that made this possible.

The module is being developed for both iOS and Android to bring more features to Android as well, although for the moment the iOS version is usable while the Android version is in an early stage.

UI elements supported by the native library vs. ti.material

UI	Original	ti.material (iOS)	ti.material (Android)
MDButton	❌	❌	⭕
MDTableViewCell	❌	⭕	⭕
MDProgress	❌	❌	⭕
MDSlider	❌	⭕	⭕
MDSwitch	❌	❌	⭕
MDTabBar	❌	⭕	⭕
MDTabBarViewController	❌	⭕	⭕
MDTextField	❌	❌	⭕
MDSnackbar	❌	⭕	⭕
MDToast	❌	❌	⭕
MDDatePicker	❌	❌	⭕
MDTimePicker	❌	❌	⭕

Install the module

Unzip the latest release in your module directory and add to tiapp modules, then add the module to tiapp.xml

<module platform="ios">ti.material</module>

or through gitTio

$ gittio install ti.material

Initialize it as below

var Material = require("ti.material");

MDButton

Creating a button is very straightforward.

var button = Material.createButton({});

The button accepts the following list of properties:

Properties

Property	Type	Default	Description
title	String	App Title	The title to show in the notification center.
color	String	n/a	The color of the button title
touchFeedbackColor	String	n/a	The color of the ripple effect of the button
backgroundColor	String	n/a	The color of the button background
style	int	0	The style of the button going from 0 to 3. The last two being FAB
font	font object	system font	The font of the button title
enabled	Bool	true	Determines whether the element is enabled or not
opacity	float	1.0	Opacity of the element
rotated	Bool	false	Sets the rotation status of the FAB (style 3) button
imageNormal	String	null	The image instead of the title for a FAB button in the not rotated state
imageRotated	String	null	Same as above but for the rotated state of the button

Events

Inherited from titanium:

• touchstart
• touchend
• touchmove
• touchcancel
• click
• dblclick

new:

• rotationstarted
• rotationcompleted

MDSwitch

To create a switch use the following code.

var switch_ = Material.createSwitch({});

It accepts these properties:

Properties

Property	Type	Default	Description
height	float	Ti.UI.FILL	This property doesn't change the size of the actual switch but it's parent container
width	float	Ti.UI.FILL	This property doesn't change the size of the actual switch but it's parent container
trackOnColor	String	n/a	Color for the track of the switch when it is positioned on On
trackOffColor	String	n/a	Color for the track of the switch when it is positioned on Off
thumbOnColor	String	n/a	Color for the switch thumb when positioned to On
thumbOffColor	String	n/a	Color for the switch thumb when positioned to Off

Events

• change

MDProgress

To create a progressbar use the following code.

var pb = Material.createProgressBar({});

It accepts these properties:

Properties

Property	Type	Default	Description
value	float	0	Determines the progress
width	float	Ti.UI.FILL	Sets the width of the progressbar
trackTintColor	String	transparent	Color for the track
tintColor	String	transparent	Color of the progress
radius	float	50	Radius of the circular progressbar
progressSyle	enum	0	0 stands for circular, 1 is for linear progressbar
progressType	enum	0	0 is for indeterminate, 1 is for determinate

Events

n/a

LICENSE

MIT.