All Ruby on Rails Node JS Android iOS React Native Frontend

Material Design on iOS

Material Design is a style created by Google, presented for the first time on Google I/O 2014 and launched just after the keynote. The basic metaphor of material design is a flat sheet of paper in 3D space. It is the default approach for designing Android applications, however, Google uses it on other platforms such as iOS and Web.

When it comes to Android, there’s no doubt that we should use it, however, it’s not so straightforward on iOS, where the current default approach is Flat Design, introduced with iOS 7 in 2013. I don’t think that either of them is better than the other – they are different, and that makes switching between platforms interesting.

Should we use Material Design on iOS?

When reading this section, please keep in mind that I’m not a UI/UX Designer. My opinion is an opinion of a developer who created apps for both iOS and Android and used them as a normal user for some years. The short and very subjective answer to the question above is: in most cases, NO. Every platform has its own style that users are used to. They know which gestures are likely to work, they know what animations mean, they understand the differences between various alerts, and know what those differences mean. Even if they aren’t UX experts, and they cannot explain the meaning of something in great detail, they just feel it because of the sheer amount of time spent using particular platform. They have been embedded in a particular style for years, and it would very easy for them to understand a freshly installed application quickly.

Taking this into consideration, I think we should stick to the Flat Design on iOS and to Material Design on Android. My answer, however, was that we shouldn't use Material Design on iOS use it in most cases, so, what are those minor cases in which we can use it? The very few are the applications provided by Google, such as Google Calendar, Google Keep, or Youtube. Because of Material Design being there, we can see at the first glance that this app was created by Google team and it’s part of the Google family.

How to implement Material Design on iOS?

There are a few approaches to implementing Material Design on iOS. First of all, we can just create our own subclasses that would look similar to the given designs. Of course, it’s very time consuming, so if we want to implement Material Design-styled elements, we should look for a framework. There are two main players right now: Material, created by a group called CosmicMind and material-components-ios backed by Google.

 

Comparison

   Material  material-components-ios
 Date of v1.0 release  Aug 23, 2015  Mar 4, 2016
Number of GitHub stars   9 828  2 368
 Number of contributors  35 85 
 Language  Swift Objective-C 
Number of issues   904
(49 open, 855 closed)
 2129
(1018 open, 1111 closed)
 Samples  link  link
 Documentation  ⚠️ In code  link
Number of lines analysed (using cloc, only component files) 
  •  80 Swift files
  • 2031 blank lines
  • 5340 comment lines
  • 9176 lines of code
  •  456 Objective-C files
  • 14828 blank lines
  • 10187 comment lines
  • 55754 lines of code

Conclusion

Looking at the code, the Material framework is much smaller and it depends mostly on the existing UIKit classes. Consequently, it’s easier to understand and use. The Material-Components framework is more advanced and offers more components, though. It mostly depends on custom UIView subclasses, even for such elements as buttons. With more customisation also come more bugs and edge cases. Which one you should choose depends on your use case. I would recommend you make sure first that you really want to use Material Design on iOS. If the answer is still yes, check out the Material framework, and if it still isn't enough for your needs, try the material-components-ios framework.

 

Let's make the world better for everyone - join us
New Call-to-action
READ ALSO FROM iOS
Read also
Need a successful project?
Estimate project or contact us