BOTTOM NAVIGATION VIEW - Android Fundamentals

[Music] hey guys welcome back to new video this video will be about button navigation view which is a bottom bar that is used to navigate between different fragments and it should be used when you have at least three fragments and if you don't know what fragments are then make sure to watch my previous video about that because you need to know what that is to follow through this video because budget navigation view does not belong to the Android standard library we need to add its dependency it is included in the Google material design library such as many other curve use so let's actually include that dependency let's go to our built at Gradle module add file double click that scroll down to our dependencies here and inside of that block you want to paste this dependency and I will also include that in this video's description so you can just copy paste it after that make sure to click on sync now in the top right corner after that click on sync now in the top right corner and Gradle will sync your project next we need to create a menu that describes the different tabs in our button navigation view so if you have watched my video about toolbar menus then we have to create such a menu now to do that lets go to our s folder right click new and Rec resource directory and select the resource type here this drop down menu and click on menu and then click OK afterwards this will create a new menu folder in our resource folder and now we can right-click on our menu folder create a new menu resource file and I will call it bottom nav menu then click OK and what so you will create that menu file and open it then we can go into that text tab of that menu file and in that menu tag we can add our menu items that belong to our bottom navigation view and because I also want to include icons and our menu items let's create those 3 icons for first let's go to drawable right-click new image asset then this dialog will open first I want to create an icon for our home fragment so I will call it IC home then click on the clip art and search for home this is the icon I want to use here click OK I will choose black as the color click Next and finish then let's create our other two icons so right click on drawable new image asset this one is I see messages click on the clip art and search for message then click on next and finish and finally for the last icon right click on drawable new image asset this one is IC profile click on the clip art and search for personalized think yeah this one I want to choose here click OK click next and finish there we go so now we've added our three icons to our project and now we can actually create our menu with those let's open a new tag here and write item let's give it an ID of am i home for our home menu item so the first one I will give it a title off home and I will set the icon to IC home and close that tag off then let's copy that whole tag and paste it two times below I will change this ID to em I messages change the title to messages and change the icon too I see messages this one is a my profile the title is profile and the icon is I see profile and that's it for our menu now we can go into our activity main dot XML file and actually create our activity layout where we want to add that bottom navigation view first let's create a frame layout here I will set the width to match parent and the height to 0 DP and I will give it an ID of FL fragment because this will be the frame layout that holds our current fragment and whenever we click on those bottom navigation items then we want to switch the current fragment which is inside of that frame layout and below that we want to create our bottom navigation view this one here and you can see this belongs to calm that Google Android material that is the Google material design library which is a very popular library for a lot of different cool views you can use so you can just try around with it if you just type material here then you can see all those views that are included in that material design library but I will use the bottom navigation view here so press enter here layout width is match parent and layout height is 75 TP and what we need to do here in XML for our bottom navigation view is to add our menu that we just created we do that by writing menu and attaching our bottom nav menu here then we can close that tag off and jumping into our design tab to set the constraints for our two views here so here's our bottom navigation view we can constrain it to the bottom and center it horizontally in parent and I will take our FL fragment here constrain the bottom to the top of our bottom navigation view and the top to our parent job and I will also constrain it horizontally in parent and actually I want to remove that padding that I added to our route layout because in this case I don't want to have that little right space here for that bottom navigation view that looks really ugly so let's go through that text step and we move that padding here if you didn't edit then don't worry about it if we run that app now then you maybe have the same issue as I have so here's our bottom navigation view and we can switch between the different tabs but the background is in that ugly black and I don't actually know why it is black but I know how to solve that problem so to solve it we need to go into our values folder in our arrests folder and double click on styles dot XML because we are currently using that standard style for our app so that standard theme but we are using a material design view in our layout and because of that we should use a material design theme too so you can see we have that parent theme app compat dot light dot dark action bar and we have the same theme as a material design theme so let's remove that and write material components and the dark action bar and you want to use this one theme that material components dot light dot dark action bar and if we now run our app again then you can see that now looks much better and we can choose between those three options that really find in our menu but currently of course we didn't define our fragments to actually change the fragments when we click on those three icons below here and let's actually create three very basic fragment layouts we can just copy our activity main.xml here and paste it I will name it fragment first then remove the content of the of that constraint layout and replace it with a single text view set the riff through wrap content and the height to give it an ID of TV first fragment and set the text of that textview to first fragment and close that tag off then we can go into our design cap and set the constraints horizontally in parent and vertically in parent and actually it's increase the text size a little bit so let's write text size is equal to 30 SP then we can take our fragment first XML copy it and paste it this one is fragment second change the ID to TV second fragment the text to second fragment and paste it one time more fragment third TV third fragment and third fragment and now let's go into our app package and create three classes for our just created fragment play out files so right click new Kotlin photo class select class here and this one is first fragment and that class inherits from fragment and in the constructor of fragment we need to pass the ID of the corresponding layout file first we need to press alt + Enter to import fragment and as I said here we need to pass our dot layout dot fragment first then we can take that first fragment class copy it and paste it again call it second fragment and replace that layout with fragment second and paste it one more time for the third fragment and replace the layout with fragment third then we can go into our main activity Katie file and here round to create a function that just replaces our current fragment with a new one so that's right private fun set current fragment and as a parameter we pass a fragment that we want to set as the new current fragment and that is equal to support fragment manager dot begin transaction dot apply and here we want to call replace and we want to replace the new fragment into our container which is the FL fragment container or frame layout so r dot ID dot FL fragment and as a fragment we pass the fragment that we passed here as a parameter and afterwards we want to call commit to actually apply those changes then inside of our on create function we can create an instance of each of our fragments so Val first fragment is equal to first fragment well second fragment is equal to second fragment and finally well third fragment is equal to the third fragment now we want to set the initial fragment that shows up when we open the app which is just first fragment so let's call set current fragment with first fragment and now we want to actually respond to clicks on our different menu items and switch to the corresponding fragment to do that let's write bottom navigation view and we need to add an on navigation item selected listener so let's write a set on navigation item selected list not this one not on navigation item we selected listener we want to choose this one and here we can use a rent expression because our it here is the current menu item we clicked on and we can refer to the ID of that menu item we clicked on with it to add item ID and depending on which item ID that is we can respond to that click differently if we click on our dot ID dot M I home so on our home menu item in that case we want to set the current fragment to first fragment if we click on em I messages then we want to set the current fragment to second fragment and if we clicked on a my profile then we want to set the current fragment to third fragment and because this is a lambda function that expects return value from us which is a boolean in this case that describes whether we handle that click or not in this case we handled that click of course we can just return true at the end so just write true here we don't write we turn through here in a lambda function instead just write true it will always return the last line of that function and if we now run that app you can see our first fragment shows up initially and if we click on messages for example then our second fragment is shown if we click on profile then it switches to the third fragment and so on so there is a really cool way of navigation and as a little bonus I want to show you how to actually display little batch symbols here so for example if we click on messages that we have a little number up here at the message symbol that tell as how many new messages we have and that is actually not very hard to do let's jump into that oncreate function again and to do that we need to write bottom navigation view dot get or create badge a badge is just this number that appears at the top right corner of a menu item and here we need to specify the ID of the menu item for which we want to create that badge which is just r dot ID dot a my messages afterwards called apply and inside of that applied block we can just set the number so that the number of that badge to ten for example in a real app you would of course set that number dynamically through the number that represents the real new message count but in this example I'll just set it to ten and afterwards we need to call this visible is equal to true to actually show that badge if we now run our app again then you can see at our message symbol there is a little 10 in the top right corner that displays how many new messages we have so I hope this tutorial was helpful for you if so please leave a like and comment below also if there is anything I can improve on then please tell me that that would be really helpful for me have a good day see you in the next video bye bye

Channel: Philipp Lackner

Views: 20,116

Keywords: kotlin, newbie, programmer, coding, tutorial, android, android studio, xml, ui, ux, layout, navigation, beginner, editor

Id: AL_1UDa9l3U

Length: 16min 52sec (1012 seconds)

Published: Mon Mar 09 2020