How to Add a Floating Action Button to a Bottom Navigation - Android Studio Tutorial

hey guys welcome back to new video in this video just very quick i want to show you how you can make such a bottom navigation view with such a fab in the middle of it um because many have asked me that this is my social media app i'm currently working on you can see that it's just a completely normal working bottom navigation view here we have profile settings search home fragment um this is not the purpose of this video that we make this app it's just about this bottom navigation part here that you have this floating action button in the middle of it and this is not the bottom navigation view alone this is a bottom navigation view in combination with the bottom app bar so a bottom app bar is just a view that comes from the material design library in android and that is used to um be able to comb combine that with this floating action button but this usually um if you have a bottom app bar this um doesn't look like a button navigation view with these items arranged in that order it just puts all the items on the right side on the left side but not like this here but in this video i'll show you how we can achieve that this video is sponsored by myself if you want to take your learning to the next level then click the first link in this video's description to get to my website where you will find over 300 quiz questions for all my videos take notes clap the leaderboard and compete with other android developers just by creating a free account so i just created a very plain android studio project here with an empty activity and here we will do that so just create that empty project and you're ready to go um first of all you want to add the material design dependency in our build.gradle file so that we can just use that bottom navigation view and bottom app bar view i talked about so open your build.gradle module app file here on the left and then scroll down to dependencies here i'll make a little space here we want to add this link and you will also find this link in this video's description and you will also find the source code to this project in this video's description so then we need to tell gradle that we want to sync this dependency with our project so on the top right corner we have a little sync now link we can click on that and gradle will do its job and once this is finished we want to import some icons for our bottom navigation view we want to do that in our rest folder and right click on drawable go to new and we want to import a vector asset so then this dialog will open up and we can you can see we have a clip art here and we can select an icon here if we click on that and there are a bunch of icons you can choose from here and you can also decide if you want these icons to be filled if you want these to be outlined if you want these to be round and so on and so forth you can really try around with that i will just import five different icons here so four for the bottom navigation view and one for the floating action button so first of all i will search for home i will use this house icon here press ok we can give it a name of ic underscore home you can choose a color here i'll just leave it black and i click on next and then on finish then we can do the same again right click on drawable vector asset this time this will be the icon for the search icon so um not i can just search this year click ok rename this to ic search and next and finish then again right click drawable new vector asset this time for the plus or i think add yes this add icon here for the floating action button press ok rename it to ic add and next and finish and two more times right click drawable new vector asset this time it's for the person so we search for person click on this ok rename this to ic person next and finish and finally one last time for the settings so click on clipart again search for settings and this icon i want to choose here of course you can choose your very own icons here press ok rename this to ic settings and next and finish okay so the next thing we want to do here is we want to create a menu for our bottom navigation view because to tell it how these items is how the single options in it are arranged and which icons these have we need to create a menu file also in our res folder here so we click right click on rest new android resource file and make sure to select um menu as a resource type here so then it will automatically create that folder for you and we will call that bottom underscore nav underscore menu and then we can press enter to create that menu file and you can see we get a little visual representation here but we want to click on this code in the top right corner to get to the xml view of that menu so in here in this xml file we can now create the single items we want to have in that menu so we open a new tag with item we give it an id let's say mi home we want to give it a title of home and we want to give it an icon of ic home so the home icon we chose and then we can close that off so that's it for the home icon in our menu then we can copy this and paste it three more times for our other menu items the second one i will call mi search i'll change the title to search as well and the icon to ic search then the third item will be mi let's say profile name this profile and this will be i see oh here's a quotation mark missing this will be ic person and finally for the settings we will have mi settings the title will be settings and the icon will be ic settings as well okay that's it for our menu file next we want to go into our activity main xml file to actually add that bottom navigation view and that bottom app are i talked about to our design so if this light editor opens for you we don't want this we want to see the xml view of this so we click on code in the top right corner again to see the xml code of that you can see android studio already created this text video for us we don't want that we can simply remove it and we also don't want this layout to be a constraint layout instead we want this to be a coordinator layout a coordinate layout is very useful if you have a floating action button for example as in our case so with it we can just define that this floating action button should actually stick to our bottom upper bottom navigation view so we will just replace this with a coordinator layout here and then it should automatically also rename this closing tag here for you okay in here as i said we first want to create our bottom add bar so we open a new tag with a bottom app bar this one here press enter we give it a layout width of match parent and layout height of wrap content and also give it an id of a bottom app bar and then we can set the layout gravity of this bottom app bar to bottom so that it just sticks to the bottom of this coordinator layout here and then we can close this tag off for now what i also want to create is the floating action buttons so that we can attach it to this bottom app bar so we open a new tag floating action button um the first one here not the extended one and this will have a loud width of wrap content height of wrap content as well we give it an id of just fab and then now we want to set the icon of this floating action button so src to ic plus or ic add yes this one we want to set its layout anchor so that is basically to determine to which view this floating action button should stick to because we're inside of a coordinator layout here that is um useful so we will use our bottom above for that so that it just sticks to it and then we can close this tag off and if we now take a look in our design tab here in the top right corner then you will see this doesn't look as we want it and the reason for that is that we don't use a material theme yet we use material components here but not a theme and to change that we need to go into our values folder here into styles.xml and here you can see this is the place where we can choose the theme for our app and we want to use theme dot material components and if we now take a look back in our activity main xml you can see that looks kinda as we wanted here so if we zoom in we have our floating action button attached to this bottom app bar and the cool thing now is that we have some options to change how this circle here looks like so if we go back to our code tab to our bottom app bar we could for example set the fab cradle margin to some amount of dp here so for example to 20 dp if we now take a look back in the design tab you will see that the margin or the the circle is much bigger now so just feel free to play around with these values we also have some other values here like if we just type cradle the cradle vertical offset for example to 10dp this will just move the fab 10dp to the top and this circle as well and we have um cradle rounded corner radius here which is pretty cool so if we set that to 20dp and take a look in the design tab then you can see that these corners here are actually rounded but now we are of course missing the bottom navigation view so that we have our menu items to choose from and for that we will go back to our code tab to the xml view and what i will do is instead of closing the the tag here for the bottom app bar i will open it like this so we can put a view inside of that and here we will put our bottom navigation view this time so this view here with the view the width of match parent and the height as well also match parent we will give it an id of bottom navigation view and we will set the menu of it to our bottom nav menu and then we can simply close that tag off let's see how that looks in our design tab here okay it looks fine but not exactly as we want it so on the one hand you can see here is a little shadow and there's also some space at the left hand and these items here aren't really arranged in a way as we wanted and of course it's also overlapping the circle here so what i actually do here is to solve that problem on the one hand we will also add some margin to the right because i don't think we can fix that margin here so we will also attach that to the right and we will make the background of this bottom navigation view transparent so that we see that um circle again so let's go back to our code tab and in here to our bottom navigation view we will attach some margin end here of exactly 16dp and we will also set the background of this bottom navigation view to android color transparent and if we now take a look back in the design tab you can see that it is kind of the margin fits now but it still doesn't look that good because there is still this shadow and i personally actually don't know why this shadow occurs here because the background is transparent but luckily i know a way to fix that and we cannot fix this in xml we need to go to our main activity and in here we need to use our bottom navigation view and write a dot after that and use background and just set it to now so that will completely remove that shadow here of course in xml you will still see it but once we start our app this shadow will be gone here and now the last problem we have is that these items aren't really aligned very well and we can easily fix that by simply adding a placeholder icon an invisible icon in the middle of that so we simply go back to our bottom nav menu here still open here and after the the second item here we will launch we will not launch we will um open a new tag for a placeholder item so we set the id to placeholder and we let the title just be empty and we don't set any icon to that of course and then this will actually if you take a look in activity main you can see now these are aligned much better but we're still able to click on the middle icon so if we would click exactly here then this little bubble would appear if you click on an item to disable that we need to go to our main activity and also use our bottom navigation view the dot menu to get a reference to its menu and we want to get the item of that menu at the index of two so starting from the left with index zero which is our um home icon then we have index one for the search icon and index two for our placeholder icon for that icon or menu item actually we want to set is enabled to false and that will completely disable it so we cannot click on it and also this bubble won't appear and that's it let's try it out click on this play button here take a look in the emulator and you can see here is our bottom navigation in combination with the bottom app bar the bottom navigation is working perfectly fine of course it doesn't do anything now that is something you need to do for example to connect it with the navigation component library and also the fab is of course not working here because we haven't set an on click listener to that but that is something that you should be able to do um or that you need to do actually this is just a tutorial how you can set up this combination of bottom up bar and bottom navigation view if you like this video then please hit the like button and especially if you're not a subscriber of my channel then quickly click on the subscribe button below and make sure to do that you get regular android content every second day and yes i wish all of you a very pleasant day see you next video bye bye [Music] you

Channel: Philipp Lackner

Views: 37,201

Rating: 4.9620852 out of 5

Keywords: android studio, kotlin, bottom nav, bottom navigation, navigation, rounded corner, floating action button, floating, fab, bnv, kotlin tutorial, tutorial, design, ui design, ui, ux, material design, material library, material design library

Id: x6-_va1R788

Length: 16min 13sec (973 seconds)

Published: Wed Oct 07 2020