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
MDC iOS components and subsystems used in this codelab
- Themes
- Color
- Typography
How would you rate your level of experience building iOS apps?
2. Set up your development environment
Download the starter codelab 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
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: | ||
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. |
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:
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:
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.
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.