Material design buttons allow users to take actions, and make choices, with a single tap. There are many distinct button styles including text buttons, contained buttons, and floating action buttons.
MDCButton is a highly-configurable UIButton implementation that provides support for shadow elevation, Material Design ripples, and other stateful design APIs.
Add the following to your Podfile:
pod 'MaterialComponents/Buttons'
Then, run the following command:
pod install
To import the component:
import MaterialComponents.MaterialButtons
#import "MaterialButtons.h"
Create an instance of MDCButton and theme it with as one of the Material Design button styles using the ButtonThemer extension. Once themed, use the button like you would use a typical UIButton instance.
let button = MDCButton() // Themed as a text button: MDCTextButtonThemer.applyScheme(buttonScheme, to: button)
MDCButton *button = [[MDCButton alloc] init]; // Themed as a text button: [MDCTextButtonThemer applyScheme:buttonScheme toButton:button];
See the ButtonThemer documentation for a full list of supported Material Design button styles.
MDCFloatingButton is a subclass of MDCButton that implements the Material Design floating action button style and behavior. Floating action buttons should be provided with a templated image for their normal state.
// Note: you'll need to provide your own image - the following is just an example. let plusImage = UIImage(named: "plus").withRenderingMode(.alwaysTemplate) let button = MDCFloatingButton() button.setImage(plusImage, forState: .normal) MDCFloatingActionButtonThemer.applyScheme(buttonScheme, to: button)
// Note: you'll need to provide your own image - the following is just an example. UIImage *plusImage = [[UIImage imageNamed:@"plus"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; MDCFloatingButton *button = [[MDCFloatingButton alloc] init]; [button setImage:plusImage forState:UIControlStateNormal]; [MDCFloatingActionButtonThemer applyScheme:buttonScheme toButton:button];
The elevation of a button can be changed for a given control state using setElevation:forState:.
See the Material Design shadow guidelines for a detailed overview of different shadow elevations.
For example, to make a button elevate on tap like a floating action button:
button.setElevation(6, for: .normal) button.setElevation(12, for: .highlighted)
[button setElevation:6.0f forState:UIControlStateNormal]; [button setElevation:12.0f forState:UIControlStateNormal];
A floating action button can be configured with a combination of shape and mode. The .default shape is a 56-point circle containing a single image or short title. The .mini shape is a smaller, 40-point circle. The .normal mode is a circle containing an image or short title. The .expanded mode is a “pill shape” and should include both an image and a single-word title. The .expanded mode should only be used in the largest layouts. For example, an iPad in full screen.
While in the .expanded mode, a floating button can position its imageView to either the leading or trailing side of the title by setting the imageLocation property.
Because of the combination of shapes and modes available to the floating action button, some UIButton property setters have been made unavailable and replaced with methods to set them for a specific mode and shape combination. Getters for these values are not available, and the normal getter will return the current value of the property.
-setContentEdgeInsets is replaced with -setContentEdgeInsets:forShape:inMode:-setHitAreaInsets is replaced with -setHitAreaInsets:forShape:inMode:-setMinimumSize is replaced with -setMinimumSize:forShape:inMode:-setMaximumSize is replaced with -setMaximumSize:forShape:inMode:MDCButton and its subclasses can be used in Interface Builder, but the button type must be set to “custom” in order for the button's highlight states to work as expected.
You can theme an MDCButton to match one of the Material Design button styles using your app's schemes in the ButtonThemer extension.
You must first add the ButtonThemer extension to your project:
pod 'MaterialComponents/Buttons+ButtonThemer'
You can then import the extension and create an MDCButtonScheme instance. A button scheme defines the design parameters that you can use to theme your buttons.
// Step 1: Import the ButtonThemer extension import MaterialComponents.MaterialButtons_ButtonThemer // Step 2: Create or get a button scheme let buttonScheme = MDCButtonScheme() // Step 3: Apply the button scheme to your component using the desired button style
// Step 1: Import the ButtonThemer extension #import "MaterialButtons+ButtonThemer.h" // Step 2: Create or get a button scheme MDCButtonScheme *buttonScheme = [[MDCButtonScheme alloc] init]; // Step 3: Apply the button scheme to your component using the desired button style
To theme a button as a Material Design text button, use MDCTextButtonThemer.
MDCTextButtonThemer.applyScheme(buttonScheme, to: button)
[MDCTextButtonThemer applyScheme:buttonScheme toButton:button];
To theme a button as a Material Design outlined button, use MDCOutlinedButtonThemer with an MDCButton.
MDCOutlinedButtonThemer.applyScheme(buttonScheme, to: button)
[MDCOutlinedButtonThemer applyScheme:buttonScheme toButton:button];
To theme a button as a Material Design text button, use MDCContainedButtonThemer.
MDCContainedButtonThemer.applyScheme(buttonScheme, to: button)
[MDCContainedButtonThemer applyScheme:buttonScheme toButton:button];
To theme a button as a Material Design floating action button, use MDCFloatingActionButtonThemer with an MDCFloatingButton.
MDCFloatingActionButtonThemer.applyScheme(buttonScheme, to: button)
[MDCFloatingActionButtonThemer applyScheme:buttonScheme toButton:button];
You can theme buttons with your app's color scheme using the ColorThemer extension.
You must first add the Color Themer extension to your project:
pod 'MaterialComponents/Buttons+ColorThemer'
// Step 1: Import the ColorThemer extension import MaterialComponents.MaterialButtons_ColorThemer // Step 2: Create or get a color scheme let colorScheme = MDCSemanticColorScheme() // Step 3: Apply the color scheme to your component using the desired button style MDCContainedButtonColorThemer.applySemanticColorScheme(colorScheme, to: component) MDCFloatingButtonColorThemer.applySemanticColorScheme(colorScheme, to: component) MDCTextButtonColorThemer.applySemanticColorScheme(colorScheme, to: component)
// Step 1: Import the ColorThemer extension #import "MaterialButtons+ColorThemer.h" // Step 2: Create or get a color scheme id<MDCColorScheming> colorScheme = [[MDCSemanticColorScheme alloc] init]; // Step 3: Apply the color scheme to your component using the desired button style [MDCContainedButtonColorThemer applySemanticColorScheme:colorScheme toButton:component]; [MDCFloatingButtonColorThemer applySemanticColorScheme:colorScheme toButton:component]; [MDCTextButtonColorThemer applySemanticColorScheme:colorScheme toButton:component];
You can theme buttons with your app's typography scheme using the TypographyThemer extension.
You must first add the Typography Themer extension to your project:
pod 'MaterialComponents/Buttons+TypographyThemer'
// Step 1: Import the TypographyThemer extension import MaterialComponents.MaterialButtons_TypographyThemer // Step 2: Create or get a typography scheme let typographyScheme = MDCTypographyScheme() // Step 3: Apply the typography scheme to your component MDCButtonTypographyThemer.applyTypographyScheme(typographyScheme, to: component)
// Step 1: Import the TypographyThemer extension #import "MaterialButtons+TypographyThemer.h" // Step 2: Create or get a typography scheme id<MDCTypographyScheming> typographyScheme = [[MDCTypographyScheme alloc] init]; // Step 3: Apply the typography scheme to your component [MDCButtonTypographyThemer applyTypographyScheme:colorScheme toButton:component];