hello everyone and welcome to this presentation on easing in to material motion transitions i am nick rout i'm a developer advocate at google and i'm focusing on material design on android so today we're going to be looking at material motion and how to implement it on android and in order to do that we're going to have a look at some different sections to break this topic down we're going to start with the design system and overall look at the theory behind material motion transitions we're then going to take a look at a brief overview of the mdc android implementation we're then also going to introduce an example app and then in doing this we're going to go to some practical examples of uh identifying scenarios where we can add material motion transitions to an existing app how to implement them and some things to look out for we're then going to wrap things up and set some time aside for q a so let's get going first up we're going to take a look at the design system so from material that io the motion system is a set of transition patterns that can help users understand and navigate an app it's important to note here that this system in particular focuses on transitions so this is navigation between separate screens in an app or transitions between different elements on the screen or between screens it doesn't cover other forms of animations such as vector animations or perhaps more low level things like object animators or value animators there's many ways to animate things on android but this in particular is focusing on transitions

so the four different types of transitions that make up these patterns are container transform shared access fade through and fade they're designed to be used in a variety of scenarios that cover various aspects of navigation and transitions within your app to indicate relationships between elements on screens and also indicate to users the flow of an app when they're navigating through your ui

so to kick things off we're going to take a look at the container transform pattern this is for elements that have a shared container the container is something like a surface or background that is holding the the particular element and if a screen or perhaps two items on the screen have a relationship between them transitioning between them using this container transform which morphs between these two states can really indicate that there's a distinct relationship to the user here we can see some examples of list items and widgets that are expanding into full screens alternatively it could also be individual elements on the screen itself like a fab morphing into a media player or a chip morphing into a card

the next pattern is shared access if elements do not have a shared container but perhaps have what's known as a spatial or navigational directional relationship the shared access pattern can be great here it's essentially a pattern that shifts items either on the x-axis y-axis or z-axis to indicate some form of direction here we can see some examples of an onboarding flow uh or stepper which are using x and y axis axes respectively to indicate that items are moving forward or back or up and down the third pattern is fade through if you're transitioning between two elements but they do not have a relationship between each other and you don't need to indicate that the fade through pattern is a good a good pattern to use it offers you a subtle fade and scale animation but doesn't say to the user that these items are anywhere related in fact the deployment says that these are distinct while offering a smooth transition here we can see some examples of switching between high level navigation destinations on something back bottom navigation or switching accounts on an inbox screen

the last pattern is the fade pattern this is for elements that are standalone so you're not transitioning between let's say two screens or two elements on the screen but just individual elements that need to appear and then disappear on screen it uses again a subtle fade and scale to indicate this here we can see some examples of how this is used for dialogues menus and widgets like fabs and snack bars

now that we have a brief overview of the theory i'd like to introduce you to the material components for android aka mdc implementation of this system it's available in version 1.2.1 and onwards this is in fact the latest stable release of the mdc library at the time of speaking

from material.io the library offers transition classes for these patterns built on top of both the android x transition library as well as the android transition framework

so the reason for this and the reason that there are two distinct implementations of these of the motion system is because this needs to support various different scenarios specific to android so there are classes that essentially map to these transitions but there are two implementations of them in the transition package and then the transition.platform package the transition package is recommended and these are classes that are built on top of the android x transitions and they support fragment and view transitions they benefit from back-folded back-ported bug fixes and consistent behavior levels and go all the way back to api level 14. however if you need to be doing activity transitions or window transitions unfortunately there's no back-ported support for transitions here and so this is where you would need to use the platform versions of these classes just bear in mind that it's api 21 plus and that you may see some inconsistent behavior across api levels but together these pretty much give you an implementation of material motion transitions for all different scenarios on android the four classes that i'm talking about are they mapped to the four uh transition patterns that i mentioned earlier so this is material container transform material shade access material fade through and material fade notice the shade naming let's take a look at some examples of high level examples of how you might use these in some common scenarios on android but here i'm going to show you a container transform between fragments using jetpack navigation the first thing you'd want to do in your fragments layouts is add a transition name here we're using start container and end container and these two views in particular would be the ones that have the shared container that you're going to be morphing between in our fragment b we need to set a shared element into transition to a material container transform in our fragment a we would need to set an extra transition to a hold this is also part of nbc android and there's a separate class this essentially just holds the the fragments view on screen while the shared element transition is running then making use of jetpack navigation shared element support we add extras to reference the start view to the end container the next example that i'll show you is a shared z-axis between fragments this is slightly simpler in our uncreate block of our first fragment we set a re-enter transition at an exit transition setting it to a material shade axis specifying the z-axis and then specifying the directions similarly in our second fragment we would also do the same but the directions would be different

next i'll show you a fade through between fragments and this is even simpler we're simply setting an extra transition as a material fade through on our first fragments which will be disappearing and an enter transition as a material fade through in our second fragment which will be appearing last but not least i'm going to show you how to fade a target for you using the transition manager and using the material fade transition it's quite simple as well we simply simply declare a material fade transition use the transition manager to begin a delay transition on the overall container of our fragment or our we want to be running this transition specify the fade and then adjust the visibility of the particular view that we want to be fading in or out depending on whether we want to hide or show it that was a brief look at some very high level examples of how you might go about implementing transitions using material motion on android if you've dealt with transitions on android before it should look quite familiar especially android x transitions just slightly different class names but it's pretty similar to shade element transitions or just regular android x transitions between fragments activities and views however i'd like to introduce an example app where i had to identify scenarios where i could add material motion to certain flows or screens in the app and implement it and then came across some caveats that i think you should be aware of

the example app is called rugby ranker it's essentially an app that shows you rugby rankings fixtures and news it's available on github and also on google play it makes use of things like 100 kotlin uh pretty much all architecture components libraries and of course mdc

there are a few flows in the app which i identified which i thought would be good for implementing material motion so when i built this up i figured like you know i would use jetpack navigation and rely on the default animations that come out of the box with this library for fragments and dialogue fragments and so forth once i'd done that i went through certain flows to figure out where i might want to add material motion so here we can see that the top level navigation element is a nav drawer and when switching between them um it relies on the default jetpack navigation uh alpha animation that's fading out the in the outgoing view and fading in the incoming view it's not bad um but it is certainly a case where i think we could be using something like a fade through transition because there aren't any there isn't a relationship between the top level screens but we want to get that sort of nice scale and fade that we saw from the fade through material motion and transition the next flow which is the main flow within the app is adding a prediction so this is when you would add a match and then see how the rankings would change the main thing to note here though is that there are two elements on the screen that are definitely related there's the fab and there's something known as the prediction bar they clearly share the same container color which is that blue secondary color and the plus icon they only differ in there in the fact that the prediction bar includes a list of chips that show your current predictions so in this case i think it would be a great example or a great scenario where we could use a container transform

lastly on our settings screen we have a theme dialog so this essentially allows you to pick your dark mode theme that you'd like for your app light dark or system default and once again it's just using a jetpack navigation to show this dialog fragment and using the bundled or the default animations which appears to just be a fade in and out so here despite slightly confusing naming we'd use the material fade because i think it could benefit from that scale which would add a little more polish to this experience

so now we're going to have a look now that we've identified some key scenarios where we could add material motion let's look at some practical implementations of material motion on the in these three separate flows in the app starting off we'll take a look at the fade through transition which is going to be for our top level navigation destinations

we have three classes in the app there's sport fragments which houses all of the rankings fixtures and live scores there's news fragment and there's info fragment which is our setting screen we don't have anything added here yet actually related to transitions we're basically just using the default jetpack navigation fragment animations as i mentioned earlier but let's change that in all of these fragments in our oncreate block we'd want to be adding both an in to and extra transition and specifying a material fade through we'd want to be we would want to be using specifying both enter and exit because switching between these destinations can happen in pretty much any order you could be going from sport fragment to infofragment into fragments and news fragments and then news fragment back to infofragment and all of these cases you'd want the outgoing fragment to fade out or fade through out i should say um and then the incoming fragment to use fade through n so now that we've added these to each of these fragments how does it look well when we take a look at it it doesn't really look quite right the info fragment appears to be an animating to an extent but we if we slow it down we can see that the news fragment certainly isn't and there's a strange effect happening where the text of the info fragment is left uh failing out over the uh the news fragment and this definitely isn't right this doesn't look like the fade through animation that we saw from the design theory in the beginning so what's going wrong here as it turns out we actually need to do a couple more things to get this to run correctly firstly on our in each of our fragments layouts we need to set android transition group to true this ensures this attribute ensures that the transition is applied to the screen as a whole as opposed to individual views within the hierarchy which can cause the transition fragment to get a bit confused this attribute is available from api 21 onwards but there is a compact version i would available which can be used programmatically secondly we want to include these two lines of code in our unview created block in our fragments um this essentially postpones the enter transition and then starts it just before we just went on pre-draw is running and this postpones the enter transitions and allows them to run smoothly and choreograph together once we've added them we'll see that this is now looking a lot better our news and info fragments are smoothly switching between each other with the material fade that we fade through that we have seen before however while this is working correctly and is certainly the default when i looked at it i thought to myself that this is looking a little bit fast and that i'd like to tweak the duration of the animation slightly and with the mdc android implementation of these transitions you can do just that so in addition to the default material phase through transition which i applied i specified a transition duration value which is just mapping to a default android value of 400 milliseconds i'm applying using an apply block to add these to both of my material fade through transitions and voila it's in my opinion looks quite a lot better i think the slightly longer duration as opposed to the default 300 milliseconds choreographs a bit better with the sliding out navigation drawer that's our material fade through transition complete let's move on to our container transform this one's pretty exciting in my opinion

so in our sport fragment which houses both our fab and our prediction bar we have the following code already which basically fades out the fad and fades in the prediction bar when you add predictions and then when you clear the predictions it fades out the prediction bar and the fab fades in it's a fairly simple bit of code we're specifying a default android x fade transition we're using transition manager on the overall root layout of our fragment and then we're adjusting the visibility of both of these two widgets depending on some logic but we want to change this to a material container transform and we want to get that nice shared container relationship and transition that we saw earlier the first thing we need to do is change our transition from a fade to a material container transform the one at the one thing that we're setting here is a scrim color to transparent this scrim color is essentially all of the space around the shade container that happen that animates along with uh the shade element transition the material container transform usually you'll see like maybe a semi-transparent black color which just adds to the overall um yeah overall polish of the animation but this is better for screen to screen transitions in our case because we're transitioning between two views on a screen we don't actually want to have the scrim because i would then obscure the content behind the fab and the prediction bar so we've set this to transparent

the next thing we need to do is add a target to this transition in our case we're using the fab this prevents the container transform from running on both the start and end view which can cause some jank

lastly using similar logic that we use below for studying the visibility of the two widgets we use some logic here to essentially set a start and an end view which happens to be either the prediction bar or the fab or vice versa i'd like to note here that the code below involving the transition manager and visibility of these two views remains the same from our original implementation that just stays as is now that we've implemented this how does it look in my opinion pretty good there's now a clear relationship between this fab and this prediction bar um when we slow it down we can see how it choreographs really nicely and smoothly animates between the two states giving you the sense that this is a despite the fact that they're two separate widget classes that they're one um that they're one on the same however as with before i looked at this and thought to myself it feels a bit fast in real time and there's something slightly snappy about it i guess that's maybe not the best word but that's how it felt when i when i first looked at it so again i went into how i might customize and tweak the values of this to refine the experience

i added three things firstly as of before i changed the duration to this 400 millisecond value next i adjusted the interpolator this essentially changes the easing of the animation so that it's a bit smoother as opposed to linear and in our case we're using a fast art slow in interpolator there's a bunch of interpolators available um it's quite an in-depth topic as to which one you should use but maybe chat to me about that afterwards

the last thing we did was set a fade mode there's a bunch of these fade modes which essentially fading and changing the alpha values is one of the aspects of a material container transform and in my case i only wanted to fade out the outgoing content without changing the opacity of the incoming content which when i slowed it down looked a bit better

and the final implementation while the differences may be subtle from what you saw before do feel a bit smoother to me um slowing it down kind of looks about the same but in real time i think it looks a lot better and choreographs really nicely with the recyclerview diff animations that you see happening on the ranking screen that's our container transform transition completes let's move on to our final one the fade transition this is going to be on our theme on our theme dialogue fragments so in this class uh as with the other example we don't have anything added here yet we just use in default jetpack navigation dialog fragment animation so nothing too interesting to see in our initial implementation

the first thing i tried was with my other fragment example inside my dialog fragments on create block to set and enter transition and exit transition to be a material fade as it turns out this didn't work the next thing i tried and the next idea i had was to perhaps grab the dialogue that backs the dialogue fragment then get access to its window and using those platform classes that i mentioned in the beginning set the enter transition and exit transition on the window instead but this also doesn't work as it turns out we can actually only apply animations to an alert dialog via window attributes in a theme overlay but the problem in my case is that these mdc android transition classes as i've shown in all the other examples can only be used programmatically you can't specify them let's say an xml or put them in a nav graph or something like that they're pretty much exclusively used programmatically so what can we do here in my case the only option i was really left with was to make an xml version by following the material spec and then inspecting the materialfade.java source code i know it sounds a little scary but let's go through it because in the end i think it worked out pretty well

the first thing i did was went to material.io and looked at the motion system spec we need to make an xml version of material fade in and out so fade in has a few specs that are mentioned here it scales from 80 to 100 of its size from its center point for 150 milliseconds then it's fades from an alpha of 0 to 1 for the first 45 milliseconds by inspecting the material fade source i saw that they were also using a fast out slow and interpolates on the entire transition

so let's go about implementing this as an xml animation first we specify a set in our res and a new file a new file material fade in.xml and a set which has our interpolator which is fast out slow in set on it then to this set we add our scale animation which is going to take our x and y uh scales from 80 to 100 pivot from the center point which is 50 and run for a duration of 150 milliseconds as per the spec the next thing we'll want to do is then add our alpha which adjusts from 0 to 1 for the first 45 milliseconds and that's our fade in animation in xml form complete

the next thing we want to make is the fade out transition and this happens to be quite a bit simpler when we check material.io all it's doing is fading from one to zero just for 75 milliseconds and again using the same interpolator there's no scale here involved so again we make a new file material fade out.xml and our res slash and directory create a set with our same interpolator and add our alpha animation one to zero and it runs for 75 milliseconds

now we're getting into alert dialog territory we've made these two raw xml animation files but we need to bundle them together into a style so in our case we need to do this here and we've named it accordingly ascending extending from the android animation based style we reference these two files that we made material fade in and material fade out using the window enter animation and window exit animation attributes we've now bundled this into a style this style then needs to be referenced in a theme overlay i've made a theme overlay here that extends from theme overlay. material components of material dialogue because i'm using material alert dialogue to show or to build of dialogues in my app in my dialog fragments important to note here is the window animation style attribute needs to point to the style that we made previously almost there the final thing we need to do in our apps theme the one that we would set on our activity or at an application level is use this attribute material alert dialogue theme and point it to the theme overlay that we just made this will apply these animations to enter and exit animations to every material alert dialog in our app which i wanted but if you want to use it on a per you a per case basis if you use material alert dialog builder there's a secondary constructor which accepts a theme overlay resource id so with all that done now and all that xml coding we've completed how does it look in my opinion pretty good it matches the default spec i didn't feel that it needed any further adjustments or tweaking of values and i was really happy with how it came out although i didn't use a material fade programmatic class from the mdc library i was very easily able to recreate it in xml and apply it to all the dialogues in my inclusion including this theme dialogue so we've been through adding a bunch of transitions to our existing app we've had a look at the design theory we've had a look at some more generic examples but also some caveats and some things that you need to be aware of i think in the real world when you actually end up using this our final implementation in my opinion i think looks really good these transitions individually perhaps may seem not that significant or that they're like a small thing that you're adding to your app but when you combine all of them together in our case container transform fade through and fade and then add in other things like sliding sheet animations recyclable diff animations even such things as vector animations and so on and so forth it really lends itself to a smooth fluid user experience it clearly indicates how users navigate through your app and the relationship between certain elements and screens that make up the overall flow i think it's looking really good

of course there are some more resources that are available to you there are official docs and samples on material that i owe in both the design and develop sections of the website i would also suggest that you check out the mdc android catalog app this is available on the ngc android github repository and if you go catalog slash transitions or just clone that repository and run that run that in on your phone you can take a look at some of the various options that they have there recently we've published a whole bunch of content under the name building beautiful transitions with material motion for android currently and it's in the form of a code lab and a blog post and we have a video coming out on the soon this goes through a similar process how i did with my app with a material study app called reply

and that's that we've been through a whole bunch of stuff related to material motion adding it to an existing app and some things to be aware of on android um i'd like to thank everyone for attending my talk and uh i would like to open it up now for questions from from the crowd

okay have a look at the questions now first one's from dave any resources you'd recommend for developing a better sense of what how to tweak to make them more pleasing as you've done here i know there's guidance on material that i owe but that's the spec that you're tweaking right the out of the box transitions it's a really good question i'm not sure i have a solid answer for this um in my case i am the sole developer designer everything on my app um in many cases though i think you may have access to designers on your overall team or at your company and i think they might be good people to consult because this you know tends to perhaps come into ux design and ui design overall um but at the end of the day for me it was a case of seeing how it feels uh and in particular what helped for me was the developer option on on android which allows you to slow down uh your various animation scales if you haven't seen that already there's it's in developer options and you can also get a quick settings tile for it but that really helps if you want to like really fine-tune and adjust how it feels in terms of the actual theory of what gets it just to feel right

i guess i'm a little bit unqualified to answer that question i mainly did it if i feel and what i thought felt right for me so um i hope that answers your question yeah what effects does this have on ui performance um so considering that it's built on top of the existing android x transition uh library uh not a whole lot in most cases initially when the library launched there were a few performance issues with um especially the material container transform because it's quite a heavy calculation of shifting and morph between these two states uh but as of 1.2.1 a bunch of those performance issues are squashed so um i think it's fairly minimal these days and i haven't noticed anything myself especially in my production app all these animations coming to jetpack compose great question um i believe the intention is yes the actual timeline of such i am not aware of and i don't really know uh i don't think i'm really qualified to answer this question right now um but at the very least i know that compose is committed to implementing the material spec as a whole and of course motion forms part of that so definitely at some point when i can't say for now

okay the next question is hey nick for jetpack navigation transitions did you leave these in the nav graph or replace them with the mdc programmatic definition in the fragment so i actually didn't specify any animations in my nav graph you can using jetpack navigation with all these like enter re-enter exit um i think those are the name popxo popped into xml animations um i didn't use that at all there are default animations that come out of the box which is that fade if you don't do that and in the case where to build the xml version of material fade actually those animations don't work with dialogues in navigation there as well in the nav graph too so there's pretty much it's quite a dialogue program is quite limited in how you can apply this so that was the only way that i found that could work um but yeah i didn't have any initial jpeg navigation transitions applied what is the view component that the fab animates into when tapped from anonymous that is a custom view that i made it's called prediction bar it is a compound custom view which includes a card a recycler view and recycle view that hosts a list of chips an icon which is the plus button it's essentially a custom view and but the source code for it is available on my github repository the class name is predictionbar.kt so you can take a look at that now it's not too complicated um but yeah do you have any advice on implementing transitions from when adding start removing views to existing view groups rather than switching between top level fragments slash view groups um yeah so in this case um when my experience uh that's when using something like the transition manager setting up a transition and using the transition manager and setting target views is is where you would want to start adding and removing from view groups is something i haven't tried but in most cases i started with an xml layout that includes all of the views that i may want to transition between uh with some kind of default visibility like pretty much all of them are gone and the one is visible and then transitioning the between them is a case of setting up a transition giving it to transition manager and then adjusting the views of the relevance expressing the visibility of the relevant views and that just seems to work out of the box i imagine that having a similar approach when adding or removing from view groups would work but personally i actually haven't tried that carla says i had issues with shared element transitions between activities the second activity appeared very slowly did you experience something similar i didn't because i don't have any activity transitions in my app i have a single activity and just use fragments

i would first thing i would ask is which version of the library are you using 1.2.1 included a lot of performance and bug fixes from 1.2.0 so my first suggestion would be to bump to that if you aren't on that and if you're still experiencing it i would suggest creating an issue on the material components nbc android github repository and ideally with some reproducible sample code or projects so that we can take a look

um osama says is there a tool for designers to build these animations only by design so they would be technically possible to implement by developers using md emotion uh guidelines um a part of me thinks it's a yes uh i need to i'm pretty sure there is something i forget the name um i'll i can get back to you in the chat room uh on talk about that i just need to go and remember what that is um yeah let me send a link to to talk if i can find it yeah enrico says i think it's much better to implement transitions with xml to take separated ui and code what's your opinion um yes and i think for screen to screen transitions it certainly can be beneficial and does take away a bit of like you know craft in your fragment code um but in some cases like especially with the container transformer you need to do certain things programmatically like uh start view and the end view and apply that based on logic that's when you almost need to do it programmatically i do agree and in my case i guess i had wished that there was an external version of the material fade so this sounds like a pretty good feature request for the github repository once again so if you feel like doing that that would be appreciated i've got to thank you doesn't look like a question but i'm going to take that as uh all my questions are up

all right see you in talk and thank you so much again for attending