A Closer Look at Google’s Material Design Components Library and How to Get Started with it

Just over a fortnight ago, Google announced the launch of the “Material Components library”,  a centralized repository of Material Design components that a significant amount of people interpreted as a “copy-pasting of the Design Support Library.”

However, the move is a significant effort as not only a powerful push to spread Material Design’s influence across platforms, but also as a unification of the teams behind previous efforts, ending the fragmented approach taken thus far.

Wait, what is this “Material Components Library”?

Material Components is Google’s initiative to unify Material Design’s implementation frameworks across platforms in one centralized repository, with development handled by a core team of engineers and UX designers at Google. These components, being official and handled by a dedicated team, enable a reliable workflow which allows developers to use them as building blocks upon which they can go on to build beautiful and functional user experiences in a paper and ink paradigm. The library includes most of Material Design’s components from its spec, such as checkboxes, text styles, cards, buttons et al, and its modularity allows developers to either include the entire set, or pick and choose only the components they need.

Material Components for Android, iOS and the web help developers execute Material Design with modular and customizable UI components.

Didn’t the Design Support library and Material Design Lite already do this?

At this point, Android and front-end developers might surely be thinking, hold on, I’ve been using the Material Design components using the Design Support Library on Android or using Material Design Lite on the web, why do I need this new library? Well, both those options have graduated into Material Design Components, with an improved codebase, efficient modularity, consistent cross-platform implementations, and most importantly, a dedicated team of developers and UX designers at Google overseeing its development, as opposed to the previously fragmented approach.

Overview

Android

Material Design has seen a spike in its adoption rate since the launch of the Design Support Library, becoming the de facto standard as of late with Google including the library, as well as pre-setting a slew of Material Design oriented configurations upon creation of a new project in Android Studio. In the time since it’s release, the DSL has grown significantly, adding a bunch of components upon popular request, as well as including new behaviors and functionalities for existing components.

The Material Design Components Library for Android is in effect, the DSL graduated to GitHub under the new centralized patterns and to the dedicated team at Google, retaining even the former’s Gradle import statements. As it stands, nothing developer-facing has changed with this graduation, but the potential for the future remains boundless. Using the MDC-Android library is no different from using the DSL, adding it to Gradle and then using the Views in XML.

compile 'com.android.support:design:25.1.0'

<android.support.design.widget.FloatingActionButton
 android:id="@+id/fab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom|end"
 android:layout_margin="@dimen/fab_margin"
 android:src="@android:drawable/ic_dialog_email" />

iOS

Material Design has seen an extremely stunted growth on Apple’s mobile platform, primarily because it is viewed as Android’s design language, but also due to the lack of official support libraries for Material Design components, similar to what the Design Support Library on Android has been doing for over two years now. The Material Design Components for iOS library, or MDC-iOS as Google refers to it, aims to fix that by providing a set of reliable, easy to use and official Material Design components, that are written in Objective C but also support the newer Swift language, and Xcode’s Interface Builder.

Google has put together a handy guide on how to get started with setting up a new project with MDC-iOS, but most of us would relate better to a step-by-step guide for existing projects, and the official repository contains that as well. The simplest way to get started is using CocoaPods, Objective C and Swifts’ dependency manager. In case you’re not already using it, CocoaPods can be installed with a simple command:

sudo gem install cocoapods
cd your-project-directory
pod init

Next, the MDC-iOS pod has to be added to your Podfile:

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

And finally, you’re ready to install the pod and get started with workspace that CocoaPods created for you:

pod install
open your-project.xcworkspace

Using the components should come somewhat naturally to seasoned iOS developers, since the library is built upon the familiar UIKit classes, and can be added to a view with a few lines once you import the appropriate header.

Swift

import MaterialComponents.MaterialButtons

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let raiseButton = MDCRaisedButton.init();
        raiseButton.setTitle("Raised Button", forState: .Normal);
        raiseButton.sizeToFit();
        raiseButton.addTarget(self, action: #selector(tapped), forControlEvents: .TouchUpInside);
        self.view.addSubview(raiseButton);
    }

    func tapped(sender: UIButton!){
        NSLog("Button was tapped!");
    }

}

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

 

Web

Material Design’s journey on the web began with the launch of Project Polymer, Google’s web components and polyfills library which included a set of ‘paper-components’, bringing everything from the beloved Floating Action Button to the breathtaking ripples that everyone has grown so fond of, to the web we know and love. However, Polymer saw a dismal adoption rate due to a widespread hesitance from web developers to adopt an entire web components framework, solely to get the Material Design look and feel, with many opting for self-implemented CSS alternatives instead. To fix that pain point, Google launched Material Design Lite, a framework-independent product that allowed developers to implement Material components by simply importing a few scripts and stylesheets over CDN, or downloading and including them in HTML.

Material Design Components for Web aims to be a successor to Material Design Lite, bringing its easy-to-import structure and lightweight footprint, as well as building upon it by bringing modularity into the picture. MDC-Web components can be installed using Node Package Manager, either as an entire set or as separate components.

npm install --save material-components-web
npm install --save @material/button @material/card

Once installed, components are fairly straightforward to import and use,  with the bundle providing inbuilt support for popular JavaScript module loaders such as Webpack or SystemJS, and when imported, modules are used just like standard HTML tags, albeit with a few extra CSS classes.

import {checkbox as mdcCheckbox} from 'material-components-web';
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>

That’s it! This is the easiest way to get started with the MDC-Web library. For a more in-depth introduction, Google has put together a Getting Started guide too, which should prove useful to developers already familiar with importing and using such frameworks.

Useful Links

• Material Components GitHub Repo
• Material Design Guidelines
• Material.io
• MDC-Android on StackOverflow
• MDC-iOS on StackOverflow

from xda-developers http://ift.tt/2ivL37F
via IFTTT