Living in a Material world
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 46 | |
| Author | ||
| License | CC Attribution 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/47184 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
droidcon Berlin 201516 / 46
5
7
10
13
16
18
20
21
23
26
31
34
35
36
41
42
45
00:00
Drop (liquid)Storage area networkSocial classMobile appFacebookCuboidComputer programmingGoogolBuildingAndroid (robot)Mobile WebProgrammer (hardware)
00:37
Android (robot)Open setElectronic program guideoutputOpen sourceComa BerenicesSoftware developerLecture/ConferenceMeeting/Interview
01:25
Bit error ratePresentation of a groupSoftware developerExpert systemLecture/Conference
02:05
Expert systemTrailMultiplication signGroup actionElectronic program guideMobile appOrder (biology)Data structureGoodness of fitInteractive televisionRandom matrixLecture/ConferenceMeeting/Interview
02:46
Electronic visual displayComputer networkWireless LANInformation securityGUI widgetPlastikkarteSystem callRoboticsMultiplication signElectronic mailing listTouchscreenGoogol
03:27
GUI widgetWireless LANComputer networkSystem callInformation securityPlastikkarteData storage deviceElectronic visual displayElectronic mailing listFormal grammarGraph coloringView (database)GoogolInteractive televisionTouchscreenGroup actionSheaf (mathematics)Android (robot)Computer iconProcess (computing)PlastikkarteDrop (liquid)Computer animation
04:44
Mobile appData structureoutputAndroid (robot)Lecture/Conference
05:08
Group actionDifferent (Kate Ryan album)GoogolGoodness of fitComputing platformCharge carrierDivisorComputer configurationFormal languageDefault (computer science)Form (programming)Android (robot)Mobile appComputer animation
05:59
Mobile appVideoconferencingGoogolMultiplication signSign (mathematics)
07:01
Library (computing)Computer fileGoogolXMLProgram flowchartComputer animation
07:28
RepetitionMoment (mathematics)Multiplication signSign (mathematics)Right angleComputing platformVideoconferencingStatisticsMobile appComputer animation
07:57
RectangleSquare numberShape (magazine)Interactive televisionComputing platformMaizeView (database)Graph coloringElement (mathematics)Acoustic shadowTouchscreenAnalogyZirkulation <Strömungsmechanik>Evelyn PinchingDivisorWordArithmetic meanLecture/Conference
09:15
DivisorReal numberObject (grammar)Element (mathematics)OpticsMeeting/Interview
09:40
HypothesisElement (mathematics)Web pageAcoustic shadowModeling languageAndroid (robot)Category of beingAndroid (robot)Group actionRule of inferenceElement (mathematics)Acoustic shadowGlobale BeleuchtungComputer graphics (computer science)Real-time operating systemFormal languageLevel (video gaming)PhysicalismVideoconferencingMaterialization (paranormal)Image resolutionNeuroinformatikNP-hardComputer animation
11:00
Interactive televisionObject (grammar)View (database)File viewerGroup actionMedical imagingAcoustic shadowMobile appComputer animation
11:36
Cartesian coordinate systemTouchscreenView (database)Group actionXMLUML
11:56
Bit rateRule of inferenceGoogol
12:26
Digital signalAcoustic shadowTape driveArchitectureSign (mathematics)Data storage deviceMobile appGraph coloringCountingSoftware developerSinc functionGame theoryNumberSubject indexingNumbering scheme40 (number)Beat (acoustics)Acoustic shadowCausalityAbsolute value
14:02
RankingGraph coloringComputer architectureSign (mathematics)Instance (computer science)CodeMobile appMeeting/Interview
14:36
ExpressionBit error rateNormal (geometry)Control flowFamilyGraph coloringDecision theoryBlock (periodic table)GoogolCodeComputer fileElectronic program guide
15:25
Raster graphicsMobile appGraph coloringPRINCE2Lecture/Conference
16:08
RobotRegular graphStandard deviationMobile appFormal languageMultiplication signComputer animation
16:30
Bit error rateRegular graphOrder (biology)Reading (process)Formal languageDifferent (Kate Ryan album)GoogolType theoryBuildingCASE <Informatik>Mobile appChemical equationContent (media)Internet service providerLecture/Conference
17:09
Group actionGroup actionView (database)Task (computing)Element (mathematics)Multiplication signXMLComputer animation
17:53
TouchscreenGreatest elementElectronic mailing listView (database)Hausdorff dimension40 (number)Dimensional analysisMarginal distributionTablet computerTouchscreenGroup actionGoogolComputer animation
18:13
Event horizonView (database)Mobile appGroup actionEvent horizonBus (computing)Meeting/Interview
18:36
TouchscreenAerodynamicsCartesian coordinate systemSymmetric matrixGroup actionFunctional (mathematics)TouchscreenNumbering schemeCASE <Informatik>Order (biology)Normal (geometry)Dynamical systemReal numberObject (grammar)Type theoryInteractive televisionGraph coloringBookmark (World Wide Web)Graph (mathematics)Forcing (mathematics)Spherical capMathematicsDirection (geometry)BitAsymmetryRight angleXMLComputer animation
19:52
AsymmetryGroup actionReal numberObject (grammar)MathematicsFundamental theorem of algebraForcing (mathematics)Mechanism designMobile appSemantics (computer science)Perspective (visual)
20:42
Physical systemPoint (geometry)Sound effectMobile appoutputTouch typingMathematicsGroup actionEvent horizonTouchscreenComputer animation
21:27
Element (mathematics)Parity (mathematics)TouchscreenMultiplication signFeedbackPoint (geometry)Sign (mathematics)Android (robot)outputGroup actionMeeting/Interview
22:08
Convex hullElement (mathematics)GUI widgetSoftware testingTouchscreenGraph (mathematics)Group actionView (database)Element (mathematics)Entire functionElectronic program guideComputer animationMeeting/Interview
23:04
Electronic program guideShared memoryElement (mathematics)Group actionComputer iconTouchscreenView (database)Information securityMultiplicationJSONXMLUMLComputer animation
23:54
Continuous functionElement (mathematics)Local GroupGroup actionVisualization (computer graphics)Graph coloringElement (mathematics)FeedbackMobile appAnalytic continuationSuite (music)Computer animationMeeting/Interview
24:26
Formal languageHypothesisRule of inferenceElement (mathematics)Continuous functionGroup actionGraph coloringTouchscreenMobile appComputer animation
24:56
Element (mathematics)Formal languageGoogolComa BerenicesDifferent (Kate Ryan album)TrailSign (mathematics)FacebookElectronic program guideSoftware developerDecision theoryMobile appLecture/Conference
25:43
Software developerAndroid (robot)Multiplication signMetropolitan area networkLecture/ConferenceMeeting/Interview
26:12
Lecture/Conference
Transcript: English(auto-generated)
00:05
Thank you, Matthias, and thank you, DroidCon, for having me. It's been a wonderful experience, and I'm really, really excited to be here today. And welcome to the material world. My name is Nidhisha, and I work
00:22
for a small startup called CodePath, which is based out of San Francisco. We provide fast-paced, in-person programming classes to experienced programmers. We teach them how to build mobile apps, iOS, and Android. And we've been really, really fortunate to work with big Silicon Valley companies,
00:42
like Google, Facebook, Dropbox, Apple, Pinterest, Yahoo, and many, many more. We really love everything open source, and our iOS and Android guides are also open source. So if you're a serious Android developer, you should check it out. It's guides.codepath.com slash android.
01:01
And if you also want to contribute towards it, they're open source, and we have around 150,000-plus users accessing those guides every month, and around 200 contributors to the guide. So they're almost always up to date as well. So that's about me. I would like to know you guys as well.
01:22
How many of you are designers here? Oh, quite a few. And can I assume the rest of you all are developers? I guess no. How many of you are developers? Oh, wow. That's a lot of you all, a lot of us.
01:42
Awesome, welcome. Welcome again. So before we start, before I even started preparing for this presentation, I asked myself, what impact do I want to have after finishing the presentation? I cannot promise that you're gonna be an expert
02:03
in material design 20 minutes from now, but what I can promise is that you're gonna be an expert in learning new tricks in material design, and you'll just be on the track. You'll have all the resources, all the guides available in order to be an expert in material design
02:21
if you're willing to spend the time in it. So these are the three main topics that I want to discuss today as far as material design goes. First of all, the basic philosophies of material. Why would you use material? What is Google trying to achieve by material design?
02:42
What are various guidelines for color, text, the structure and the layout of your apps? Also, what are the guidelines for motion and interaction, animations and transitions, et cetera? So these are gonna be the three main topics of this presentation, and I hope it's useful to you guys.
03:06
I think before we actually start talking about material design, it's important to know where we are coming from. I think all of us would agree here that Google has come a long way since the early days when it really struggled to convince the world
03:21
that its green robot can literally change the world in so many ways that we couldn't even imagine at that time. And especially with Android Lollipop, Android has received its biggest makeover in years. Now, with makeover, I mean this. I mean, on the left, you see a list view
03:41
which is not standardized. Nothing over there is standardized. There are large buttons on the right side of the screen which looked like drop-down button, but they don't really drop down anything. But on the far right, you see a list view where the icon sizes are formalized.
04:00
Everything is structured, the text size, the height of each section. Everything is standardized here. It just looks much more polished and beautiful. So we can easily say that Google has come a long way since its early days of Android. Also, if you give a closer look to the screens, you can also see that the action bar
04:22
was almost missing in the first screen. It kind of got introduced somewhere in between and in the last screen, it got formalized. Now, it tells you what is the size of the action bar, what is the color of the action bar, how it should behave to user interaction.
04:40
So just in general, Google is trying to do a better job standardizing things, formalizing the structure of your layouts. So this is the pre-material. These are all of the problems with pre-material. If you've been an Android user for a while,
05:01
then you already know that there wasn't much material, there wasn't any structure or unified design aesthetic in Android apps like there was for iOS. In general, it just offered a lot more flexibility and options within and between apps. So lack of coherent look and feel. This was especially true across multiple form factors.
05:23
Just a lack of good guidelines for transitions and animations. Also UI and UX fragmentation, especially across carriers and different manufacturers who try to customize the default Android behavior.
05:42
So enter material. In June last year, Google announced material design and in general, material was just an effort to lay a foundation for a design language that would make the Android platform much more consistent and united.
06:00
I just read it, I think yesterday somewhere, it said material design is designing for designing. Did anyone get it? How many designs were there in my last sentence? So it's really as simple as that. It's just standardizing your designs for designing an app.
06:21
Now before I dig into the philosophies of material design, let's take a look at material design that Google released last year so we can get a visual sense of what it's about. Also, it's after lunchtime so I feel a video would help here.
07:25
Well, it partially worked. I hope everyone is awake now. So it was, I think one of the wow moments, right? I'm sure a lot of us have already seen that video by now but when I first saw it, I was like, wow, I mean, that's the emotion
07:42
I expect to see when I show my app to anybody for the first time. There has to be at least a couple of animations, a couple of things that make that wow feeling happen. So the reason I want to get into the philosophies of material design instead of just jumping straight into the specs and giving you practical tips
08:03
on what material design is and how we can use it, I think it's really important to understand where a platform is coming from to see where it's going. This is just a foundation that Google is trying to lay. This is not the end goal. So there's a lot of material design jargon to skim through
08:22
but in short, material is just a digital fabric made of pixels, if that makes sense. Google is also using the analogy of paper and ink to describe material so every element that you see on your screen depicts a material. Everything, every button, every view that you place
08:42
on top of each other, they all depict a material. Either it's in circular shape or rectangular shape or square shape and they all have shadows. Now user can tap, swipe or pinch this material fabric and it will move according to user interaction. It will behave the same way as a normal material would.
09:03
I mean, just for example, if you take a silk cloth or just any material for that reason. Google also encourages to use really bold colors and graphic layouts and really meaningful motion as well.
09:22
So these are the founding factors of material design. Just material, it has to be bold and graphic and the motion should provide meaning. It should come from the real world objects. So just to reiterate, material is just
09:42
a hypothetical material, you're not really laying a sheet of paper on top of each other. So all the UI elements are treated as materials. And just like any other material like a piece of your paper, material also has realistic physical properties. It casts shadows and it has elevation.
10:03
And these guidelines provide a unified design language for all Android experiences. And Google really wants to take this further and just keep improving this experience. Here are some rules that define material design.
10:24
So if you see here in this video, note that the shadows cast the real time soft shadows that approximate global illumination. And this is a really, really hard problem when it comes to computer graphic. So this is a huge deal in computer graphic.
10:43
Similarly, another rule states that material cannot overlap. You can see that if material is put on top of another material, it casts shadow. And the elevation should change depending on the level of that material or the element that you placed into a view group.
11:05
It also says that materials have different elevations. We just talked about it. In the second image, you can see that if materials are put on top of each other, there is a floating action button. There are three, four different views. And every view will have a different soft shadow
11:23
based on its elevation. And these are very subtle things. And as engineers, we don't really think about them as much, but they all add to the overall user experience and the UI of your app. It also says that material can split, combine, and reshape.
11:47
So as you can see, it can split and it can also combine with another material. This is especially applicable when it comes to animation. When you're transitioning from one screen to the other, your material can split. It can combine with other views,
12:02
going from one activity to the other. The only thing that remains constant is the height of elevation. It is always one DP. Now, this was about what. What was material and what it is supposed to do? What are the rules?
12:21
You would ask, I mean, this is the next logical question. Why would you use material, right? So I don't know how many of you saw the Google IO this year, but Google announced that around 200K plus apps are material apps in the Play Store today. And since they announced material design last year,
12:42
40 plus percentage of apps which were released in the Play Store use material design. And if you actually don't count games out of it, then more than one out of every three app is material design, which is a really huge number considering it hasn't even been a year
13:02
since material design has been out. So just to recap, material is a digital fabric made with pixels, material cast shadows, and it has elevation. Material is depicted in a 3D model,
13:21
so it has X, Y, and Z index, where Z index actually depicts the elevation. And material can split, combine, and reshape. Another thing that we should worry about is color, text, and layout of our apps.
13:41
So I think that's probably one of the most overlooked features, especially if you're a developer and you don't have a designer on your team, we don't really care about typography or the color scheme of our apps. Not every developer is that way, but most engineers lack that kind of a design expertise.
14:06
So material really, really recommends the use of bold colors, really vibrant colors in your app. And it takes this inspiration from contemporary architecture, from like road signs or even athletic codes.
14:23
Now one thing that you should know about color is that color should be unexpected and it should be vibrant. I mean, if there is any one thing that you should know about color in your app, it should be this. And to make this possible,
14:40
Google also came out with the Palette API. Now Palette comprises primary colors and accent colors. So you can define all of these colors in your styles.xml file. I purposely not added code blocks here because it's kind of hard to read through it. It was really painful to make that decision as an engineer
15:02
because that's the one thing that I really look forward to. But I mean, it was just easy to talk about code and not talk about the design aesthetics, but I share the guides with you later so you can have a look at that. But this is about the color palette.
15:24
And it's really easy. All you have to do is just say color and get vibrant color, palette.getVibrantColor. It's as simple as that. You provided a bitmap and it picks the most prominent color from the bitmap and it returns you the RGB value. These are some of the examples of beautiful apps
15:44
made possible only with the use of Palette. And these are different APIs which are available through Palette. So you can see you can get the vibrant swatch, you can get the dark vibrant swatch,
16:01
muted swatch, there are six different methods which are available through the Palette API. Typography is another important aspect of any app actually, not just material design. And the two standard typefaces available
16:22
in material design, Roboto and Noto. So I think we all know this, but we kind of overlook this when we design our apps. Roboto is mainly used for English and English-like languages, whereas Noto is used for all the other languages, Middle Eastern and Southeast Asian languages.
16:43
And Google also provides size and style guidelines to balance content delivery and reading comfort. So if you go to the design guidelines on Google's website they have a lot of different sizes and style guidelines that you can refer to. Depending on what type of app you're building,
17:02
if you're building a news reading app, you really care about the reading comfort and yeah, it depends on your use case. But be careful, avoid using too many sizes because it can obviously be distracting to users' eyes.
17:24
This was probably the most discussed item from material design, the floating action button. It actually represents a circular sheet of paper on top of all the other view elements. And it's used to represent a single promoted action.
17:43
So if there is any primary action that you want your users to perform, it has to be done using a floating action button. Or at least Google recommends it that way. As with everything else, Google also recommends a dimension from this floating action button.
18:01
It has to be placed in the bottom right corner of the screen. It has to have margin of 16 dB for phones and 24 dB for tablets. And you can also attach it to list views, recycler views and any other scroll view for that matter. These are just some of the examples of beautiful apps using a floating action button.
18:23
You can see there's a calendar app which is used to just, you can just click on the plus button, the floating action button and it brings up the event view where you can create a new event. Again, just like everything else,
18:41
don't overdo it. Not every screen needs fab. Only if a screen has a primary function, that is the only use case where you need fab. You can make an educated decision on whether you need a floating action button or a normal action button with elevation or just a flat button depending on your use case.
19:05
So just to recap, use Palette to develop your brand colors. Use Palette as much as you can. Use Dynamic Type for best UX and use fab per screen only if it is necessary.
19:27
This is probably my favorite topic of motion and interactions. So if you see the graph here, I'm sure everybody has seen this before, but it just depicts a symmetric and asymmetric motion.
19:43
And if you think about the physical world, if you think about real world objects, you have to apply force in order for an object to move. And the strength and duration of these forces dictate how quickly an object accelerates and decelerates or even changes direction, right?
20:01
So it really depends. The object doesn't really start or stop immediately. It takes a while for it to start. Then it's in motion and then it stops. So it's kind of asymmetric. It's not really symmetric. And your transition should depict the same behavior as real motions.
20:21
That is the idea that material design is trying to bring in. And if you just have the symmetric animations that kind of look mechanical and they don't really depict the real world motion. So it is good to know these fundamentals because when you're trying to implement animations
20:40
in your own apps, you can see what is working and what is not working from the user's perspective. Again, these are very subtle changes. Nobody will complain about it if your transitions are not asymmetric, but your mind kind of sees it and everything adds to the overall UX user experience of your app.
21:02
The next big thing is ripple effect. In material design, apps are responsive to user input. It's pretty clever actually. Upon input event, the system provides instant virtual confirmation from the point of your contact.
21:21
So wherever you touch the screen, the ripple will start from that point. And this is called a touch ripple. Add clarity as much as possible. Give feedback to your users and add ripples to all the things.
21:47
Transitioning between two screens. This has always been questionable and a major point of discussion between designers and engineers.
22:01
This was possible in iOS for a long time now, but with material design, now you can also do it in Android. Unfortunately, all the animations are not backward compatible. You need Lollipop API 21 Plus for all the animations to run, but all the widgets are backward compatible. Now transitioning between two screens,
22:23
it should be really clear, smooth, and effortless, just like the graph that we saw earlier. And it's really important because a well-designed transition tells the user where to focus their attention. So what we're trying to do here is that you have two shared elements
22:41
between two activities and you're trying to animate just the shared elements, not the entire view group, not the entire activity. And this is the example of a shared element transition. See how beautiful that is?
23:05
Again, I'll share the guides later so you can know how we can achieve all of this with just simple steps. Be careful with shared element transitions because you don't want to be doing shared element transition across 20 different elements on your screen.
23:20
You might want to just share one view group with multiple elements. It can just be an icon that you want to transition or it can be a view group, but if there are multiple elements that you're transitioning between two screens, it can be jarring and the experience will not be as great.
23:43
Circular wheel, another really beautiful transition. It's mainly used to just make some items visible or invisible. It's as simple as that. So just to repeat again, you gotta love ripples.
24:01
Add ripples to your app as much as you can, provide visual feedback to your users, provide visual continuity by implementing the shared element transitions or also called as hero transitions and use circular wheel if it suits your design.
24:20
So just to summarize, we kind of ran over time, but again, we set out to learn about three things. What is material? The philosophies behind material design. Why we should use bold colors and graphical colors and where they come from, what is the inspiration behind it, what is fab and why you should use meaningful motion
24:44
in your animations and transitions in your apps and just focus user's attention to the main things on the screen and not the entire activity and all the items in the view group. So I hope with that, I achieved my goal of,
25:02
do you guys feel like at least you're on the track of understanding material design and you'll go back and read the design documents and try to add more polish to your apps. Even if it's, I know it's not required, it's a hard decision. We are always busy with a lot of other things,
25:20
but these little things make a lot of difference. Trust me. This is the URL for the guides, guides.codepath.com. You should really bookmark it. We use these tools and these guides to train engineers at Facebook and Google and all the other companies
25:41
and they are really great resources if you are learning Android development or you are already an experienced Android developer. So I think thank you so much. I hope you guys at least got the philosophies around material design.
26:01
And if you have any questions, I'll be around. I think we ran over time. So I won't take questions here, but I'll be downstairs or just come and say hi, even if you don't have questions. Thank you so much. Thank you.