Build A Simple Android App With Kotlin

[Music] hey guys and welcome to my android crash course here on brad's channel you will need to know kotlin for this crash course which i also made a crash course about on brad's channel so i'm sure he will just link that in this video's description you really should make sure to understand these kotlin basics before you jump into this android development crash course because i can just explain all the kotlin language features in addition to the android framework so what we'll build here essentially is this to-do list app here so we can add to do items here for example bring out the trash then we click on add to do it will be added to our to-do's list we could add another item feed the cat click on add to do and it will also be added and then we can just check those and uncheck those and if we have some checked and then we can click on delete done and it will just delete all the check to do's from our list and here it's important to note that this crash course is really for people who have never worked with android before and just know kotlin basics so i won't implement a real database here that we save these to do items in a database that would be too much for crash course so that means when we reopen the app then the the list will be empty again but if you're interested in learning these more advanced topics in android then just make sure to check out my channel i have a bunch of android tutorials using kotlin especially i focus a lot on project based playlists so i have a running tracker app a music player app and a news app and much more stuff you can learn on my channel so just give it a shot and take a look so first of all i want to talk a little bit about why we use cotton here for android development because nowadays you have so many options to make android apps with and especially right now it's very trending to use options like flutter react native all that cross platform stuff so with flutter react native you just make one app and you can also use that on ios that is not the case if you do that with kotlin but still i don't recommend using any of these cross-platform frameworks at least to start with these i always recommend to start with the native android platform and that is using kotlin because especially if it comes to more complex apps there is no real way around making native apps using kotlin well actually android is based on java and kotlin is based on java as well so that's why we can actually use kotlin for android development you can also use java but that is also not really recommended because google which is the owner of android just pushes cotton really really hard for android development and java is just pretty much dying out right now so it's not only that you can do pretty much everything easier with kotlin than with java it's also that kotlin keeps getting more and more features that java doesn't have and those are really essential features that will completely change the way how we will make android apps so that's just my recommendation if you ask other people they will tell you other stuff maybe but i always say learn the real android development first so that means get to know the real android framework the native android framework and if you just want to try around a little bit then using java is fine but if you seriously want to learn how to make android apps nowadays then there is really no way around kotlin okay so what we need to do first to start with android development is we need to install a software called android studio if you watched my kotlin crash course which i hope you did then we you know that we used intellij there which is also software by jetbrains so the style of the software of android studio will be very similar to intellij what we use there but for android development we we could theoretically also use intellij but this android studio software we will use here is just much more optimized for android development we can directly build layouts in it we can have an emulator in which we can test our apps it just comes with all those features by default and makes android development much easier and to download android studio we just want to go to google and type in android studio download press enter and we just want to visit the first link here developer.android.com studio click on that and once the page is loaded we can click on this big green button here we need to accept the license agreement check this box and click on download android studio here and then we can simply click on save down here and then this will take a little moment and i'll see you afterwards okay once this is done we just want to run this file click on run and wait a little moment until the installer opens so we need to accept something here press yes and wait a little moment and there we go so that setup is very easy and especially compared to intellij that is easier because we don't need to install the jdk on our own so that is the java development kit that just comes with all those java and kotlin language features because android studio already comes with that and installs it for us so we can click on next here we want to install android studio and android virtual device so that is just the android emulator because of course we are inside of a windows environment here or mac or whatever you use we cannot simply test our apps there so what we will do is we will install kind of a virtual machine that just emulates the android behavior and we will also install that otherwise we can't test our app if you don't have an android phone and we click on next then you can choose a path to install that into i'll click next and install and then i'll see you afterwards okay and once this installation is finished we can simply click on next and we want to start android studio so by clicking on finish then we wait until it launches we need to open that here and if we would have a previous installation of android studio we could import our old settings here we don't have that so we click on do not import settings and okay and then this setup wizard here will open up we can simply click on next here we want to choose the standard installation for android studio click on next again of course we will choose the dark theme here we click on next and now android studio will just download a bunch of files here that are needed for running android apps also the android emulator the sd sdk tools here and we simply click on finish here and android studio will do that for us okay once this is finished it will give you a little summary here and for me i get an error here because i run this on a virtual machine here on a windows virtual machine and it just can't install this android emulator which is also a virtual machine inside of a virtual machine so this shouldn't happen for you if you install this on your real pc um i will just switch to my real pc after i showed you this installation so we just click on finish here and now we see this pop-up window and we can just start a new android studio project here so let's click on that then we can select a project template we will choose empty activity here what an activity is i will actually explain when we go through the single android components here so let's first click next and we can give our application a name i will just call this to-do list you can give it a package name i'll just leave it as it is here you could choose your name here instead of example and then we want to make sure that the language is kotlin which is just the default language here but you can see we could also choose java and the minimum sdk is basically the minimum supported android version we want to set that to api 21. that is always a little trade-off here if you increase that api that minimum api version um because the newer apa versions of course have more modern functions and just newer language features and the older versions of course then you just support more devices but almost all devices nowadays run on at least api level 21 so android lollipop here and then we can simply click on finish and android studio will create that project for us so there we go you get a little summary of what's new in the newest android studio version we can just minimize that and at the first glance this looks very similar to what we had in intellij okay so i now switch back to my real machine out of the virtual machine but that shouldn't make anything different for you i first want to go through the project hierarchy here a little bit so you can see we have a project hierarchy here on the left we can open this app folder maybe for you it's to-do list it doesn't really matter how that is called and here we have a bunch of files that android studio automatically generated for us which it always does when we create a new project so you can already see it opened this main activity file here and if you watch the cotton crash course you can at least recognize that this is kotlin code here so what is actually an activity in android an activity is in the end just a single screen in our app so in our app that in our to-do app here we will just have the single activity which represents the to-do list screen in which we will just have different views so a single view is just kind of a visible element inside of an activity or on our screen for example a button a text view so just a text label our list of to do items and all that stuff that is called a viewing android and such an activity is just a single screen in our app that contains several views and with such an activity we usually have two components that belong to this activity on the one hand that is this kotlin file you can see that it's just a class in kotlin that inherits from app compat activity and that just gives it the behavior of a real activity and an activity always has a life cycle so you can also see it came with this oncreate function which is just the function that is called once this activity is created so in android we don't have this main function as we had it in intellij with kotlin it will also have that main function deep down in the android framework but we don't see it here instead we will put the code that should immediately be executed once our app starts inside of this oncreate function here and this oncreate function is basically just one function out of the so-called activity life cycle which i won't go into here but for example there's also an on destroy function when that activity is destroyed and many more of these lifecycle functions so we can just react to specific states of our activity so that kotlin file here is one component of an activity and usually when we have an activity we also somehow need to set the design of that activity so if you have a web developer background which i guess many of you do if you are familiar with brad's channel then as a web developer you usually design with css and in android that is a little bit different so in android we have xml files you can see it already opened this activity main xml file and inside of this oncreate function we set the content view to exactly this layout file and if we switch to this activity main xml file you can see this is android studio's layout editor which just contains a single text view here so just a text label basically that just belongs to this main activity here so if we would launch our app now then just this white screen here with this hello world text view would open up so that is everything our app does for now okay so that's it for the activities in android but we have some more files that are important for our app here if we take a look at our project hierarchy we have this manifests folder if we double click on that then that is also an xml file and in the android manifest we actually just declare some application settings kind of so you can see we have the launcher icon so actually this one the icon our app launches with so the single app icon we have the name of the app we have the theme we want to set to the app we have our activity declared here in this manifest and if we would need that we could also declare permissions here for specific functionality that our app needs so for example if we would need internet access then we would need to declare a permission in this manifest that our app needs this internet functionality so then well this java folder we already covered that that is just the folder that contains our actual carton files so don't be confused that this is called java this will contain kotlin files here in our app and then you have three com folders those are not important for us they are related to testing which is a very advanced topic but the first folder here is actually the folder that contains our main activity kotlin file and then we have this raz folder which stands for resources and we just put all kinds of resources in here so we have a drawable folder which contains image resources we have a layout folder which contains our layout files so for activities for example but we will also have another kind of layer file which i will get to in this video we'll have a mid-map folder which contains these launcher icons we don't often need that and we have a values folder here which contains also xml files so colors xml for example in which we just declare the the theme colors for our app so you can see we have a color primary color primary dark and we can just reference these colors in our app so we don't always need to remember this color code here then we have a strings xml file in which we can just declare application write string constants and we have a styles xml file in which we can kind of create a styling for our app which i also won't do in this tutorial here because that requires much more knowledge about starting an android but one more file that is actually important for us is in this gradle scripts folder here so gradle is the build engine of android so that means gradle has the job to just take all these files all the activities manifest xml layout files and just put them together to an executable app and that is of course pretty important here you can see we have a bunch of files here most of those are not important for our needs here but this build.gradle module colon app file that is important we need to open that that just contains some application config here for example the minimum sdk version we chose when we created that project but if we scroll down you can see we have dependencies here and those are actually links to third-party libraries that we want to include in our project and because this specific view we use for this to-do list here is not included by default in the android framework we need to add such a dependency for that and i will actually just paste this here which is very similar to just a link so with this android studio can just get the information about that view and included in our project and i'm sure that brad will just include this link here in this video's description but you will also find the source code to this project in this video's description from my github repository and once we added something into this build.gradle file we see this blue bar here on the top and we need to click on sync now so that android studio will just sync this new dependency with our project and include these resources for us and once the synchronization is finished we can actually start to build the layout of our app and we will do this in our activity main xm file because as i said this is the layout file the styling file that will display in combination with our actual main activity so the screen that will show up when we launch our app and as i already said this type of styling is differs much from css so we will have such a constraint layout here as you can see in android we always deal with these layouts that just help us to make this layout basically responsive for all kinds of screen sizes and you can see it right now contains the single text view which we actually don't need here we don't want to have that so we simply select that and press delete to remove it and now we actually have these items these different views here so each item of that is a single view and we can simply drag and drop them into our layout to include them and what i want to start with is with this recyclerview so that is actually why we included that dependency in our build.gradle file now we can use this recyclerview here and that receptor view is just a list of items in our app and why is this actually called recyclerview and not list view for example which would be more self-explanatory well android also has a list view but that is definitely not recommended to be used this is called recyclerview here and because well it has a recycling behavior that means when we scroll in that list that it will only load the items that are currently visible to the user and some that are basically closed to be visible but if we have a list of a thousand items then we don't always have to load the whole list to display in our app and that just makes this recycler view much more performant than this old list view which always kept the whole list in memory and to use that in our screen here we can simply drag and drop that into our field here and you can see right now it fills the whole screen here and we could also have these attributes here down on the right hand here i mean if we open that then you can see we have a bunch of options we can choose from to change how this looks like that recycler view but what i actually want to do is i want to click on this split up here so that will also show the xml the xml code basically for this layout and i just prefer to look at that and to make changes in this xml code because it's much clearer actually what it does so we can actually increase the width of that a little bit here so now we see our layout on the one hand and on the other hand we see the xml code that is behind that layout and right now you can see this layout is based on a constraint layout or this screen is based on a constraint layout that has layout width and layout height attributes they are set to match parent which just means means the the width of this constraint layout just fills the whole width of our screen and the height as well and if we would set that layered width and layout height from our receptor view to match parent then this parent at this time refers to this constraint layout because that is the parent of this recycler view and we not only have match parent here we also have for example wrap content that will just make the resector view only as large as needed so you can see now it's not it doesn't fill the whole screen only it's only as high as it needs basically and actually those items are just um for the preview so if you would open our app right now this list wouldn't have these items that are just to display something here in the layout editor but what this constraint layout actually helps us with is to align these items and make our whole layout responsive so if we click in our layout editor on this recycler view then you can see it has these four bubbles so one bubble at each side and we can take these bubbles here and drag them for example to the bottom and then you can see our recyclerview will be dragged to the bottom and we now set such a constraint here in our xml file and the same happens if we take this bubble now this top bubble and drag it to the top side now our recyclerview will be centered in our layout because each bubble drags to its own size and equally strong so that means our recyclerview will be centered vertically and these lines here are so called constraints and that is why this layer is called constraint layout and what is also important to know is that each view inside of our layout needs at least one vertical constraint so either this top bubble or this bottom bottle bubble and at least one horizontal constraint so right now we didn't set these two horizontal constraints we also just want to drag these to the left side and to the right side to also center it horizontally but this won't really be visible here because our recycler view fills the whole width of our layout and actually we don't want this receptor view to be centered because we want the list to start at the top so what we can do is we can remove this um this bottom bubble actually so that the receptor view is not dragged to the bottom and we can do that by holding down control and clicking on this bottom bubble and you can see then our recycler view moves to the top and that is now still fine because we have that top bubble so we at least need one bubble for vertical and one bubble for horizontal but we can also have two and now we also want to use that recycler view from within our kotlin code and for that we somehow need to specify which view we actually want to do something with and for that we give our views so-called ids so just unique identifiers that we can then use in our kotlin code to just change properties of those views and we can do that by simply writing id here in this xml tag and android studio will automatically suggest that here we just need to press enter then we want to add a new id so we use this add plus id slash press enter again and after the slash we specify the id we want to give this view and my personal convention here is to just start this id with a type of view so recyclerview i will start this with rv for recyclerview followed by whatever kind of receptor view that is in our case just to do items so are we to do items so when you use that id in your cotton code you immediately know okay that is a recycler view and that contains to-do items okay which other views we also need here in our layout well we also need a field to enter some text so if we want to enter if you want to enter a new to-do item then we need to enter that text somewhere and for that in android we use so-called edit texts so we open a new tag here and you can see it already suggests us here and added text we just press enter and it will automatically insert those two attributes for the width and the height because we always need those and for this edit text here we will set the width for now to wrap content so it's only as wide as needed so only as wide as the text indeed needs we will change that later though but for now we will leave it like that and we will also set the height to wrap content so it's as high as our text is and then we can close that tag off like this and then we can actually give this edit text an id as well so id press enter press enter again to add a new id here and we give this the name et to do title so again the convention et for edit text and it's an added text to edit to do item title and another useful attribute we can attach here to this edit text is a hint so we can basically display a text that is not really a text just a little um text that shows what this edit text is for but once we click on that this will disappear so i'm sure you know that if you're a web developer we can just right hint here press enter and give this a text here so enter to do title for example and you can see now our edit text is a little bit wider because it needs this space for this text we just entered and we still get an error here because we haven't set any constraints for this edit text and as i said we always need those so let's do that we want to have that in the bottom left corner so we use this bottom bubble of this edit text drag it down and we drag this left bubble to the left so we can simply click on that if it's directly aligned to the left side then we also need two buttons one to add a to-do item with the title we entered in this edit text and one to just delete all checked to-do items let's do that down here open a new tag right button press enter we give this the with wrap content and the height as well we give this an id of vtn at to do and we give this button a text so the text it should display of add to do and then we can close that tag off and then again we have to set the constraints of that button so we click on that we want to have that button right next to this edit text here so right on the right hand of that so on the one hand we want to have this bottom constrained on the parent bottom we drag it down here and then we actually don't want to set this left constraint to this left because in the end we want this edit text to be as wide as possible because we will add two buttons here one for adding introduce and one for deleting to do's and these buttons should only be as wide as needed and the rest of the space should actually be used for this to do edit text here so if we would do it like this if we would drag this button left constraint to the right constraint of our edit text then this would limit the size of our added text always to wrap content so we don't want that we want to delete this constraint and for now we leave it like that because to actually accomplish what i talked about we need to add this other button first to delete to do items so we can simply copy this button tag here and paste it below again then we can change the id of the second button to button delete done to use we give this the text delete done to do's and you can see now we have that additional button or let's actually give this just the text delete done because otherwise that would be a little wide and then we will set the the right constraint of this delete done button to the parent right the bottom to the parent bottom that's already set because we copied it and now we can choose our add to do button and constraint the right side of this to the left side of our delete done button so now it sticks to this delete done button always and you can see now we have this little gap here that we want to fill with this edit text and the thing is if we would just choose the right constraint of that and drag it to the button here then this will just center this edit text between this parent left and our button but we actually want this edit text to be as right as these constraints here are basically and for that we have a new property which is called 0dp so dp stands for density pixels that is kind of the the width and height unit you should choose in android because it refers to the current device's density so not each device has the same density if it comes to pixels so two devices might have the same physical width but one of those devices might have much more pixels in it and for that we use these density pixels to make that more relative to the devices with and with constraint layout we have that special behavior if we set the width or the height of a view to zero dp then it will just stretch the whole constraints so in our edit text example it will just be as wide as those constraints here are so if we go to this edit text in xml go to the width here and set this to 0dp you can now see that it is as wide as it fits into this gap basically and that is exactly what we want here so that also means if we would launch this on and on a device with a bigger screen then these two buttons here will only take as much space as needed so only as much as the text in the button needs and the rest of the space in this row kind of will be used by this edit text field here and we actually want the same behavior for our recyclerview because now it is set to wrap content in in height so it's only taking as much space as needed here but if this receptor view becomes very large then this will mean the height of the recycler view will only be will always be as high as as the items we have in it so this will basically grow to the bottom and we will not be able to scroll in this but we want the scrolling behavior so we will constrain this bottom constraint to any of these three top constraints here either of the edit text or one of the two buttons this doesn't matter then normally this just centers this receptor view between the parent top and one of those two are one of those three views here but we want to fill the whole height here so we will set this height of the resector view again to 0 dp and now this is exactly the height we want to have here and that's actually it for our main activity layout do we actually need another type of layout here in our app yes we do need that because we also need to specify such a layout file for each single item in our recyclerview so basically how these items look like and in the end we just want to have a text and a little checkbox for each to do item so we also need to define that and for that we go to this layout folder in this res folder right click and create a new layout resource file then this window will open up and we will give this the file name item to do and we press enter and then you can see a new layout file will open up in which we can also put our views in so i will again click on split here and we actually need only two views here which is on the one hand a text view so that is just a plain text that is displayed we will set the width to wrap content for now and the height as well we will give this text view an id of tv to do title we will give this a text of example here because we will change that text later anyways that is just for the later layer editor here so we can constrain that properly so on the one hand we will set the left constraint to the parent left and the top constraint to the parent top and now well where do we actually put this bottom constraint we will put this to our parent bottom here but we actually don't want our single items in our list in our recycler view to be as high as a whole screen here so we somehow need to limit the size and we can set this height here of this root layout to a fixed amount of dp units so for example 80 dp and then you can see now this looks much more like what we want here in our list now each item is only 80 dp high and we also want to have a check box here to just check that shoe item so new tag check box we give it the layout with wrap content in the layout height wrap content as well and we give it an id of cb done and then we can close that tag off we can take this check box constrain it to the right here the top to the top and the bottom to the bottom and then again we can take this text view constrain the right to the left of our checkbox here and now we don't want to center that instead we want to set the width here again to 0dp so that it fills the whole width of these constraints in horizontal then let's also change the text size a little bit of this text view so we go inside of this text view here and type text size and i will set this to let's say 24 sp this time you use sp you should always use that for font sizes because that also um considers the current user's font preference in addition to the density of the device and now what we also want to do is we want to apply a little gap or a little space here so it's not directly aligned to this left side and the checkbox as well and that is now very similar to web development we can just apply a little bit of padding or margin so let's go inside of this root layout here this constraint layout and specify padding start to apply padding to the left side and set that to adp for example and you will see the text view moves a little bit to the right side and we can also do that for padding and and also set that to adp and that's now it for our layout files now we can jump into our main activity or actually our kotlin files and write the logic to actually add to do items to remove them to check them and so on so what i will do is i will click on main activity kt here right click and click on close others so we just clear that up a little bit here and we only have that main activity open and now to get this recyclerview work we need to create a so-called recyclerview adapter that is basically a class in which we define the layout we want to use for those receptor view items so we just define that we want to use our item to do layout we created we need to define the list that we actually want that we that populates our recyclerview with data and we need to define the logic how we want to um populate it with data so which views of which items we want to set with which data but one step at a time first what we want to do is we want to create a class that just represents a single to do item so we go to our root package here so the package in which main activity is we right click create a new cotton follow class and we will call this just to do and select class here and this will not be a plain class instead it will be a data class a data class in kotlin is just a class whose primary purpose is to hold data so we won't write any logic in this class instead it will just have a single constructor here and contain two properties on the one hand that is a val for the title of that to do item which is a string and on the other hand that is a val that just determines if this to do item is currently checked or not so we specify val is checked and that is a boolean so either true or false and we will give this a default value by false because when we add a new to-do item that is of course not checked by default and with this studio class here we can now create this recyclerview adapter i talked about so that will also be a kotlin class let's go to this package again and create a new class called to do adapter and we select class here so that will basically be the class that contains the main logic of our app here we won't put too much logic into this main activity because our app basically consists of this list and the most logic will happen there and this to-do adapter class will now take an actual kotlin list of items with which we want to populate that list so in the constructor of this to do adapter class we will specify a list so that will be a private val and i think i didn't cover this private here in my kotlin crash course that just means that this variable we declare here can't be accessed by other classes it can only be accessed inside of this to do adapted class so private val to do's so that will be the list of to do items for our list and that will be a mutable list of so mutable list of type to do so of the class that we created here so we will just pass a bunch of to do items to this to do adapter and in this class here we define the logic how we want to set the data of our single views inside of our single items with with the help of this to do's list here the next step will be to create a so-called view holder a view holder is well it holds views it will basically hold the layout of a specific item and with this view holder this receptor view just accomplishes the behavior we want to have so this recycle behavior that only the necessary items are displayed and that is also a class that viewholder but that is just a one-line class and very simple we can put this class actually inside of this to do adapter class and we just specify class to do a viewholder here and that will take a reference to the view it should hold so that is in the end if we take a look in our item to do xml that is in the end this constraint layout so that will contain all those views inside of a specific item and we reference that with item view which is of type view in android so we need to import that so if you are on view you just need to press enter you can see it will add this import statement here automatically and this to do viewholder class will inherit from recyclerview also press enter here to import that dot holder and this one here and now we need to specify the constructor of that viewholder so you can see that needs this item view we actually passed here so we just pass itemview here and that's already it for this view hauler that is really not complicated and now with the help of this to do viewholder we now need to define that this class actually specifies or actually defines such a recyclerview adapter i talked about and we do that by letting this class inherit from recyclerview dot adapter and you can see we choose this adapter with this generic parameter here so we can choose a type for that adapter and here this needs the the view holder this adapter needs so just this view holder we created down here to do viewholder and add two parentheses here and now you can see we get a little error here because we inherit from this resectorview adapter it basically requires that we implement some default functions every recyclerview adapter needs and in this function we just define how we want to populate this recyclerview with data which layout we want to choose and so on so we just click into an empty line here basically we press ctrl and i then this window will open up and those are the three functions that we need to implement here to make this a complete recyclerview adapter so we can press ctrl and a to select all of these and then press ok and android studio will insert all of them here so this now looks super complicated especially if you're new to programming but don't worry we will declutter each of each of those three functions here we will first of all remove those to-do items because we don't need those instead we will start in this oncreate viewholder function so as the name says this function will create the viewholder this to do viewholder so here we just need to define how a specific item in our list looks like and you can see this function returns such an instance of a to-do view holder so we also need to do that here we write return to do viewholder and now you can see we need to pass an item view as a parameter so the view of a specific item in our recycler view and to actually get a reference to this view we can use the so-called layout inflator that is used in android to just yeah get a reference to a specific view we only have this xml file off so this is of course no kotlin code here but this layout inflator will just take this xml code and parse it or convert it to a kotlin class we can use in our code here so we can do that with layout inflator also import that make sure it added this import statement here for the layout inflator dot from and here this takes the context that would now be a little bit too much if i would go deep inside of context and android that is basically just the state of our application you can think of and we can get that by writing parent dot context so parent is just a view group you can see a view group is always a layout in android so with this view we can just get a reference to this context and nothing more and then we call dot inflate afterwards so this inflate function will actually inflate our layout it will actually convert this xml layout to a real view we can use in our code and this will take three parameters here on the one hand it will take the resource id so that is the id of our specific layout file each of those xml files has an internal id and we can very easily reference that with r for resources also press enter here to import that from example.to do list and write a dot after that you can see we have a bunch of types of resources we want the layout resource here and then we simply specify this item to do because that is the the layout of each item in our list and we want to inflate that with that layout inflator and then as a second parameter so write a comma we need to pass the view group we want to attach this item to that is just our parent here that we already have and we also need to specify that we don't want to attach this view to the root layout because that is not the point of a recycler view that we would attach this to the actual root layout so you never actually need this for a recycler view so we explicitly want to set this to false and that's already it for this oncreateviewholder function here so let's actually get next to this getitemcount function here and i'll make a little space so you can read that better um because this is actually the easiest function we need to implement here it just returns the amount of items we have in our list and in here we can just return our to-do's list dot size because that is exactly the amount of items we have in that list and our recyclerview adapter just needs to have that information so it knows how many items it should actually display and now this onbindviewholder function is missing what is this actually for well it will bind the the data from our to do's list to the views of our list so it will just um this will just be called when a new view holder is visible so a new list item in our list is visible and in this function we define which views of our to-do item of this xml item here so we just define which text we actually want to set to this textview and if we want to check this checkbox or not so we basically just use our list and set the data of that list to our views and you can see we get a reference to the current view holder with which we can just get access to its views so to our text view in our check box and we get a reference to the position of that current view holder so with that position we can actually also get a reference to the corresponding to do item in our mutable list so val current to do is equal to to do's our to-do's list that we pass from the outside and here as an index we will just choose position so that is the current to do item we are talking about here and now with that to do item we also have access as you can see to the is checked status and to the title and now we want to use those two properties to set them to our text view and our checkbox so let's actually do that as i said for that we will use the view holder so our holder dot item view because the item view contains those views and you can see now we could for example write tv to do title which is exactly the the text view of our to-do item but because we need to refer to that several times there is a cool shortcut in kotlin and that is by writing apply you don't need to do that but this just prevents that we always need to prepend holder that item view before referencing these views and now we can directly reference these views inside of this block basically so tv to do title we have cb done and we don't always need to write holder dot item view dot cb done for example so we can directly write cb done instead so first of all what you want to do is we want to set the title of our or the text of our text view to the title of this current to do item and we will do this by writing tv to do title make sure to import that so if you haven't done that if we press ctrl space here then it will display that and we need to press enter here so don't just write tv to do title then it won't input that and it will instead display this right line here if you have if you have that then you can simply put the cursor behind this word press alt plus enter and you can see then you can click on import but otherwise android studio won't recognize this to do text view here basically and if you have imported that we can write dot text afterwards to set the text to something new so we set that equal to our current to do dot title so we now set the title of our account to do item to the text of our text view and we will do the same with the checked status of our checkbox so cvdone dot is checked is equal to current you do dot is checked so if we would now have to do items in our list that would already be checked then we would simply update that specific to do item in our recycler view and then this checkbox would already be checked and now i would also like to implement this behavior that if we check an item that the text is basically striked through and for that i will create an additional function just for us here to toggle this state basically so to just if we if we already have a text that is strike through then we will um remove that strike through and the other way around as well so if we haven't striketh through then we will add that that will be a private function toggle strike through and that will just take a reference as a parameter to this text view we want to strike through so tv to do title we can again call it which is of type text view and we also need the is checked status of that checkbox so that will be a boolean actually and then inside of this function we can just check if that is actually now checked so if that to do item is actually checked if that is the case we want to add this strike through to this text view here and we can do that by writing tv to do channel dot paint flags so we can just specify some flags that we want to apply to this text view and you don't have to understand that in detail how this flag stuff works because that is kind of a binary operation now and yeah we just basically attach a specific flag to these pen flags so all the flags that are there previously will remain and we add one more flag to those so that will be set to tv to do title dot pain flags so the flex we had before or so that is this binary or we want to add this strike through flag so make sure to write this in capital letters and i think it's actually called strikethrough text flag yes once this underscore line here appears we simply press alt plus enter to import that constant here and then we're good to go and we also need to do something similar for the case that our to do item was unchecked so in the else case here we want to again use tv to do title dot paint flex we set that to tv to do title.painflex so the already existing pane flex and now to revert this flag that we had here we will use and so this is now a binary and strike through text flag dot inverted so with this dot in function we can basically just remove this flag from our pane flags and i know this is a little bit confusing here don't worry if you don't understand how this works in detail i also know that this is much easier in css but sadly this is just how we have to do it in android but now we have this function toggle strikethrough to just always be able to toggle this and we will need this in our onbindviewholder function because now we want to call this initially because if our to-do item was checked initially we of course all already want to attach this strike through line to our text view so we pass our tv to do title as a first parameter and we pass current to do dot is checked as a second parameter and we now want to call this function again when we click on this checkbox so when we basically check an item then we also want to call this function because then we want to actually toggle this strike through line and we can do this by writing cb done so our checkbox dot set on checked change listener so if we use this and actually this version of it with these curly brackets here if we press enter here then this is a lambda function in kotlin so this block of code here will be called when the checked state of our checkbox is changed so you can see we get a reference to this button view so a reference to this current checkbox we can actually replace this with an underscore which just means in kotlin we don't need this parameter in this function but we need this is checked here because that is the new checked state so if we click on the checkbox and now the checkbox is checked then this will be true and if it was already checked and we clicked on it and then it is now false so this variable will be false so what we can do inside of this block is we can just use our toggle strikethrough function again pass our tv to do title text view and we pass this is check boolean this time so this time not current to do is checked instead we use this new is checked status and pass it here and we also want to apply this is check status this is new this new is checked status here to our current to do item to update that as well so currently do that is checked is equal to current to do is checked but this time inverted so that just means that if this was false it is now true and if this was true it is now false and you can see we get an error here and that is because i accidentally made this a vowel so we cannot reassign this value and we actually want this to be a var so we simply hover over that and click on change to var so that will just change the value in order to do class to var here and that's it for this onbindviewer function which was the most complicated function of those three here if you haven't understood that i will go through everything we did in this tutorial in the end so when we finished our app i will explain it again and just as a little recap but for now we need to add two more little functions those will be much less complicated don't worry and that will on the one hand be a function to add a to-do item to our to-do's list here so when we actually click this add to do item button and we want to have a function that just deletes all a check to do items from this list we will define these functions here in this recyclerview adapter let's do that here that will be a function add to do and as a parameter we just pass the new to do item that we want to pass here and as i said this function will be very easy we just use our to do's list and add this item so this to do item oops not this one just this to do item here and afterwards because we inserted something into this list this won't automatically update our recyclerview so it will add this to this list but not it won't be visible on our screen basically it won't be visible as a new item on our screen because of that we need to notify our adapter here that we inserted an item and we can do this with notify item inserted and we need to um insert the position here as a parameter at which we inserted that item and this add command will just insert this item at the end of the list so we just passed the last index of the list which is to use dot size -1 and that's already it for this add to do function we also want to define a function to delete done to do's so function delete done to do's this won't take any parameters because we already have all that information about these done to do's inside of this adapter and we can just use our to do's list dot remove all and use this lambda function again so these curly brackets in which we can give this item and name here so to do so what this will essentially do is it will just go through our to do's list and give us an instance of each to do item in this list and we can now just define logic if we want to remove that item or if you want to keep it so that we just need to define a boolean here if we want to remove this item and the boolean for that is just if this to do item is checked so if that is checked we want to remove it and the rest will just remain in the list and after that we again need to notify this adapter that we changed something in the list because now we don't have all the indices at which we removed items we can just call notify data set change that will update our whole list and now we are almost done with our app the rest of the code we actually need to put inside of this main activity to just define a little bit of the behavior what happens if we click on our buttons that we have to attach this adapter to our actual recyclerview but the main logic was actually contained here in this recyclerview adapter so let's switch to mainactivity.kt and what we want to do here is first we want to attach such a to do adapter to our actual recyclerview and we can reference that recyclerview with rv to do items so we choose that make sure to press enter here again to import that automatically and then we can write dot adapter is equal to a to do adapter which i haven't created yet so we will get an error but let's do that up here as a global variable we define that as a private late init var so if you don't know what latent is i didn't cover that in my kotlin crash course that is basically just a promise to kotlin that we will initialize this later so we don't need to initialize this globally and said we will just do that later and that will be called to do adapter which is of type to do adapter so just like that and you can see we don't need to initialize that here and set that to some kind of to-do adapter because we will do that inside of this oncreate function right here so here we can set to do adapter equal to a new to-do adapter and you can see this now takes this to do's list that we want to display in our actual recycler view we will just pass an empty list here because we want our recycler view to be empty by default and we want to add these items dynamically when we click on add to do item but of course you could also just define a list of predefined to do statements here and add these already then these will be contained when our app launches but i won't do that here and i will just pass immutable list off and just leave that empty so that will just pass an empty list to our to-do adapter and yeah as you can see we already set that and assigned that adapter to our recycler view here another thing we need to assign to it is a so-called layout manager that is just something that defines how the items are arranged in our list so we will just use a so-called linear layout manager which will just display it like a real list so one item next item next item but there is also for example a grid layout manager that will arrange these items in a grid and yeah you can just experiment with that i will just use a plain linear layout manager because that makes the most sense for a to-do list app here so rv to do items dot layout manager is equal to linear layout manager and this again needs such a context i talked about and if we are inside of an activity we can just pass the activity for this context so just this and then this will work fine and now really the last step we need to do is we need to assign so called on click listeners to our two buttons so we just need to define what should happen if we click on these buttons let's start with our button add to do here dot set on click listener and this lambda function again so we can define our logic in this block of code well we first want to get the current text we have written into our edit text and then we simply want to create a to-do item out of that text and add it to our adapters to our list so val to do title is equal to et to do title our edittext field dot text and you can see that text is an editable by default another string because of that we need to convert that to a string by writing tostring and then let's actually add a check here to check if this is not empty because we don't want to add empty items to our list so if to do title that is not empty then we want to add it to our list so we create a new to-do item of this class we created here because our list and our to-do adapter consists of these to do items so val to do is equal to new to do item and here we assign this to do title as a title and we don't need to set this as checked status because it's false by default and then we can simply use our to do adapter and call our add to do function and pass this to the item we created here and that will just add this to do to our list and we could actually also just clear the the content of our edit text by writing et to do title dot text dot clear so that will just yeah clear our text and we can enter a new to-do item there and for our button delete done to do is so if we just want to delete all done to do's we also set this on click listener to that to define logic what happens if we click on this button then we just want to use our to do adapter not this to do statement to do adapter instead and just call delete done to do's because we already defined the logic for that in our to-do adapter so we don't need to do additional steps here in this on click listener and that is now everything we need to make our app work and as i said i just want to go through this before we actually try this out and before i show you how you can set up your emulator to run it so first of all what we did here in our activity main xml file we just defined the layout of our activity so of the screen that should be displayed at first and we have this recyclerview in it that is just a view that is used to display list items in android and each list item in android or in our app actually here is made of this item to do xml so each item will consist of a text view that displays the title of that to do statement and it will display a checkbox if that specific to do is checked or not and to make this receptor view work we needed to create this data class for each to do item to just populate um the list our actual views with data and we passed a list of these to do items to this to do adapter class we created here then this studio adapter class contains this to do viewholder which is just a class that is wrapped around a specific view here so that view will just be this constraint layout root layout here of our item to do xml and that just allows this recyclerview to have this recycled behavior that if we scroll that it only shows these items and only loads these items that are currently visible and that is just very performant and then in this oncreateviewholder function we return such a viewholder with our layout and that we inflate it so the layout inflator will just get a reference to the view that we defined here in this item to do so it will just take this xml file here and convert it to view we can work within kotlin and then we had this get item count function in which we just need to return the the size of our list so that the recyclerview knows how many items it should display then we had this onbindviewholder function in which we assigned or in which we set the data of our to-do's list to our textview in our box and for that we just used this helper function this toggle strikethrough function which just adds this strikethrough flag if our if our checkbox is checked and if it's not checked then we will remove this again and then we also had these two helper functions to just add a new to-do item to this list and to delete the done to do's and after that we just need to notify this adapter that we changed something in the list so it will also change something in our apps uri and then finally in our main activity this oncreate function will just be called when we launch our app here we assign a new to do adapter to this to do adapter we assign this adapter to a recycler view we assign this layout manager to this recycler view so just to define how these items are arranged in our list this will just make this a normal list and we add the behavior what should happen if we click on this add to do button and what should happen if we click on this delete done to do is button that's it for the recap let's actually set up our virtual device our emulator to run this app and see if everything works for that in the top right corner you have this virtual device assistant so this little android man here with this device we click on that and then this window will open up um i already have three emulators here these won't display for you but if you want to add a new one then you simply click on create virtual device then another window will open up i will just use this pixel 3a device here so select that you can choose any other you like click on next and here you can choose an android version this device should run on i will not choose android r which is the latest version because that is still in better and the emulators are still a little bit buggy with that so make sure to choose android q and you might need to download that so you can see i don't have oreo and nuget installed then you would need to click on download and download this specific version of android but on my computer this is already installed so i will just click on next and after your download is finished you can just select this and click on next you can give this a name and you can give this some settings but i will actually just leave the default settings you can also show the advanced settings here you can define how much ram you want to give it how much internal storage you want to give it but i will just leave this with the default settings and then it will work fine and after that you can simply click on finish here i won't do that because i will already have such an emulator emulator set up but afterwards it should appear in your list here so if you have added your virtual device here then you can also close that window here and then on the top side here of android studio you can see here we have a drop down in which we can select the virtual device we want to run this app on make sure to choose your emulator here i will use my pixel 3a api 29 emulator that is the one i suggested to i suggested you to create and then simply click on this play symbol and that will launch your emulator and the app into it so i will actually open up my emulator here you can see that is just a normal android device you can use here and yeah now gradle is building that is usually taking a little moment because well it just needs to take all of our resources here and put them together to an executable app if you only make small changes in your app then this will not take as much time as it takes now but since we haven't started our app yet this just takes a little bit of time so now it's actually done and it will install our app here on our device and launch it afterwards so you can see here we are our to-do list app and our layout so everything works as expected we can enter to do title here bring out the trash we click on add to do and then the item will be added to our list we can do that with another to do feed the cat we could even put in a little emoji here feed the cat and click on add to do then another to do will be added and let's do one more meeting with bill gates click on add to do and there we go now if we check those you can see the strikethrough works if we uncheck those it's removed again and let's say we check those two and click on delete done then it will delete those and update our list accordingly so there are still some issues with that app so for example if i would rotate the device here and click on this rotate button then you can see it rotates it but the list is basically cleared and the reason for that is that activities in android are recreated on screen rotation so it will start in oncreate again and just initialize this recyclerview with an empty list that is something i can't deal with into the in this crash course here because i would need to go deeper into android for that but if you're interested in more advanced android development and how to handle stuff like that how to implement databases how to do networking with android to work with apis how to do media stuff then really check out my channel i have so much stuff about android and i'm sure you will find something that is really interesting for you so in that case just click the first link in this video's description and other than that if you have any problems with this project you can also find the link to my github repository in this video's description so if you have any errors you can just compare my version with your version and that just helps to fix those so thank you for following through this long and also thank you brad for giving me this platform to just teach my favorite development topic android and i would really love to see some of you on my channel have a really nice day and hopefully i'll see you back in another video

Channel: Traversy Media

Views: 250,759

Rating: 4.8923984 out of 5

Keywords: android, android programming, android tutorial, android kotlin, kotlin android, build android apps, mobile development, mobile app development

Id: BBWyXo-3JGQ

Length: 71min 41sec (4301 seconds)

Published: Mon Nov 09 2020