Home

Material Controls For iOS Full Documentation

• MDButton
• MDTextField
• MDTableViewCell
• MDCollectionViewCell
• MDProgress
• MDSlider
• MDSwitch
• MDTabBar
• MDTabBarViewController
• MDSnackbar
• MDToast
• MDDatePickerDialog
• MDTimePickerDialog

MDButton

How to use

Create new instance programmatically or change Custom class name of a UIButton in Interface Builder

Properties

Property Name	Type	Default Value	Note
mdButtonType	MDButtonType	Raised	Button type
rippleColor	UIColor	#D6D6D6	color of ripple effect

IB Runtime Attributes

Attribute Name	Type	Acceptable Value	Note
type	number	0, 1, 2, 3	Button type, maps to the Raised, Flat, Floating Action Button & Floating Action Button with rotation animation. Other value maps to Raised Button
rippleColor	color		Color of ripple effect
imageNormal	UIImage		Used with type 3: button image for normal state
imageRotated	UIImage		Used with type 3: button image for rotated state (null able)

Functions

• Constructor

- (id)initWithFrame:(CGRect)frame type:(enum MDButtonType)buttonType rippleColor:(UIColor *)rippleColor;

Examples

• Create a raised button

MDButton *raisedButton = [[MDButton alloc] initWithFrame:CGRectMake(100, 100, 120, 40) type:MDButtonTypeRaised rippleColor:nil];

• Create a flat button

MDButton *flatButton = [[MDButton alloc] initWithFrame:CGRectMake(100, 200, 120, 140) type:MDButtonTypeFlat rippleColor:nil];

• Create a floating action button

MDButton *floatingButton = [[MDButton alloc] initWithFrame:CGRectMake(110, 300, 100, 100) type:MDButtonTypeFloatingAction rippleColor:[UIColor blueColor]];

• Create a floating action button with rotation animation

MDButton *floatingRotationButton = [[MDButton alloc] initWithFrame:CGRectMake(110, 300, 100, 100) type:MDButtonTypeFloatingActionRotation rippleColor:[UIColor blueColor]];

MDTextField

How to use

Create new instance programmatically or change Custom class name of a UIView in Interface Builder. This control only works with Auto Layout.

Properties

Property Name	Type	Default Value	Note
text	NSString	0
singleLine	BOOL	NO
fullWidth	BOOL	NO
enabled	BOOL	YES
normalColor	UIColor	#00000042
highlightColor	UIColor	#3F51B5
errorColor	UIColor	#FF4081
disabledColor	UIColor	#00000042
textColor	UIColor	#000000DD
hintColor	UIColor	#00000042
labelsFont	UIFont
inputTextFont	UIFont
hint	NSString
label	NSString		not visible if fullWidth is YES
floatingLabel	BOOL	NO	enable floating label or not. If it's YES, hint will not visible
highlightLabel	BOOL	NO	highlight label with highlightColor or not
errorMessage	NSString
hasError	BOOL	NO	show errorMessage or not
maxCharacterCount	int	0
minVisibleLines	int	0
maxVisibleLines	int	0
secureTextEntry	BOOL	NO
dividerAnimation	BOOL	YES	set hightlight (divider) animation when focus/lost focus
delegate	id	nil
autoComplete	BOOL	NO
suggestionsDictionary	NSArray	nil	string array data used in Auto complete mode

IB Runtime Attributes

Attribute Name	Type	Acceptable Value	Note
text	string
singleLine	boolean
enabled	boolean
fullWidth	boolean
highlightColor	color
errorColor	color
disabledColor	color
textColor	color
hintColor	color
normalColor	color
hint	string
label	string
floatingLabel	boolean
highlightLabel	boolean
errorMessage	string
maxCharacterCount	number
minVisibleLines	number
maxVisibleLines	number
secureTextEntry	boolean
autoComplete	boolean
dividerAnimation	boolean

Examples

MDTextField *textField = [[MDTextField alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
textField.delegate = self;
textField.singleLine = true;
textField.maxCharacterCount = 30;
textField.errorMessage = @"Wrong password";
textField.secureTextEntry = true;
textField.label = @"Password";
textField.floatingLabel = true;
[self.view addSubview:textField];

MDTableViewCell

How to use

Create new instance programmatically or change Custom class name of a UITableViewCell in Interface Builder

Properties

Property Name	Type	Default Value	Note
rippleColor	UIColor	#D6D6D6	color of ripple effect

IB Runtime Attributes

Attribute Name	Type	Acceptable Value	Note
rippleColor	color		Color of ripple effect

Examples

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  MDTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:RowIdentifier];
  if (cell == nil) {
    // Create new MDTableViewCell with default style, or you can subclass it.
    cell = [[MDTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:RowIdentifier];
  }
  cell.textLabel.text = [data objectAtIndex:indexPath.row];
  return cell;
}

MDCollectionViewCell

How to use

Create new instance programmatically or change Custom class name of a UICollectionViewCell in Interface Builder

Properties

Property Name	Type	Default Value	Note
rippleColor	UIColor	#D6D6D6	color of ripple effect

IB Runtime Attributes

Attribute Name	Type	Acceptable Value	Note
rippleColor	color		Color of ripple effect

Examples

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
  NSMutableArray *data = [self.dataArray objectAtIndex:indexPath.section];
  NSString *cellData = [data objectAtIndex:indexPath.row];
  static NSString *cellIdentifier = @"cvCell";
  UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
  UILabel *titleLabel = (UILabel *)[cell viewWithTag:100];
  [titleLabel setText:cellData];
  return cell;
}

MDProgress

How to use

Create new instance programmatically or change Custom class name of a UIView in Interface Builder

Properties

Property Name	Type	Default Value	Note
progressColor	UIColor	#007AFF
trackColor	UIColor	#B4CFEE
trackWidth	float	5
progress	float	0	only used on Determinate type
enableTrackColor	BOOL	NO
progressType	MDProgressType	Indeterminate	type of progress, Indeterminate or Determinate
progressStyle	MDProgressStyle	Circular	display style, Circular or Linear

IB Runtime Attributes

Attribute Name	Type	Acceptable Value	Note
progressColor	color
trackColor	color
trackWidth	number
enableTrackColor	boolean
progress	number		only used on Determinate type
type	number	0, 1	Progress type, maps to Indeterminate or Determinate, other value maps to Indeterminate
style	number	0, 1	Progress style, maps to Circular or Linear, other value maps to Circular

Examples

• Create a determinate progress

MDProgress *determinateProgress = [[MDProgress alloc] init];
[determinateProgress setStyle:Linear];
[determinateProgress setType:Determinate]; 
determinateProgress.progress = .1f;

MDSlider

How to use

Create new instance programmatically or change Custom class name of a UIView in Interface Builder. This control only works with Auto Layout.

Properties

Property Name	Type	Default Value	Note
value	float	0
minimumValue	float	0
maximumValue	float	100
step	float	0	tick step for Discrete slider
enabled	BOOL	YES
enabledValueLabel	BOOL	NO
precision	NSUInteger	0	number of digit after decimal point in floating value label
thumbOnColor	UIColor	#3F51B5
trackOnColor	UIColor	#3F51B5
thumbOffColor	UIColor	#00000042
trackOffColor	UIColor	#00000042
disabledColor	UIColor	#00000021
tickMarksColor	UIColor	#000000
leftImage	UIImage	nil
rightImage	UIImage	nil

IB Runtime Attributes

Attribute Name	Type	Acceptable Value	Note
value	number
minimumValue	number
maximumValue	number
step	number
enabled	boolean
enabledValueLabel	boolean
precision	number	>=0
thumbOnColor	color
trackOnColor	color
thumbOffColor	color
trackOffColor	color
disabledColor	color
tickMarksColor	color
leftImage	image
rightImage	image

Examples

MDSlider *slider = [[MDSlider alloc] init];
slider.minimumValue = 5;
slider.maximumValue = 50;
slider.step = 5;
slider.enabledValueLabel = YES;
[self.view addSubview:slider];
slider.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:slider attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:slider attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:slider attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:0]];

MDSwitch

How to use

Create new instance programmatically or change Custom class name of a UIView in Interface Builder.

Properties

Property Name	Type	Default Value	Note
on	BOOL	NO
thumbOn	UIColor	#3F51B5
trackOn	UIColor	#3F51B57F
thumbOff	UIColor	#FAFAFA
trackOff	UIColor	#00000042
thumbDisabled	UIColor	#BDBDBD
trackDisabled	UIColor	#0000001E

IB Runtime Attributes

Attribute Name	Type	Acceptable Value	Note
on	boolean
thumbOn	color
trackOn	color
thumbOff	color
trackOff	color
thumbDisabled	color
trackDisabled	color

Examples

MDSwitch *newSwitch = [[MDSwitch alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
[self.view addSubview:newSwitch];

MDTabBar

How to use

Create new instance programmatically or change Custom class name of a UIView in Interface Builder.

Properties

Property Name	Type	Default Value	Note
textColor	UIColor	#FFFFFF
backgroundColor	UIColor	#3F51B5
indicatorColor	UIColor	#FFFFFF
rippleColor	UIColor	#FFFFFF
textFont	UIFont
selectedIndex	NSUInteger	0
numberOfItems	NSInteger	0
delegate	id	nil

IB Runtime Attributes

Attribute Name	Type	Acceptable Value	Note
textColor	color
backgroundColor	color
indicatorColor	color
rippleColor	color

Functions

- (void)setItems:(NSArray *)items;  

- (void)insertItem:(id)item atIndex:(NSUInteger)index animated:(BOOL)animated;  

- (void)removeItemAtIndex:(NSUInteger)index animated:(BOOL)animated;  

- (void)replaceItem:(id)item atIndex:(NSUInteger)index;  

- (NSMutableArray *)tabs;  

Examples

MDTabBar *tabBar = [[MDTabBar alloc] initWithFrame:CGRectMake(0, 200, 320, 100)];
[tabBar setItems:@[ @"TAB ONE", @"THE NEXT TAB" ]];
tabBar.delegate = self;
tabBar.selectedIndex = 1;
[self.view addSubview:tabBar];

MDTabBarViewController

How to use

Create new instance or make a class extend from MDTabBarViewController programmatically.

Properties

Property Name	Type	Default Value	Note
tabBar	MDTabBar
delegate	id
selectedIndex	NSUInteger	0

Functions

• Constructor

- (instancetype)initWithDelegate:(id)delegate;

• Public Function

- (void)setItems:(NSArray *)items;

Examples

MDTabBarViewController *tabBarViewController = [[MDTabBarViewController alloc] initWithDelegate:self];
NSArray *names = @[@"TAB ONE",@"TAB TWO", @"TAB THREE"];
[tabBarViewController setItems:names];
[self addChildViewController:tabBarViewController];
[self.view addSubview:tabBarViewController.view];
[tabBarViewController didMoveToParentViewController:self];
UIView *controllerView = tabBarViewController.view;
id<UILayoutSupport> rootTopLayoutGuide = self.topLayoutGuide;
id<UILayoutSupport> rootBottomLayoutGuide = self.bottomLayoutGuide;
NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(rootTopLayoutGuide, rootBottomLayoutGuide, controllerView);
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[rootTopLayoutGuide]["@"controllerView][" @"rootBottomLayoutGuide]" options:0 metrics:nil views:viewsDictionary]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[controllerView]|" options:0 metrics:nil views:viewsDictionary]];

MDSnackbar

How to use

Create new instance programmatically.

Properties

Property Name	Type	Default Value	Note
text	NSString
actionTitle	NSString		title for action button
textColor	UIColor	#FFFFFF
actionTitleColor	UIColor	#FFFFFF	text color for action button
duration	double	2	duration in seconds
swipeable	BOOL	NO
multiline	BOOL	NO
isShowing	BOOL	NO	readonly

Functions

• Constructors

- (instancetype)initWithText:(NSString *)text actionTitle:(NSString *)action;

- (instancetype)initWithText:(NSString *)text actionTitle:(NSString *)action duration:(double)duration;

• Public functions

- (void)show;

- (void)dismiss;

// Add target for action button's TouchUpInside event
- (void)addTarget:(id)target action:(SEL)aSelector;

- (void)addDelegate:(id<MDSnackbarDelegate>)delegate;

- (void)removeDelegate:(id<MDSnackbarDelegate>)delegate;

Examples

MDSnackbar *snackbar = [[MDSnackbar alloc] initWithText: @"Connection time out." actionTitle:@"retry"];
snackbar.actionTitleColor = [UIColorHelper colorWithRGBA:@"#4CAF50"];
snackbar.multiline = YES;
[snackbar show];

MDToast

How to use

Create new instance programmatically.

Properties

Property Name	Type	Default Value	Note
text	NSString
textColor	UIColor	#FFFFFF
textFont	UIFont
duration	double	2	duration in seconds
isShowing	BOOL		readonly
gravity	MDGravity	MDGravityBottom | MDGravityCenterHorizontal	The location at which the toast should appear on the screen

Functions

• Constructor

- (instancetype)initWithText:(NSString *)text duration:(double)duration;

• Public functions

- (void)setGravity:(MDGravity)gravity xOffset:(int)xOffset yOffset:(int)yOffset;

- (void)show;

- (void)dismiss;

Examples

MDToast *toast = [[MDToast alloc] initWithText:@"Toast message." duration:kMDToastDurationShort];
toast.backgroundColor = [UIColor colorWithRed:0 green:.2f blue:.5f alpha:.8f];
toast.textFont = [UIFont systemFontOfSize:14];
[toast setGravity:MDGravityCenterVertical | MDGravityCenterHorizontal];
[toast show];

MDDatePickerDialog

How to use

Create new instance programmatically.

Delegate

@protocol MDDatePickerDialogDelegate <NSObject>

- (void)datePickerDialogDidSelectDate:(NSDate *)date;

@end

Functions

- (void)show;

Examples

MDDatePickerDialog *datePicker = [[MDDatePickerDialog alloc] init];
datePicker.delegate = self;
[datePicker show];

MDTimePickerDialog

How to use

Create new instance programmatically.

Delegate

@protocol MDTimePickerDialogDelegate <NSObject>

- (void)timePickerDialog:(MDTimePickerDialog *)timePickerDialog
           didSelectHour:(NSInteger)hour
               andMinute:(NSInteger)minute;

@end

Functions

• Constructor

- (instancetype)init;

- (instancetype)initWithHour:(NSInteger)hour andWithMinute:(NSInteger)minute;

• Public Functions

- (void)show;

Examples

MDTimePickerDialog *timePicker = [[MDTimePickerDialog alloc] init];
timerPicker.delegate = self;
[timerPicker show];