theming-with-themers.md

How to theme a button using a themer

Note: This documentation refers to legacy APIs that will eventually be deprecated. Please consider reading the updated theming documentation instead.

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.

Swift

// 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

Objective-C

// 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

Text buttons

To theme a button as a Material Design text button, use MDCTextButtonThemer.

Swift

MDCTextButtonThemer.applyScheme(buttonScheme, to: button)

Objective-C

[MDCTextButtonThemer applyScheme:buttonScheme toButton:button];

Outlined buttons

To theme a button as a Material Design outlined button, use MDCOutlinedButtonThemer with an MDCButton.

Swift

MDCOutlinedButtonThemer.applyScheme(buttonScheme, to: button)

Objective-C

[MDCOutlinedButtonThemer applyScheme:buttonScheme toButton:button];

Contained buttons

To theme a button as a Material Design contained button, use MDCContainedButtonThemer.

Swift

MDCContainedButtonThemer.applyScheme(buttonScheme, to: button)

Objective-C

[MDCContainedButtonThemer applyScheme:buttonScheme toButton:button];

Floating action buttons

To theme a button as a Material Design floating action button, use MDCFloatingActionButtonThemer with an MDCFloatingButton.

Swift

MDCFloatingActionButtonThemer.applyScheme(buttonScheme, to: button)

Objective-C

[MDCFloatingActionButtonThemer applyScheme:buttonScheme toButton:button];