droidcon SF 2017 - Transitions without Activities or Fragments

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments

This talk is excellent, and the stuff you can do with the Transitions API is one of the reasons why so many people have ditched Activities and Fragments in favor of solutions that just switch the view in the Activity's root layout based on screen changes.

Instead of the Android framework inflating layouts and managing screen transitions for you, you can now control it yourself. You can actually move view elements around instead of faking it, and keep the layout intact and add and remove view elements instead of replacing everything.

With the Transitions API creating these animations becomes a breeze, as Chris Horner showed in his talk.

👍︎︎ 9 👤︎︎ u/nhaarman 📅︎︎ Dec 25 2018 🗫︎ replies

What animations are you trying to do?

👍︎︎ 1 👤︎︎ u/abdyzor 📅︎︎ Dec 25 2018 🗫︎ replies

Great video, thanks

👍︎︎ 1 👤︎︎ u/SolidScorpion 📅︎︎ Dec 25 2018 🗫︎ replies

That talk assured me that that framework is hell and I should still just put everything together from Object animators (unless it's really hard to do that) XD

👍︎︎ 2 👤︎︎ u/Zhuinden 📅︎︎ Dec 25 2018 🗫︎ replies

29:00

Hehe, good one.

👍︎︎ 1 👤︎︎ u/drabred 📅︎︎ Dec 25 2018 🗫︎ replies
Captions
cool alright hello everyone my name is Chris Horner I'm an Android developer at a company called grid stone based out of Melbourne Australia and I'm a developer that really likes user interfaces it's it's the reason I'm a developer is making those those really slick you eyes right and before before I touch on why I think the transitions framework is really really useful to deliver those slick user interfaces and why it's kind of interesting to do outside of the context of activities and fragments I kind of just want to touch on like why why it's important for you X right cuz I know the material design spec came out right and I was really like wowed by this it was really flashy right like we had items appearing in a list and then things were like growing and then like we'd go to the detail screen there's text that's like flying in and it was really cool right and the part of me that like this you know it wasn't the part that said yes that is very much going to improve the usability of my application that's good no the part of me that thought this was cool was the kid that used to have a Linux desktop like this and you know there's windows flying everywhere and they they explode into like a cloud of fire like when you close them and it was you know please don't judge me too harshly I thought this was awesome no there's actually like a UX game to be had here where you know we build our applications one screen at a time right and we send the user from one then off to the other and it's just like well what context did the user have they've kind of lost it as a safe move throughout our application what were they doing there and this is this is kind of interesting right where I don't know if I'm the only one that does this but you start like you walk from one room into the next one and you think why am I here what was I doing I came into this room for something but I can't remember what it was I've forgotten what that was and there's actually an interesting study done by the University of Notre Dame about this it's a lengthy title they that walking through doorways causes forgetting situation models and experience space now it's a lengthy title but basically the gist of the study was that people are really bad at remembering things when they change rooms that walking through a doorway is enough to lose that context and I'm much better remembering them if they stay inside the one room and I first started noticing that this maybe applies to software as well everyone's favorite operating system windows 7 had had this you could press the start button right and then you could type in the name of a file or a program or anything and you could just do that in the middle of a workflow and bring something up it was very useful and then came everyone's next favorite operating system Windows 8 where you press the start button and what you would see was this and it was kind of the same thing right where you press that Start button and you'll be like what was I doing I was I was opening something but I can't I can't remember what it was so this is this is really really where I started between K there's some usability gains to be had here and I think a lot of people say well like that's all well and good but why do I need the transitions framework to do that I mean I've already got my animator code right like this code is very is very comforting we're all familiar with this it's like hey I can make an object animator and it kind of does what I want why why would I care about the transitions API to me to me there's two big benefits with the transitions API the first one is that it's far easy to compose them an animated code so you can kind of create these generic transitions and reuse them throughout your application the other big benefit is that they allow for these shared element transitions and that's really what lets us carry their users context as we push them through all of the different screens inside of our apps so okay you're interested in learning about transitions what's what's the typical path that an Android developer goes down when they're learning about the transitions API so they go into the developer documentation and there's something about scenes and you're like okay I need scenes and then they're like actually you know you can do that without say you know okay do I need seen so maybe I don't need scenes I'm not sure I'll watch a Google i/o presentation they're usually pretty good this will make things a bit clearer for me and then in the middle of that presentation they they make this call make scene transition animation often activity and you're like okay that's nice but it doesn't really apply to how I make my activities I mean I just watched this this talk from square right and this guy was up on the stage and he was telling me that fragments were really bad and that I shouldn't be using them and I know I've kind of like enjoy building these view based applications and I kind of want to clarify here that this talk isn't about bashing on fragments as we saw before many people still using them and they're kind of great for a lot of things however there's also a lot of people out there who aren't using fragments people who have adopted one of these libraries it's just a quick search right of any of these view based libraries and there's lots I could awful lot one of them's mine I don't know why I made it but there's kind of two aspects to this talk that I want to I want to talk about um the first one is there are times right either it's your entire application or one part of it where you've got some view group right and then you're populating the first screen and you're using a view to do that and then you're navigating to the second screen so you're populating another view slides in great and the other time is where you've heard about this call begin delayed transition and you were told that this call solve all of your problems chats done all of the work for you and the animation is just going to execute by itself and it's going to look wonderful and then you go about putting it inside of your application and what you get really really isn't what you expected so how do you go about debugging that that can actually be really tricky so let's let's look at these two scenarios so the first one on simple layout changes I actually want to touch on something that's kind of been forgotten I feel let's let's just take a simple layout here we've got a linear layout it's not particularly interesting right it's vertical and at some point in my app I've got this blue view and I want to make it visible so I changes visibility to visible great but rather than just snapping into place I would like it to animate so we can do that by adding this animate layout changes true flag to XML and this actually should give us a nice little animation things move out of the way and it fades in it fades out this was added all the way back in honeycomb but we forgot that it existed what's important to note though as I started preparing for this presentation and that's the behavior I remembered but then this is what I got it's important to note that Oreo actually changed the behavior of this flag so now you actually get the fade and the move at the same time so just keep that in mind when you're building your app might not be what you want and the last little trick of old API is I'd like to look at is this this changing bounds transition you can get so if you've got that XML flag enabled you can then pull out the transition type from your container and say hey I want to enable layout transition changing so if at any point inside of your app you're changing the bounds it's actually going to animate that for you which is pretty neat okay but what about if we want to use the transition manager so we'll get like we'll get rid of our m8 the hell changes attribute on our XML and what are we going to do well we'll call that begin to late transition call when I container and we're just gonna say hey the next change after that is we're going to make our view visible and look at that we get exactly the same sort of behavior that we had for our free Oreo animate layout changes which is neat you're like okay what's fine what about when things get a little bit more complicated right like these are all kind of contrived what about a real world example so I want to talk about an app that I've been working on a little bit lately you don't need to understand too much about it it's kind of an interesting app we've got this idea of there's a fab down the bottom of the screen on the left there the user compress that fab loads up this alarm screen they can press a Help button and when they press the Help button it goes into this triggered state so they user can sort of say hey I'm calling for help and buttons change state as well so I think this is interesting right because we're going through one screen to another and then one screen is just changing state from one to another so let's let's be developers together this is this is the animation the design team has given us and we we need to implement what's going on here no it's it's kind of a little bit hard to follow right it's very fast let's let's slow it down so we've got a shared element transition of our floating action button and then we've kind of got some views fading in and out of existence and things sliding back down all right well how are we going to build that well I first want to look at this example of one screen changing from one state to another because I think it's a little bit simpler to reason about than actually navigating between two different screens and I think when we start building things it's always good to come up with a simple version so together as developers we're gonna build this this is our first pass it doesn't need to be terribly complicated right looks like a linear layout to me we've got a textview a couple of them space and some buttons fine except we know that that's not quite gonna be enough because we've got to have this map view that's gonna be sitting behind here so what are we going to do well we can actually put everything inside of a frame layout we'll say all right well our mapping text can just sit behind this linear layout because the linear layout is really what we care about is what we're animating so we're going to give that linear layout a white background it's important to note that because this linear layout is going to start out with these layout dimensions of match parent and match parent and the way we want it to shrink down is we're going to say hey we'll give you a height of wrap content so how we going to do that it's fine we'll just set a click listener on one of our buttons and we'll say yep I'll get the layout parameters and I'll set your height - to wrap content all right so what happens when we animate that well it's a bit hard to see that fast let's slow down so we can see our views fade out it slides down and then the I'm ok button and fades into place which is actually kind of close so what we want in the end result right like it's nearly better but not quite things are happening one after the and we want everything to happen at the same time it's very fast animation so what do we do really we want to look at this begin to late transition call we want to say how we're going to customize this and the API lets us do that the second parameter that we can pass into that call is is a custom transition so let's make one important to note here I'm very deliberately constructing this in Java because that's another thing I feel all examples out there are doing it with XML and to me especially when I'm starting to make these animations it's much easier to just hack them together quickly with Java and then maybe promote them to XML later when I want to kind of build that reusable system right so we'll start by making a transition set transition set is exactly what you think it is it's just a set of transitions we know we're going to need more than one then we're like okay well I need to fade some of my items in or out I know I've been told that the transitions framework looks at where things were at the start of a change and where they're going and it will take care of for me so this is going to fade all the different text views and buttons for me and then I need to change bounce it's just that linear layout is going to shrink a little bit great so I put all of that together and it should work right who thinks this is gonna work all right you were always smarter than I was when I was trying to build this this doesn't work at all things get really funky it's kind of fast let's slow it down we've got the shrink which is fine but our call button and our other buttons are kind of stuck to the top of the layout which is weird so I think this is actually where a lot of people bounce off of the transitions API where something strange that starts to happen like how do I debug this what's going on and I think a good place to start is this change bounds change bounce is always where problems occur I find always start looking there because we see our call button what if we were to just add that to the change bounce if we if we make that another target of this transition then what happens so now our call button stays in place so that's kind of that's kind of a good start right because actually it does need to change bounds relative to its parent it is changing bounds it was sort of further down and then at the end of this transition that's actually right near the top of the linear layout okay well that solved all of our problems right by that logic I should be able to say the okay button and the Help button I can add them to this change bounds too as well right no you can't and the reason you can't do that is because transitions work by looking at where things were and where they're going and some of these buttons either at the start at the end they have no position what bounds are they changing from they can't do that so that's not going to work really we've kind of got this big problem right at this linear layout resizing it's making this transition very difficult we need to go back and look at our layout what's going on what can we change here to make our lives a little bit easier now it may not be the most efficient thing in the world but the first thing I thought is yes what if I just put this view out right what if that white background were just a view and it wasn't affecting the position of other elements on screen at once what if I just animated that that's pretty easy and I think okay well now I've got all these other items in in a linear layout and I don't want them to change positions so does that mean I can kind of fix things by using these two linear layouts and then it's like whoa well that's that's starting to get a little bit messy right and then what happens with this this background view I mean like I know it's gonna go from match parent but then how big does it get it needs to be the same height is this wrap content when you layout down the bottom and it's kind of all falling apart very quickly and I know a lot of you are thinking this as well it's just like why don't we just use a constraint layout it just solves all of our problems makes things so much easier so we will and all we need to do is add a guideline as well we're just gonna say hey it's roughly 60% of the way down the screen and that's going to be the anchor point for that background that slides down and it's going to be the anchor point that the buttons are going to sit on but we get one other huge advantage when we use constraint layout as well and that's what we get to use constraint set constraint sets are pretty cool so a constraint set is kind of like a recording of all of the constraints that a constraint load is currently on its children and you get to bundle that up in an object and then sort of store that state which is neat they've got a strange API so let's let's run through what's going on over here we need we know we need two states one for win this screen is sort of idle when the user is they're still okay they don't need help and then at one point they do need help so we go into that triggered state so we need another one for that and we're gonna start by cloning them from the container so that populates the constraint set with the current state of a constraint layout so we know that the idle States going to be fine our XML is set up for our view when it's in the idle State but we need to modify what's going on in that triggered state so the changes that we're going to be making I don't know that they're kind of they're kind of simple right like a I don't mind these set visibility calls I understand them the connect calls a bit funky what's going on there so just to quickly quickly explain what's happening we're saying hey for this white background view it's constraint top so whenever you're saying like hey constraint the top of this view to the top of this view kind of thing in your constraint layout we're saying take the top constraint and then constrain that to the top of the guideline view so we know that that's going to change the size and then we want to animate it and it gets kind of easy let's forget about the custom transition we made for the moment because things were sort of not really working we'll go back to the default one and we're just going to apply this constraint set to the container we'll animate it so things fade up goes down comes back in and you may be thinking well okay that's fine but we're kind of back where we started right we haven't gained anything however we are a much better spot now that our layout is much more flexible what's happening under the hood here right like what what is the transitions framework doing for you and by default this second parameter is going to be an auto transition and this auto transitions really close to what we want just kind of playing sequentially instead of all at once so let's have a look at the source so looking at that it kind of tells us yeah like I kind of need to make it like a transition set but without all of this stuff so taking inspiration from the default Auto transition sauce let's make one right like we can just say hey we don't care about feeding in or out one off the other we just on to fade everything come in everything go fine and we just want to change bounds or the things that are going to change balance so let's do it hey it's pretty close to what we want right like it's not it's not quite there I mean our text is like fading at the same time as the thing is is scrolling down but when we're nearly there we just need to customize it a bit so how are we going to customize this transition we kind of need to fades one for the title and the instructions text up the top that's going to happen really really quickly we want that to get out of the way before the slides kind of even like there and we'll increase the duration on the other fades and the change balance so what do we get great that's exactly what we want cool so sometimes it can take a little bit of tweaking with your layout to get get where you need to go that's fine of a screen that changes state but what about those times are you actually navigating from one screen to another so it's this example here where we're on the home screen and the user can hit that fab down the bottom and they can get to the alarm screen how are we doing that with our transition so let's have a look at this layout well we'll tap we'll tap that fab and it's going to slide up from the bottom like that so again I think it's always good to start by making a simple version so let's come up as developers together this is our first pass at this so we'll make our home screen it doesn't need to be pretty right it's the same we've already got our view on the right that has our constraint layout we were very happy with that we've just added this nice red orange fab to it but let's look at the home screen let's make it dumb for now I don't want to make it more complicated than that so it's a frame layout it's got some text bottom navigation view and a floating action button with the gravity at bottom so they sit at the bottom of the frame out so let's let's think about what we're doing here right the way we're kind of setting things up is we've got this view group and then we start by saying okay well the first view inside of my view group is this home screen and then that gets pulled out and then we add the alarm screen to that so it's similar to what we were thinking about before right where we just need to begin a delayed transition here and the only difference is we're saying hey we're just actually going to remove an entire an entire home view and we're gonna add the alarm view here which is neat right so what if we start experimenting with this what can we learn so let's start by saying like what happens if I just plug a fade transition in there what does that look like well I mean it's not it's not great right but it's it's exactly what you expect it does what it says on the tin where where the home view is just gonna fade out like fine what about slide sliding is cool sliding's interesting not quite what we're off of but you know it's kind of kind of getting there but slides slides kind of kind of neat to look at because you can do a lot with it I know a transition that everyone likes to use a lot inside of their applications is your view that you're on slides off to the left and then the view that you're going to slides on from the right and you can do this really easily with transitions as well you just say hey I want to start a slide target the home view and it's going to go to this start gravity so because it's disappearing it's gonna go to the start edge and then my our alarm view is coming from the end gravity and because it didn't exist and it's going to exist that's going to slide in from the end and so we get everyone's favorite transition right or sliding from one screen to another which is fine but it's not what we want we want to do better than that so let's customize things we're going to be explicit about our alarm views sliding in from the bottom and what is that what does that look like it's kind of like the alarm view sliding in is what we want but it's weird how a homescreen just kind of like blinks out of existence why why is it doing that well my first thought when I was working on this was like well it's not part of the transition I've removed it from that view group and because it's not part of the transition then it's not being displayed for me so clearly clearly I need to add it to that transition I don't need it to do anything so does that mean I can be a bit cheeky does that mean that I could just be like hey it's gonna kind of fade right but it's actually gonna start 300 milliseconds later and then run for know milliseconds because now the transition manager knows about it right it should display no you can't do that either what actually happens is for 300 milliseconds you see this view and then you see this view so it didn't didn't really work out the slide is actually still going on underneath that you can't cheat that way and the reason you can't cheat that way right is the transition we're doing what we're changing to the layout is where we're removing the home viewer and we're adding the alarm view so it's gone and Android needs to like fake how the home view sticks around and it does that by using a view group overlay which is really interesting a view group overlay is something that every view group has where it can render things on top of its children it's always going to be on top it's quite fascinating if you want some light reading on a Sunday night I highly recommend you look at ghost view Java that's great super fascinating but the point is that's no good for us because we want our home screen to be underneath her alarm screen this is kind of what we're going for and how are we going to do that we really need our home screen to stick around we don't want to remove it immediately when you to remove it later which is normally easy except if you're using some sort of library that manages these transitions for you I know a lot of them impose these restrictions of like yes you're going to make all of your individual screens and then I'll take care of inflating the layouts for you and then pushing popping them for you but that's no good when you need to really customize the behavior of your animations you need to read this carefully so just watch out for that okay well let's let's customize this look at these two lines here we're removing a home view and hurting the alarm view well let's just get rid of that line where remove the home view it's gonna stick around for a little bit longer and then we just need to say hey when our transition ends we're going to take care of removing the home view for you not too bad so what happens hey we get exactly what we were looking for that's kind of nice all right getting that but now we want to share some elements that fab still needs to sort of slide up across the two views so we take a look at our transition again what are we going to do always that our friend change bounds because we want to create a shared element transition between these two different views we add both of them as targets to change bounds and we think that should be enough right well no nothing changed that's kind of interesting well the first thing that I noticed right is that the fab on the alarm view is actually sliding with the content as well so maybe I need to break things up right I want to animate the the content of the alarm screen and the Ferb's separately independently from each other and then you may be thinking well Chris I've already I've already learnt about this isn't there this concept of a transition group right and then every single view group in Android that gets given a background is implicitly treated as a group for the sake of transitions unless I add this flag not quite what we want right because we actually want to treat this as like a separate content container we want to move the container itself as a view in the transition so we're gonna have to break things up a little bit it may be no it may not be what you want but it's just a framework it's not too scary and if we do that now we get to control things a little bit more independently so if we go back to our transition here the one change that we need to make is we need to say hey rather than sliding in the entire alarm view we're just going to be slow in the content container and then our change bounds right that's operating on the fab so now that's independent from from our container so what happens alright well it's a step in the right direction we're still not there yet it's kind of blinking up into place what do we do about that well the problem here is we actually need to remove the home view fab because we're not removing the home view anymore it still exists for the duration of the transition so the transitions frameworks like well what am i animating from and to is still there like it's not a shared element nothing's disappeared my next thought was actually to set the visibility to gone because I kind of maybe want to come back to this home view at some point what's going on there but no you cannot set a view to invisible or gone and have a shared element transition work you actually have to completely remove it from the layout for a shared element transition to work and that's one of the really big gotchas so if we do that hey we get the shared element transition that we were looking for the other thing that's important to note though throughout this entire example is with the two XML files we've been using our ID for the two elements has been the same and that means that the transitions framework can work out that they're going to be used in that shared element transition if you for some reason don't want your IDs to be the same then you can actually just add this transition name property there and that's enough of a hint for the transitions library to be like yup okay we're going to do a shared element transition well it's fine I want to look at something that's kind of the same but a little bit different so let's build a new app now what we want to do is however have some sort of searching application where people can look up things about the transitions library we've got this home screen with a search bar and then they can tap on that search bar and they can input some text what's interesting about this example is there's kind of two ways to approach it right where is it one screen navigating to another or isn't one screen changing State and you can kind of approach at both ways I personally like to approach it as one screen navigating to another because the functionality is very different right what I'm doing on the search I don't really want to have to deal at the same time on my home screen and maybe we're using MVP or MDI or mvvm or whatever flavor of the week happens to be it's easier for you to kind of like keep them as two to disparate screens okay what's that animation going to look like we tap on our our search bar it expands and then it shrinks back down when they hit back let's slow it down a little bit you can maybe kind of get a feel for what's going on so we're thinking yes it's gonna be a shared element transition give this card new that gets to expand and then shrink back down again and we've got this background it's going to fade in so like always we need to understand our layouts let's let's have a look what's our home screen doing well again it looks like a linear layout to me right just a vertical linear layout we've got our app bar we've got a card view we've got a text view we're going to use a compound drawable because I hear I hear that's that's all the rage right now that's displaying a little mascot and then around our mascot we've got two spaces with weights of one and that's going to Center it inside of our linear layout on our next layout now we're gonna say okay well I just need a frame layout doesn't need to be complicated I need to render this scrim this idea of this translucent black background that's kind of going to defocus things and say hey user you're on this page now but you're kind of still floating on top of where you came from so they don't lose their context the card views got quite a lot of stuff going on inside of it it's not terribly important that you know the image button to go back and then a recycle of you to display all of the recent searches that they use is done we're already smarter than this though we know that that's going to be a nightmare to animate that background separately so we're just going to pull it out because I find that way easier to manage and we're going to make sure that both of these elements between our screens they're going to have that shared element of card it's the card that we're sharing between the two screens we're telling the transitions framework about that so this should be easy right but we've learnt a lot of things now we need to fade we're gonna say hey that's screamed you that's going to fade and we are going to run out favorite change bounds transition between the home view card and the search view card so what what happens oh and we also need to say hey you know you know in part of this transition we're just going to add the search view on top we're not removing anything which is going from one to the other so it's not it's not great it's a start how view a view our background is is fading in which is what we want but again our change bounce is like not working properly and this is actually really similar to the problem we just had right about floating action button during the shed element transition we haven't removed it from the layout it's still there our home view card is still sitting behind so we actually need to do something about this we need to remove that home view card so this should work and it does but there's something kind of funky happening here right where our little mascot she's jumping she's jumping up and down as we're searching which is which is not what we want it's kind of weird so why why is that happening so we go back to our layout we declared a linear layout and we've got those two spaces and they have a layout weight of one so they're consuming all of the remaining available space in that layout so after we remove our card view there's more space for them to consume so they do but we kind of get this jumping effect so we need we need a way to mitigate this we need a way to remove the card view but still have things that have liked to sit pretty so a little a little hack I like to use is just adding a frame layout and give it the idea of slot or something idea this idea if it's a slot way you can add and remove at different points some view it's where it's gonna live but if we do that we should be okay right well no that's kind of interesting we didn't change the only thing we changed was the parents of the home views card view and now part of our transition is like immediately blinking up to the top of the screen which is like really strange why is there happening and I think always change balance is an interesting place to look at right what change balance is doing is it's looking at its position inside of a parent before it starts that transition so when we put it inside of that slot container it went from being like sort of a little bit down the screen to now being right at the top of the container so in this transition it doesn't actually get to move anymore we need a way of dealing with reparent and that's what change transform does it actually takes it looks at its global position and says hey how am I going to actually transform this back into local coordinates again when we're going between two different parents so if we add that again what do we get hey all right we actually get to animate up that's really cool I think going back that should be easy right it's just playing the same thing in Reverse how do we deal with that all right it's a water code but it's not too bad it's the same as what we had before right we're gonna fade out our scrim on our search queue and we're just going to set up that shared element transition between the home view card and the search people card simple right and the other thing we need to make sure is we're going to add the home view card back into the home view and we need our container to have the entire searching gear removed from it what happens all right that's that's kind of weird again our screaming or fade works faithful fade but there's something wrong with our with our card what's going on there well the thing to note here is we needed to reference the home views card but we have to do it when we set up the transition but because transitions are always about where things are and where they're going we want that card to be animating back into place so we can only add that card after we call begin delayed transition so how do we kind of reference something before it exists so the real trick for that in Android is you say hey I there's an ID I just reference something by an ID and that's enough for the transitions framework to be like okay you got your I'll look it up when the time comes so if we do that hey we we are shrinking back down again we get the nice transition that we were after so before before I start wrapping things up I just want to say that transitions aren't perfect they do have a lot of problems I think a really a really common strategy right is you're building your application and then you're going to put a toolbar inside of it and then the users going to navigate from one screen to the other and you want the toolbar to stay in place as the content slides underneath it so the way you'd set that up right would be hey I'll just use a shared element transition where my toolbar is that shared element it stays in place but what happens if we do that so it's tricky to see I know with the lighting but if you look very closely you'll see when the transition starts the elevation on the toolbar disappears and that's because hey we're actually animating something that no longer exists anymore so the transitions framework sheets it puts it in the overlay the androids view overlaid doesn't support elevation just doesn't I know Chet's around at this conference if you want to go annoy him about it I'd greatly appreciate it it's something something we need added I think so let's let's give you some debugging tips as well because that's really hard start by knowing your layout hierarchy a lot you need you really need to understand what's going on I can't stress that enough and don't worry about making small changes to your layout to make a transition work the other one is that change balance is kind of cheeky it's where problems go wrong if you if your transition isn't working it's a really good place to start looking and the other one is start by implementing a simplified version of your screens I know the way a lot of us build our apps is the design team comes in they give us a lot of screens and we build them and then we think about okay well how am I going to animate between their screens but you've got a complicated layout that you set up now and it can be tricky so maybe just make a simplified version of that first before you start thinking about like how it can go to your very complicated layout with a lot of years so some takeaways here are that transitions are really powerful please don't ignore them you can do so much right from the idea that they're really really composable to the fact that they give us access to shared elements I think they're kind of great compared to just normal animators and the other one is if you're using one of those view based navigation libraries really look at the documentation carefully it's where things can go wrong if they don't give you enough flexibility and power my personal recommendation on this one is conductor I think it's really really nice I know they've got some stuff on the horizon too about specific shared element transitions between different controllers they call them so have a look at that and the last thing is don't like don't be like me the kid with that Linux desktop don't don't show off great power great responsibility all of that there's some serious UX gains to be had here so I've finished things up you can find me on Twitter here or github there I'd also like to give a big shout out to Nick butcher for helping me with this talk he was really really useful but yeah thanks very much any questions [Applause] if anyone was to ask questions please please just jump on down to the mic over there so basically your experience what's the best way to reorganize all decode once you're done as in how to make it as reusable isolated and organized as possible especially when you're dealing with several members and your team and you don't want to you know crowd you don't want about heads yeah that can get really tricky so like I was saying before I think start by you start by building it in in Java hack it together get it working and then a really good part of that is then say okay well I'm gonna put this inside of XML where it's not gonna bump heads and maybe I can think about making it in a more like modular way if I'm understanding the question right where people can then start modifying that module that you've made in a way to maybe sort of compose things together as well XML is pretty useful for that thanks and thanks for the year presentation no one else curious no one else had problems cool bananas thanks very much everyone I'll catch you around [Applause]
Info
Channel: droidcon SF
Views: 8,612
Rating: undefined out of 5
Keywords:
Id: 9Y5cbC5YrOY
Channel Id: undefined
Length: 40min 15sec (2415 seconds)
Published: Tue Dec 05 2017
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.