Material Components

Material Components

Material Components for iOS

Create beautiful apps with modular and customizable UI components.

  • Accurate & up to date

    Implement Material Design with pixel-perfect components, maintained by Google engineers and designers

  • Flexible development

    Develop apps using components that support iOS technologies like Swift, Objective-C, and storyboards

  • Industry standards

    Take advantage of the same components used in Google’s iOS apps, which meet industry standards for internationalization and accessibility

Getting Started

An easy way to create beautiful apps with modular and customizable UI components.

  1. Install CocoaPods

    CocoaPods is the easiest way to get started. If you’re new to CocoaPods, check out their getting started documentation.

    To install CocoaPods, run the following commands:

    sudo gem install cocoapods
    
  2. Create Podfile

    Once you’ve created an iOS application in Xcode you can start using Material Components for iOS.

    To initialize CocoaPods in your project, run the following commands:

    cd your-project-directory
    pod init
    
  3. Edit Podfile

    Once you’ve initialized CocoaPods, add the Material Components for iOS Pod to your target in your Podfile:

    target "MyApp" do
      ...
      pod 'MaterialComponents'
    end
    

    If you are using Swift, don’t forget to uncomment the use_frameworks! line at the top of your Podfile.

    Then run the command:

    pod install
    open your-project.xcworkspace
    

    Now you’re ready to get started in Xcode.

  4. Usage

    Now you’re ready to add a component (e.g. Buttons) to your app! Include the Material Components header for the component you’re interested in to your app (detailed below) to get all of the required classes.

    Choose from Objective-C or Swift:

    Objective-C

    #import "MaterialButtons.h"
    
    @implementation ViewController
    
    - (void)viewDidLoad {
      [super viewDidLoad];
    
      MDCRaisedButton *raisedButton = [MDCRaisedButton new];
      [raisedButton setTitle:@"Raised Button" forState:UIControlStateNormal];
      [raisedButton sizeToFit];
      [raisedButton addTarget:self
                       action:@selector(tapped:)
             forControlEvents:UIControlEventTouchUpInside];
    
      [self.view addSubview:raisedButton];
    }
    
    - (void)tapped:(id)sender {
      NSLog(@"Button was tapped!");
    }
    
    @end
    

    Swift

    import MaterialComponents.MaterialButtons
    
    class MDCBuildTestViewController: UIViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
            let raiseButton = MDCRaisedButton.init();
            raiseButton.setTitle("Raised Button", forState: .Normal);
            raiseButton.sizeToFit();
            raiseButton.addTarget(self, action: "tapped:", forControlEvents: .TouchUpInside);
            self.view.addSubview(raiseButton);
        }
    
        func tapped(sender: UIButton!){
            NSLog("Button was tapped!");
        }
    
    }
    
  5. What’s next?