MDC-103 iOS: Material Theming with Color, Shape, Elevation and Type (Objective-C)

1. Introduction

Material Components (MDC) help developers implement Material Design. Created by a team of engineers and UX designers at Google, MDC features dozens of beautiful and functional UI components and is available for Android, iOS, web and Flutter.material.io/develop

In codelabs MDC-101 and MDC-102, you used Material Components (MDC) to build the basics of an app called Shrine, an e-commerce app that sells clothing and home goods. This app contains a user flow that starts with a login screen and takes the user to a home screen that displays products.

The recent expansion of Material Design gives designers and developers increased flexibility to express their product's brand. You can now use MDC to customize Shrine and reflect its unique style more than ever.

What you'll build

In this codelab, you'll customize Shrine to reflect its brand using:

• Color
• Typography
• Layout

This is the third of 4 codelabs that will guide you through building an app called Shrine, an e-commerce website that sells clothing and home goods.

The related codelabs can be found at

• MDC-101: Material Components (MDC) Basics
• MDC-102: Material Design Structure and Layout
• MDC-104: Material Design Advanced Components

By the end of MDC 104, you'll build a app that looks like this:

MDC iOS components and subsystems used in this codelab

• Themes
• Color
• Typography

How would you rate your level of experience building iOS apps?

Novice Intermediate Proficient

2. Set up your development environment

Download the starter codelab app

Download starter app

The starter app is located within the material-components-ios-codelabs-master/MDC-103/ObjectiveC/starter directory. Be sure to cd into that directory before beginning.

...or clone it from GitHub

To clone this codelab from GitHub, run the following commands:

git clone https://github.com/material-components/material-components-ios-codelabs
cd material-components-ios-codelabs/MDC-103/ObjectiveC/Starter/Shrine

For more help: Cloning a repository from GitHub

Run the starter app

1. In Xcode open the workspace "Shrine.xcworkspace". If you see the "Welcome to Xcode" window, click "Open another project...", navigate to the file and click open.
OR: Go to File > Open... and navigate to the file and click "Open".
OR: At the terminal enter: open Shrine.xcworkspace
2. Run the app by pressing the play button at the top of the window.Note: Screenshots are generated from building on an iPhone 6s.

Note: if you see an error:

ld: warning: directory not found for option '-F/{build_dir}/Products/Debug-iphonesimulator/MDFInternationalization'

You may have opened the Shrine.xcodeproj file. Please go back and open the Shrine.xcworkspace file instead.

Success! You should see Shrine's home interface running in your simulator.

While the app is functional, let's make it match the Shrine brand by changing its color and typography.

3. Change the color

This color theme has been created by a designer with custom colors (shown in the image below). It contains colors that have been selected from Shrine's brand and applied to the Material Theme Editor, which has expanded them to create a fuller palette. (These colors aren't from the 2014 Material color palettes.)

The Material Theme Editor has organized them into shades labelled numerically, including labels 50, 100, 200, .... to 900 of each color. Shrine only uses shades 50, 100, and 300 from the pink swatch and 900 from the brown swatch.

Let's change the color of the navigation drawer to reflect that color scheme. We'll do this be instantiating a default ColorScheme object and modifying its properties to match our designer's color scheme.

Set the application's colors

In ApplicationScheme.m, modify the following lines:

// Instantiate a MDCSemanticColorScheme object and modify it to our chosen colors
_colorScheme = [[MDCSemanticColorScheme alloc] initWithDefaults:MDCColorSchemeDefaultsMaterial201804];
//TODO: Add our custom colors after this line
_colorScheme.primaryColor =
    [UIColor colorWithRed:252.0/255.0 green:184.0/255.0 blue:171.0/255.0 alpha:1.0];
_colorScheme.onPrimaryColor =
    [UIColor colorWithRed:68.0/255.0 green:44.0/255.0 blue:46.0/255.0 alpha:1.0];
_colorScheme.secondaryColor =
  [UIColor colorWithRed:254.0/255.0 green:234.0/255.0 blue:230.0/255.0 alpha:1.0];
_colorScheme.onSecondaryColor =
[UIColor colorWithRed:68.0/255.0 green:44.0/255.0 blue:46.0/255.0 alpha:1.0];
_colorScheme.surfaceColor =
    [UIColor colorWithRed:255.0/255.0 green:251.0/255.0 blue:250.0/255.0 alpha:1.0];
_colorScheme.onSurfaceColor =
[UIColor colorWithRed:68.0/255.0 green:44.0/255.0 blue:46.0/255.0 alpha:1.0];
_colorScheme.backgroundColor =
    [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0];
_colorScheme.onBackgroundColor =
[UIColor colorWithRed:68.0/255.0 green:44.0/255.0 blue:46.0/255.0 alpha:1.0];
_colorScheme.errorColor =
    [UIColor colorWithRed:197.0/255.0 green:3.0/255.0 blue:43.0/255.0 alpha:1.0];

Apply the colors to the home screen

Now that we've updated our application's color scheme, we'll use a themer to apply the colors to our interface.

Add the code to HomeViewController in HomeViewController.m near the end of the viewDidLoad method:

// TODO: Theme our interface with our colors
id<MDCColorScheming> colorScheme = [ApplicationScheme sharedInstance].colorScheme;
self.view.backgroundColor = colorScheme.surfaceColor;
self.collectionView.backgroundColor = colorScheme.surfaceColor;
[MDCAppBarColorThemer applyColorScheme:colorScheme
                toAppBarViewController:self.appBarViewController];

Build and run. Your home screen should now look like this:

Let's change the color of the login screen to match our color scheme.

Add the colors to the login screen

Add the code to LoginViewController in LoginViewController.m near the end of the viewDidLoad method:

// TODO: Theme our interface with our colors
id<MDCColorScheming> colorScheme = [ApplicationScheme sharedInstance].colorScheme;
self.view.backgroundColor = colorScheme.surfaceColor;
self.logoImageView.tintColor = colorScheme.onSurfaceColor;
self.titleLabel.textColor = colorScheme.onSurfaceColor;
[MDCTextFieldColorThemer applySemanticColorScheme:colorScheme
                            toTextInputController:self.usernameTextFieldController];
[MDCTextFieldColorThemer applySemanticColorScheme:colorScheme
                            toTextInputController:self.passwordTextFieldController];
[MDCTextButtonColorThemer applySemanticColorScheme:colorScheme
                                          toButton:self.cancelButton];
[MDCContainedButtonColorThemer applySemanticColorScheme:colorScheme
                                                 toButton:self.nextButton];

Build and run. Your login screen should now look like this:

Notes on color and themes:

• You can customize the color in your UI to better express your brand.
• Make a color palette starting from two colors (your primary and secondary colors), with light and dark variations of those colors. Or use the Material Design palette tool to generate palettes.
• Don't forget the color of your typography!
• Make sure text-to-background color contrast is at an accessible ratio (3:1 for large type, 4.5:1 for small).

4. Modify typography and label styles

In addition to color changes, your designer has also given you specific typography to use in the app. (We're including a custom font inside the app.) Let's add that to the home screen too.

Set the custom font in the Application Scheme

In ApplicationScheme.m, update the following code in the initStandardSingleton

method:

// Instantiate a MDCSemanticColorScheme object and modify it to our chosen colors
_typographyScheme = [[MDCTypographyScheme alloc] initWithDefaults:MDCTypographySchemeDefaultsMaterial201804];
//TODO: Add our custom fonts after this line
NSString *fontName = @"Rubik";
_typographyScheme.headline5 = [UIFont fontWithName:fontName size:24.0];
_typographyScheme.headline6 = [UIFont fontWithName:fontName size:20.0];
_typographyScheme.subtitle1 = [UIFont fontWithName:fontName size:16.0];
_typographyScheme.button = [UIFont fontWithName:fontName size:14.0];

Update the AppBar typeface

In HomeViewController.m, update the following code at the end of the viewDidLoad:

method:

// TODO: Theme our interface with our typography
id<MDCTypographyScheming> typographyScheme = [ApplicationScheme sharedInstance].typographyScheme;
[MDCAppBarTypographyThemer applyTypographyScheme:typographyScheme toAppBarViewController:self.appBarViewController];

Style the item cells

To adjust the font and alignment, add the following code to the configureCell method in ProductCell.m:

  //TODO: Set custom font based on our ApplicationScheme and center align text
  id<MDCTypographyScheming> typographyScheme = [ApplicationScheme sharedInstance].typographyScheme;
  self.nameLabel.font = typographyScheme.subtitle1;
  self.priceLabel.font = typographyScheme.subtitle1;
  self.nameLabel.textAlignment = NSTextAlignmentCenter;
  self.priceLabel.textAlignment = NSTextAlignmentCenter;

Update the same configureCell method to disable the rounded corners and stroke outline. You can do this by setting the cornerRadius and borderWidth to 0.0.

Build and run. Your home screen should now look like this:

Let's change the typography of the login screen to match.

Change the typeface of the login screen

In LoginViewController.m, modify the viewDidLoad method with the following lines:

// TODO: Theme our interface with our typography
id<MDCTypographyScheming> typographyScheme = [ApplicationScheme sharedInstance].typographyScheme;
self.titleLabel.font = typographyScheme.headline5;
[MDCTextFieldTypographyThemer applyTypographyScheme:typographyScheme
                              toTextInputController:self.usernameTextFieldController];
[MDCTextFieldTypographyThemer applyTypographyScheme:typographyScheme
                              toTextInputController:self.passwordTextFieldController];
[MDCButtonTypographyThemer applyTypographyScheme:typographyScheme
                                        toButton:self.cancelButton];
[MDCButtonTypographyThemer applyTypographyScheme:typographyScheme
                                        toButton:self.nextButton];

Build and run. Your login screen should now look like this:

Notes on typography:

• When choosing text fonts, used for small type and body text, choose fonts that are clear, rather than for a certain style.
• Display fonts, used for large type and titles, should be used to express or emphasize brand.

5. Change the layout

Next, change the layout to show the cards at different aspect ratios and sizes, so that each card looks unique from the others. We'll also change the scrolling direction from vertical to horizontal.

Modify the CollectionView Layout

We're providing a custom UIViewCollectionLayout in the CustomLayout class. For more information on implementing a custom collection layout, see Apple's documentation.

In HomeViewController.m, add the code to the end of the viewDidLoad method:

  // TODO: Set layout to our custom layout
  self.collectionView.collectionViewLayout = [[CustomLayout alloc] init];

6. Try another theme

Color is a powerful way to express your brand, and a small change in color can have a large effect on your user experience. To test this out, let's see what Shrine would look like if the color scheme of the brand were completely different.

Change the scheme to a variant

In ApplicationScheme.m, modify the +sharedInstance method:

//TODO: Change scheme to initialize with initAlternativeSingleton
scheme = [[ApplicationScheme alloc] initAlternativeSingleton];

Build and run. The new theme should now appear.

The app now has very different colors and typography! Let's revert this change before moving on to 104.

7. Recap

By now, you've created an app that resembles the design specifications from your designer.

The completed MDC-103 app is available in this directory: docs/codelabs/material-components-ios-codelabs/MDC-103/ObjectiveC/complete

You can test your version of the app against the app in that directory.

Next steps

You've now used the following MDC components: theme, color, and typography. You can explore more components and subsystems in the MDC iOS library.

What if your planned app design contains elements that don't have components in the MDC library? In MDC-104: Material Design Advanced Components, we will go over how to create custom components using the MDC library to achieve a specific look.

I was able to complete this codelab with a reasonable amount of time and effort

Strongly agree Agree Neutral Disagree Strongly disagree

I would like to continue using Material Components in the future

Strongly agree Agree Neutral Disagree Strongly disagree