Android Binding Adapter - custom databinding tutorial in Kotlin

hello welcome back to my channel today our topic is Android custom data binding using binding adapters if you have seen some of my earlier videos you may have noticed I always try to use data binding in my projects and there are strong possibilities that you guys may love data binding as well data binding is pretty easy for simple cases but tricky to get when doing something slightly more complex so you might have seen data binding of text data on textview or any other Android fields you may also have seen binding a function on a button these are very common scenarios and this kind of operations can be handled by default data binding options but for complex operations like data binding on image view or recycler view we do not have any default settings of data binding let us consider an image view imagine we have an image view and that image view shows images through a web URL using glite now if you want to use data binding on this image image view to change the image where I through Glide you simply have no default options to apply data binding in this particular case we have the choice of using Android binding adapters in this video I will cover the fundamentals of writing Android binding adapters and by the end of the video you will see writing basic binding editors encoding is quite straightforward as as long as you follow some guidelines I will also cover default data binding at first as a refresher in case if you do not know what data binding is and later I will show how to use binding adapters to create custom data bindings in Android another thing I will use Android view model and Lite data in this tutorial although a view like that are not mandatory to use binding adapters but I want to provide you an essence of real-life project so I am including them here all right enough talk let's start coding [Music] in Android studio we will create a new project and select the entity VT and giving a name binding adapter and will quickly add some dependencies so go we'll go to our builder Gradle file and here we will create a dependency named quad link apt so we added here name K DT and as we were using data binding we will add another two data binding related dependency and another thing as you are going to use a few module and light data as I have described earlier so we need a dependency for that also and I will simply copy and paste it here I will give the related dip all the dependencies in the video description you will you can easily get it from there and last we will sync our project then we will add some layout in our layout fonts and it is the layout is very simple go to our main activity XML and here I simply copy bits to fear and to views one stage view and another is image view I want I do not want to make this video unnecessary lengths so I simply copy test it simple as a text view and another is image view you can see it from here so I see it from yeah so let's make it a little bigger ok you can see there is a user name yet as it takes view and this is an image book very simple and we will also add a resource file for the source file for the or is this first image for this image for going to the fire we go into the trouble right click here a new vector asset and we will search a flipper okay name it contact maybe this thing and rename it as user image and add it to our image view as source so source equals drawable user Innes okay that's it you'll also create a class to hold the user data for light user name and user image so we'll create a class also going to a Java and you know package name okay let me make it a little bigger and yeah create new core clean class and name of the class will be user info and this will be a data class so we make it a date class user info and we give our constructor parameters and it will be were so sorry it will be for name which will be streamed and [Music] user emails URI which will be also an extreme okay so this is our class to hold data of the user [Music] now let's create a few module for our this activity actually the view model will holds all the UI related data for this activity okay so we go to this here and right click and create new Courtley in class and it will be mean view model class and this our this class will extend you model class so view model let's create a light data like data variable to hold our user info object here so to be Val user info and or we say user and which will be mutable live data for me to mutable live data and it will type will be the our user info ok this type so to be user info and we create a unit class init block so it will in it and inside the unit actually we are doing manual things here we are not doing any Titanic related tickles I am keeping these very simple create an object so would be a user dot value and the value will be we create an just object of this and especially at this type at this class so if we user info give any name any name you before and any energy worry I'm taking a random energy body so just to make sure that your energy what I returned and in it okay so just make sure that so this is the image and going okay I we have created our few model so we need to initiate our view module our binder or actually create relation of view model from our activity so going to our activity here and create a variable view model and the few model will be view model provider and we said the pump we said the reference yet so this so this class don't get our need to mention the name of our view model class okay so main view model class dot java all right we have create our view model now let's create some data binding in our XML layout so we're going to our main activity activity under Sony in XML and here the constant load a is our parent layout so we go to the pant layout right click click here and on the constraint out and press alter enter and we get a convert to data binding layout we simply click it and we got the layout we got the view data binding okay now going back to our main activity and here we need to say we need to do a couple of things right create a variable so lady need for it will be binding and type will be the same activity main binding the name of this layout so activity main binding okay and then binding equals that activity main binding dot inflate and it will be layout inflator ventilator and finally inside and say the set content view we just call strike binding dot root now we will go back to our activity mean and here we see a data block and here we created variable so it will be variable and we give the name of the variable is main view model and we need to specify which where that variable is referred to so we refer the variable will refer that be able to few model so we did the entire part of this view model okay so it will be main view model and that's it so time to actually refer this to from our main activity so going back to our main activity and here we write binding dot main view model so this binding and main view model is this view model and we refer it to with a few models so we finish we ascend it as a few model okay so now if you want to use the feature of light data we need to define the lifecycle owner so here the lifecycle owner is the main activity so it will be binding dot lifecycle owner and it will be this okay now going back to our activity under screaming dot XML and we go to our text view here and inside the text view we can see that user name here so this is a manual text and what we want to do we want to get a value from from our the user info object which is initiate in our view main view model okay so this is very easy you probably most of you know that so it will be rid of stuff it will be this will use this variable so text view it of main view motive talk to user [Music] dot name we will first we will only use the default data binding to show the name we not you know we're not going to change anything in our image view I will show how to use binding adapters for image view later on this tutorial so for now we are just using the default settings and we are you changing the text view using the data binding okay so we run our app so from our emulator we can see the name is Tony Ferguson which is comes from the view model here and image default image is not changed which I have already told that we are not using any data binding right now but we have seen the default data binding settings for text view we can easily get the feature of data binding here okay now the our next task will be using the binding adapters create a binding adapter function which we will use to use as a data binding determining keyword or data binding object to change the image rule from the user info object inside our main view model we have seen that they said this is the this is the image URL which comes from a web and for this handling this kind of scenario we have a library named Clyde Clyde what actually tried to glide actually take the image overlay and fill it into our image view so to you we want to use the Clyde in our project but to use the Glide we need to add some deputies here so I just dependencies just copy here and paste it inside our build it credible and sync our project by the way if you don't know what is view model or light data I have a tutorial for this here you go to my channel and you can see the tutorials on a few module and light data and if you see this video you will get some idea what is like data and view model whatever we go to our go back to our project and our dependencies has been added going back to our activity me and here we have seen how how we how easily we have added takes view data binding here which is a default data binding but we now we want to add data binding on image view and that image view is loading image from the way using the Glide but here unfortunately we do not have any Casper any default data binding for this kind of scenario and to overcome this overcome this problem we need to we will add custom data bindings and we will use binding adapter okay so we go to our this package and create a new file a name of the file is what are the custom bindings okay custom bindings and here we will create a function so it will be function and you know the function may be binding image okay binding image and our function will take two parameters the first parameter is the view and the view is here the image view itself so it will be user image use image view okay that will be image view and another thing is the path or the way view right so for this we will get another so another variable of the image URI and which would be type of stream okay and we will add the binding adapter annotation here so binding adapter annotation here and we'll give it a name and it will be load image so what this means this means we are creating a binding adapter which name is the load image and when we use this loading its name in our in our this view a automatic function will be called from this the binding image function will be automatically called we do not need to do anything this is the beauty of binding adapter okay so we need to use the glider so glide the tweet and oh the glide is alternative and here the context will be our user image view so user image view dot context and the load it will be load loaded inside our this image view sorry it'll load that load will be the excuse me the load will be the image evil eye so it will be image URI and finally it will be into our this image view okay and going back to our main activity and we will use the same name here loading assessed copied and here we use app dot load image we had our Android system already know what was binding adapter we are using so load image and this will be and for this when we use this this binding editor it will automatically call this function so in this function there are two parameters the first parameter is the view itself this is the image view and the second parameter is in its URI and we will only pass this energy wearing and what from what we get in the image URI this is very simple we already have done this inside our text view so we are doing the same thing here only difference is we are using this time we are using the image Avari ok so it will be main view model dot user dot dot I forgot the name so user user in easy body okay these are being a safari so we make two here so dot user image URI and we our function I ran over posit and you know our emulator who we see the image has been loaded using our binding adapter which is very very simple and I think it you have understand how easy it is how easy we just created a function we just created a function and I donate the function with the binding adapter and give it a give it a string value name and when we use this value use this string we simply call this function and everything happens magically in my real-life project I use binding adapter very frequently especially for image view and most of the cases for recycle of view because data by using data binding for recyclerview is quite tricky but when you use a data binding adapter it becomes so easy and I love it very much and mmm ok this is the end of the tutorial and hopefully you have learned a lot about data binding by determining using binding adapter and I hope you you can use binding adapter in your future projects easily if you liked the video please smash the like button and you can say me any question you know in the comment box also and please subscribe if you not subscribe yet have a good night thank you

Channel: Munir Hoque

Views: 5,772

Rating: 4.7623763 out of 5

Keywords: binding adapter android kotlin, android livedata databinding, binding adapter example, android binding adapter tutorial, binding adapter kotlin, binding adapter android, android binding adapter example, binding adapter example android, binding adapter kotlin example, Android Binding Adapter, android databinding, Binding Adapter, Data Binding Adapter, Inverse Binding Adapter, data binding android, how to use data binding android, android binding adapter

Id: I5UCCBOwGG8

Length: 24min 34sec (1474 seconds)

Published: Wed Apr 29 2020