Fragments with Jetpack Compose (Interoperability)

in this video i'm going to show you how to use fragments using jetpack compose and the feature that i'm going to be kind of highlighting in this video is interoperability so what is interoperability means well it essentially means how easy is it for like generally speaking anyway how easy it for is it for like new technologies to integrate with old technologies or for new apis to integrate with old apis so you can imagine probably already what i'm going to be talking about is how jetpack compose can integrate into you know old projects or not even necessarily old projects just pre-existing projects so how easily can you like slowly integrate jetpack compose into an existing codebase so as you can already probably imagine interoperability is very very important because if you just think about the logistics of adopting a new technology into an existing code base if it's not easy to do no one's gonna do it no one's gonna decide to you know swap out an entire code base if that's what it takes to use a new technology the way to do it is sort of piece by piece if you can slowly like iteratively integrate a new technology over time into an existing code base that is typically you know the more realistic approach piece by piece uh in in the context of android development you know fragment by fragment view by view if you can do it that way it's much more realistic that people are going to adopt that new technology so i think jetpack compose has done a wonderful job at producing good interoperability and we're going to be going through some examples in this video so let's get started so we're going to be continuing from the previous video when we looked at kind of rows and columns i'm going to put a link up in the top here to go watch that video if you haven't watched that but i'm going to show you everything you need to in this video anyway so let's start with a simple example so so far we've we've had this kind of set content example where we can put you know composables inside of here and then we can inflate those composables but now how do we use fragments because you know uh probably a lot of you like the single activity architecture which is what i like to use so use lots of fragments so how do we use fragments well let's create a new fragment so let's go over to the main package directory go to new new kotlin file and let's call this recipe list fragment since this is going to be a recipe application eventually when we get to actually building that functionality out so make sure you get the android x fragment import and there's our new fragment our new recipe list fragment so now let's create a layout for this and if you have some experience with compose you know that you don't really need a layout but i just want to show you a bunch of different examples so don't get ahead of yourself just take it piece by piece as i kind of teach this to you so go into layout go into new layout file create a new layout file named fragment underscore recipe underscore list and inside of here let's go to the code tab and we're going to add something inside of our constraint layout let's just add you know a text view let's say you know text view and do wrap content wrap content give some spacing here add some constraints let's constrain it to the top of the parent we'll constrain it to the start of the parent so parents and let's constrain it to the end of the parent and then let's add some text to this so i'll just say text and say hey this is some text or we can just do the title of the fragment actually that's probably a better idea so just say recipe list that way we know this is that recipe list fragment give it some text size of you know 21 sp so it looks quite large so now let's go into our fragment go into recipe list fragment and again if you have some experience with compose i know this isn't like the optimal way to do things so just settle down if you're getting excited i'm going to be going through some examples i am going to get to the optimal way so don't worry now press control o and get to oncreate view and get the oncreate view function uh now we want to you can actually i'll give you some space here so you can see a little better delete this return and the super and create a new view so do view equals inflator dot inflate specify the resource or rr.layout.fragment recipe list then do comma container and false and then just return that view so this is the classic way to inflate a fragment you know obviously i could have condensed this into one line or if you are familiar with kind of the newest kind of stuff with fragments these days technically you don't even need the oncreateview function so i could comment that out and i could just pass the layout as a constructor argument to the fragment up here and that would also work but for the sake of the examples that i'm going to show you in this video just humor me and let's add the on create view function and i promise you you're you're going to see why in a few minutes here so there's our first kind of fragment now let's go into activity main and let's add a container for this fragment so we're going to use the fragment container view class which is the new kind of i guess fragment or new kind of frame layout i guess is a better way to put it give it an id of main container so main underscore container and there's our fragment container view now we need to go into act into main activity and let's actually bring this fragment into view so just do get support fragment manager begin transaction replace r dot id dot main container then just instantiate the fragment that we want to bring into view so that's going to be recipe list fragment and then do dot commit oh i did actually forget one thing we do need to call set content view in the activity so set content view and then r dot layout layout dot activity main all right now let's rerun that and see if we get our fragment coming into view boom there we go there's our recipe list fragment coming into view okay so now how can we use jetpack compose with our fragment well the first way which is the easiest way which is with the way i'm going to be doing it throughout the course is we don't even need to use a layout we do not need to reference any sort of a layout file for this fragment we can simply you know go view and i'm going to write this out the long way first and then i'm going to condense it down i can say compose view which is a special kind of compose class i can say require context which is one way to get the context inside of a fragment and then i can just do you know view dot apply and set some kind of uh some composables so i can do set content set content just like we did in the activity and say you know here's some text i will get the compose import for the text and i'll say hey look a composable and then i just want to return that view so again i wrote this out sort of the long way and i'm going to condense this down after we run it so let's just run this and make sure that we do get a composable coming into view in our fragment so there's the app running and there is our composable saying hey look a composable so this is the simplest simplest possible implementation of how to use compose inside of a fragment and like i said i'm going to kind of condense this down so really all you need to do is do return compose view require context and then do dot apply and then we can do set content set content and say you know hey here's our composable or whatever in this case i'll say you know recipe list fragment and that is kind of the shortest way possible to write this and this is not nullable i can actually delete that question mark so this is awesome this is super simple basically this just showcases you know how great the interoperability of or one of the reasons why the interoperability is so great with jetpack compose so that's all great but what if you have some kind of like a custom view that isn't supported by compose yet like say you built some you know special view that extends image view or extends text view or whatever or even if you take a look at the android documentations in the jetpack compose section the example that they give is a map view so if you're using like the google maps sdk what if you want to show a map view in a composable now those particular kind of custom views aren't currently supported by compose so in that case what do you do are you stuck like what can you do turns out there is something you can do and again this kind of showcases the the great job they did with interoperability of jetpack compose so let's look at an example of how you would integrate kind of a custom view map view whatever into a composable so if you know me you know that i like to use realistic examples whenever possible so i'm going to put a link down below to this repository this is actually my old local database caching with a rest api course in this course i built this this horizontal dotted progress bar kind of custom view so find this i'm going to put a link down below again and copy all of this so copy the entire java class yes it's that old it was actually built with java not even kotlin copy the entire thing go into mvvm recipe app and let's create a new java class called horizontal progress bar you could create a kotlin file android studio would just convert it anyway oh what is all this it's been so i'm just going to create a kotlin file forget java let's go new kotlin class do horizontal horror is until progress bar and just paste in the code and android studio should convert all of that dirty old java into kotlin and i'm not getting any warnings and no errors so it looks pretty good so i'll close this uh i'll leave it open i guess sure so now what what do we want to do what could we do if we wanted to use this horizontal progress bar into our recipe list fragment but we don't we don't have a layout so how do i how do i bring this into our composable and you know this is uh you can imagine too that this is like a map view if this was a map view you'd be doing exactly the same kind of process so let's go into uh fragment recipe list and i'm going to give myself some more room here to give you guys a better view and let's create a new kind of or add a new sort of widget into this xml this is going to be a compose view so compose ui platform compose view width will be let's do wrap content wrap content close this off let's add some constraints to this so add constraint top to the parents we'll do constraint end to the parent constraint start to the parent and then do i need a constraint bottom yeah let's add a constraint bottom constraint constraint bottom also to that parent and we do need to give this an id since we're going to be referencing it inside of our fragments so i'll just call this compose underscore view now let's go back to recipe list fragment first i'm going to minimize this and we're going to change this back to that kind of old and dirty way because we do need to make use of the xml layout but we've kind of inserted a composable into it or inserted composable capability inside of the layout so inflate r.layout.fragment recipe list container and false and then we want to return the view but now we want to add a composable to this view so we want to do view find view by id this will be that compose view widget that we just added that compose view xml thing that we added to our layout r.id dot compose view to set content and now boom we have the ability to add a composable inside of our xml layout so we expect to see kind of the whoops i went to the wrong file we expect to see this kind of recipe list title that was still there and then down below it we're going to have a a composable so now what do we want to put inside of this composable well let's add a column first of all just to make it you know organized and make it into something more realistic you're always going to have a column or a row do modifier equals modifier dots i'm going to add a border so it makes it really clear kind of where the composable starts and where the composable ends so you can very clearly kind of see do color dot black so there we have our border and let's also add i'll also add some padding so go to the next line do padding 16 dp again just so you can really clearly see kind of where the composable starts and where it ends so now let's add some other kind of random stuff in here let's add some text saying this is a composable all capitals uh inside the fragments inside the fragment and then i'll do a spacer spacer and get that import do modifier equals modifier whoops modifier dot padding just do 10 dp of padding and then next maybe do let's do a circular progress indicator just for fun just to see what that looks like so this would be like a circular spinning progress bar just like kind of the standard android progress bar typically looks let's add another spacer i'll add some more text just for fun that says you know neat and then you know one more spacer and then now let's add that that custom horizontal progress bar that we were trying to add so again if you had a map view if you were using like the google maps sdk if you were using anything that compose did not support you could just do this so value i can do like custom view set it equal to the horizontal dotted progress bar the only argument that it requires is the context i can get the context by going context ambient dot current so there's our horizontal dotted progress bar and now to add this to our our compose view i need to call android view which takes a single required argument it takes a couple arguments but only one that's actually required and this is the view that that it's going to inflate so it takes a function so i'm just instantiating a new function here and then saying custom view so now our horizontal progress bar will be added along with all these kind of other composables inside of our compose view alright so let's run it and take a look and see if it's working so there we go we have our recipe list text up at the top we have this is a composable inside of a fragment in all capitals we have that circular indeterminate progress bar that neat text and then down below that custom view that's actually just a kotlin file and it's being inflated as a composable so again i just want to reiterate that you could do this with any custom view again the interop ability is so good any old custom view that was built you can very easily integrate it using this compose view sort of mechanism you just add the compose view into the xml inflate it like i showed you and then boom you can leverage any sort of old views that you've built if this is the first video that you're watching of mine with jetpack and pose this video is actually part of a whole course i'm making an entire free course on youtube where i'm going to show you how to build a recipe application using jetpack and post so you're going to be able to search recipes from a real api that i built again free i put it online on the internet and learn how to build an apple jetpack and pose so make sure to subscribe down below leave a like if you didn't leave a like already and leave me some kind of engagement go down into the comments and say hey mitch here's your engagement hey mitch here's your compose engagement thanks for the compo compose videos whatever say something say hi say you enjoy the videos doesn't matter just say something and if you like the videos again make sure to leave a like down below if you want to be notified when new videos come out about jetpack compose or any of my other courses go to my website codingwithmitch.com register an account and you will get emails when i update the course with lectures thanks for watching and i will see you in the next one

Channel: CodingWithMitch

Views: 15,486

Rating: 4.9619498 out of 5

Keywords: jetpack compose, jetpack compose android, jetpack compose interoperability, jetpack compose fragment, jetpack compose fragments, how to use fragments with jetpack compose, jetpack compose google map, custom view jetpack compose, jetpack compose custom view, ComposeView, jetpack compose ComposeView

Id: kin0Om03yqE

Length: 15min 3sec (903 seconds)

Published: Mon Dec 07 2020