How to Implement a Shared Element Transition In Jetpack Compose

hey guys and welcome back to a new video in this video we will explore the new shared element transition included in the composed animations Library by default now so we can finally have sheared element transitions that look like this we have a list of items and we can click on an item to get to a detail View and the transition in between is animated this is what we will build if we navigate back then it will animate back of course you can also speed up that animation will also work for other images so I think a very cool look and definitely something that will make your Apple look more high quality if you have such a list and detail screens also this is now the last call for anyone interested in my Android premium courses especially the new bundles tonight the 25% discount will expire and all prices will rise again so if you're serious about Android development and you want to learn the industry relevant skills Link in BIO one thing that I've already done is I've included two images here in our drawable folder and I would recommend you to do the same you don't have to use the same images as I am if you want so you will also find them on my GitHub repository which a link down below but in the end you just need two images as a demonstration here and then before we can actually use this new shared element transition API we need to include the proper dependencies so right now it's included in compos version 1.7.0 Alpha 7 so it's still an alpha dependency we have to explicitly include here we can do so by opening our Gradle scripts Opening Our version catalog and then here we can duplicate one of these compos dependencies or just paste those that I've already added on GitHub so these two uh dependencies we we need on the one hand compose animation which includes this dependency together with a version we have to create in a moment and we of course need navigation compos in order to navigate from one screen to another so let's add these two versions on the one hand to compose animation which is the version 1.7.0 Das alpha7 and for the navigation compos dependency we're going to use version 2.7.7 we can then synchronize this and also add these new Define dependencies to build. gr file so let's open that here module app scroll down to the very bottom and here we want to add implementation Libs Android a um composed. animation and on the other hand we have lips um Android a navigation. compose synchronize this again and now we are ready to get started with coding and using this in our app let's close these two and get back into our carton plus Java file or folder and in here I first of all want to create a little list screen and a detail screen just with very minimal setup so we can test the transition between these two so in our root package let's have a list screen will be a normal file and in here we can create a composable function called list screen on this list screen we will pass an on item click Lambda which will on the one hand give us access to an integer and a string so the integer will be the drawable resource ID of the uh image we clicked on and this will be the text next to it so that we can animate both of these because the next screen actually needs to know which element so which composable our screen animates to which so here we can say unit we can then Define our drawables here just as a static list um just as a little demo we first have a drawable Kermit one in my case and Kermit 2 you of course replace that with whatever images you have this example will by the way also work with as many images as you might have because it should of course work for every single item in the list then as for most list screens we will start off with lazy column in order to display all of our items we can give this a modifier of modifier filmax size to just fill our whole screen we can add some vertical arrangement of arrangement spaced by 16 DP just to add 16 DP of spacing between each item Alt Enter to import DP and let's also add some content padding of padding values 16 DP so it doesn't look that cramped then inside this lazy column we're going to have an items index block so we get a reference to both the item we Loop over here and the index of that icon of that item um so the list we want to Loop over is our drawable list so the list of resource IDs and then we get each index first of all and then the corresponding image resource ID that belongs to that we can then show these in a row so just like here we show this as a demo so you see what I'm building we have we have a row of items on the left we have our image and then the text right next to it so let's have a row make it fill the whole WID of our screen fil Max width and this will also be clickable since if we click on it we want to perform the transition here we say on item click we pass in our Ras ID and our text of that um specific list item which we can create here by just saying okay that's item plus the index here we say text and then we don't have any more errors inside that row we will now put our image we can use a painter in order to load an image from our resources when we say paint a resource pass in our Ras ID we get from the lazy column Let's ignore the content description here and we need to give it some sort of size we can do this with a modifier modifier we say the aspect ratio of that image is 16 to 9 so 16 / 9 F and then we get it a weight so um a relative width of our row we can add some spacing in between image and text so width of 16 DP and then afterward we can put our text which is oops text which is a bit simpler where the text is just the text we've defined previously and here we can also set the modifier to a modifier. weight 1f so the text fills the remaining half of our row and then we can actually copy this row and create our detailed screen with it then we will actually use a column but we just need to swap out the row with a column in that case and do some very minor adjustments so in our package har key we're going to create a detail screen make that a file composable in here called detail screen this will now take two arguments on the one hand the drawable resource ID that we pass to the screen to know which image to display and other than that we also need the text that should be dis displayed on the detail screen so we can display both these options text and image in here we can then paste our row we can change this to a column since on the detail screen we of course want to display the items on top of each other here we can say fill Max size and we remove the clickable modifier since we don't need that here but we can say we um Center the text so we say horizontal alignment is Center horizontally this spacer here needs to be switched to a height spacer to get this spacing in between image and text and now we are actually ready to implement the shared transition because we have both our screens both screens share a specific element that's of course necessary if we want to have a shared element transition so let's dive into our main activity and see how this works because here we now need a nav host so something that allows us to navigate from the list screen to the detail screen and that should also allow us to actually make a transition between these two so we have a nav Host this requires a nav control which you can create here with remember nav controller we can pass it down here we need to define a start destination as a very first screen that is going to be displayed here so we say start destination give this a name of list so we start off on our list screen and in this block we can now Define our two screens we have with such composable blocks on the one hand again our list screen where we say we have our list screen here um where we Define our call back Lambda so on item click here we get reference to the RAS ID and the text we clicked on and we can perform the transition with our nav controller just like a normal navigation transition at this point we say nav controller navigate and we navigate to our detail route slash and we pass these arguments on the one hand the RAS ID another slash and our text then we can also do the same for our detail screen so composable have a route of detail here we also need to specify the format our arguments are in so we first have a Ras ID with these curly braces and then as a second argument again curly braces we have our text we then Define what types these arguments actually are so we say arguments is a list of nav argument this one is for the RAS ID and we need to specify a type here in these curly braces that in this case is nav type. intype because our drawable resource ID is an integer and as a second nav argument we can pass here we Define our text property in this case that's of course a string so we adjust this and we open our block here of this composable to Define what a detailed screen looks like in this case so we just say we use our detail screen composable pass in Ras ID well what is that we first have to retrieve it can get this from our nav backstack entry which we have a reference to here so when we navigate to our composable to our detailed screen we get kind of a bundle that includes the um corresponding nav arguments we've passed here we had to pass and we can then retrieve these on the one hand with Ras ID it arguments dot actually question mark. get int so we first of all want to get our Ras ID if that's null which can happen here because it's a mandatory argument we just assign zero to it and the text is it arguments get string in this case give it the key of text and again if that's n which can happen we use an empty string we can then pass this here Ras ID and text and this should already allow us to do a basic navigation without shared element transition yet so there we go if we now click on an item then we get to the detail screen and if we navigate back then we get back without transition yet just a normal fate animation here but we want a shared element transition so let's take a look at how that works for that we can or we have to take those screens or those composes that are are affected by the shared element transition so in this case our list screen and our detail screen we have to take those and put them in such a sheared element um shared transition scope this one here so this is a new composable that is introduced it is experimental so we have to opt into this API so I'll enter on this name opt into this and then the eror is gun and then we can take our two um for our reference to the nav controller and the nav host move them in Here and Now inside this shared transition scope we get reference to this Shar transition scope which gives us access to a special modifier that allows us to perform the transition and to Define how the transition actually should look like in the first place so if we are inside here we have access to modifier shared element but if we are outside the scope we don't have access to that anymore so here we don't have a shared element modifier and now what we need to do is we pretty much need to add such a modifier to every single shared element that we want to include in our animation and Define how that should work and in order to do that we actually need to add this modifier on the one hand to our image here because we want to transition the image and on this text because we also want to transition this text all you will notice that if we put our shared element modify here it won't recognize that because it doesn't know that this compos is placed within this shared transition scope so what we can do is we can make sure that we can only call this list screen inside of a shared transition scope by saying shared transition scope. list screen we can out enter again to opt into this API and then scroll down and you will notice that we will have access to this shared element modifier now in here we first need to define a state which includes a key so that lets the compos framework know which element should actually be transitioned to which we can get this with remember shared content State and the key just must be unique on um both screens so we have image one for example and then the framework knows that the image needs to be transitioned to the image one on the second screen so we can say for the image that could be image/ Ras ID so that's a unique key per image we then need to pass an animated visibility scope that's actually not our transition scope so this that list screen will not work because the animated visibility scope is something else we get from we get from our nav host actually so you can see within such a composable block we have an animated content scope and that is what we need to pass so that is actually something we need to pass as an argument now since we can only extend one scope but we can say okay we have an animated visibility scope pass this down here and then also pass it here animated visibility scope and lastly if we want to change the animation itself we can change this bound transform which is really just a a Lambda function that gives us access to the initial bounds and the target bounds and then let's us Define what kind of Animation want to have in this case maybe a tween we say okay the duration Millies are maybe 1 second and you could also um set a delay here which wouldn't make sense for for a screen transition or adjust the easing so how fast the animation plays at which specific point since we don't need these bounds which by the way just rectangles so how small the image is at first and how large it will be but in this case we can just replace this with underscores to ignore them and that's in the end what we now need to do for the rest of our composes that involved the shared element transition so we copy this modifier applied for our text as well on our list screen here we replace the key with Text slash and we add our unique text property to just uniquely identify a specific text on our list and the rest can stay as it is and the same we now need to do on the detail screen as well so here we want to pass an animated visibility scope we want to extend the shared transition scope I'll enter in that here and then for our image we paste the element modifier this is correct so the key now needs to be the same as the key is on the detail screen right here and the same for our text paste this here replace this with text and this with text as well and now this should actually do it so in our main activity we of course need to pass this animated visibility scope which is really just this yeah just this hm and down here as well for the detail screen so animated visibility scope is this and I think that should be it we can launch our app take a look here there we go ah it crashed apparently let's take a look here in lock cat we get a crash and the reason is that's a very long crash message l in the property look ahead route has not been initialized I am not sure if I did something wrong or if this is a bug in the compos framework because I am not using any latet property here all right I found it I actually made a mistake here in the sheared transition scope there should not be a scope but a layout so sheared transition layout will also give us the scope little difference quite AO but let's try this again there we go now our app is at least launching and if we now click on an item we see our sheared element transition very cool looks a bit weird here because we uh kept the weights but you you get the idea this one works as well it's of course still experimental so if you might encounter a bu here and there or some laggy transitions I don't know I wouldn't be surprised about that at this point but everything that is Alpha at some point will become stable at some point as well so I'm very confident that we will soon have a very cool shared element transition framework on Jetpack comp post all right thanks for watching again last reminder to get my courses for 25% off this is really the last call the prices will rise in a few hours and then also definitely stay up there for a while Link in this video description other than that thanks for watching have an amazing rest of your week see you back in the next video bye-bye

Channel: Philipp Lackner

Views: 11,878

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile

Id: mE5bLb42_Os

Length: 16min 55sec (1015 seconds)

Published: Sun May 05 2024