Expandable Floating Action Button - Android Studio Tutorial

hello there and welcome back to my new videos so in this video I want to show you how to create an expandable floating action button so as you can see this is our application preview and when we click on our floating action button we can see two more of those action buttons and also we can see the animations and when we click one on one of those action buttons we can see this a simple toast message okay so here is a simple and basic Android studio project and now we're going to start by creating those three action buttons so first let's remove this textview and when we try to add our floating action button we see that we need to add first the icons for those action buttons so before we add those action buttons let's first add those icons so I'm going to choose that three different icons for three different floating action buttons so the first icon will be this add icon and the second one will be ten icon so let's search for the pen okay here we're going to just change the name to mores to something more simpler and let's choose that the third one the third one will be an image so let's like this okay click Next and finish so now we're going to add our three floating action buttons one of you so when you try to add one Android studio will ask you to add this material dependency for you so let's click OK and after that let's connect right and bottom constraint of this floating action button and those constraints should be 24 for example and now inside this XML code we're going to add the attribute name there focusable to true and we also want to change the icon color to white okay and also for this first floating action button I want to change the background color to purple alright and next let's add the second floating action button okay select this pen icon connect right and bottom constraint to this first action button so in the application preview you saw that those two last two floating action buttons were a little bit smaller and we're going to make them smaller with our cast animation resource files okay so now connect those constraints right and also add this focusable and this icon color for those two action buttons as well okay and now let's change the IDs of those buttons so the first button will have the idea of add button the second button will have the idea of maybe pen button or or edit button it doesn't matter so this is just an example and the third one will have the ID of image button okay so that's fine for now and next what we're going to do we're going to start and create four different animation resource files for our animations so open up this resource manager and create four different animation resource file the first one will be named a rotate open enim and the second one will be named a rotate closed ennum so this rotate animation will be used on our first floating action button to rotate so the first time when we press our floating action button it will rotate from 0 to 45 degree and the second time we press on that same button it will get back from 45 degree to 0 degree okay the third file will be named from a bottom and the fourth one to bottom so first let's start with this rotate open a resource file ok so here we're going to add just one simple element which is a rotate and here we need to specify four different parameters or attributes so first for the pivot point set to 50% and basically that means that our rotation will start from the center of our floating action button and for the from degree set to zero and to degrees set to 45 and the reason for this animation will be 300 milliseconds and of course you need to add this field after to true on this set element as well ok so after that we're going to copy this code and just paste that inside our rotate clothes and in and just change this value from degrees to 45 and to degrees to zero and of course add this feel after to true ok so after that in our from bottom animation resource file we need to create three different elements so the first one is a translate and that means that our floating action button will move from bottom so from a wide welter set to 100% and to Y Delta set to 0% okay so for the duration we're going to set 300 milliseconds and if you're not familiar with this for those transition animations and creating a custom animation resource files I recommend you to watch my video about that so you can do that next element is a scale and it will have the pivot point exactly the same with 50% as well for the to Y scale we're going to set to 0.8 and 2x scale to 0.8 as well because our because this animation will be applied for those two smaller floating action buttons and they will have the width and height of 80% and final element is alpha which is basically an opacity so we are setting the opacity from 0 to 1 in the duration of 800 milliseconds and here let's say this feel after to true as well so let's copy all of that and paste inside our last animation resource file and just change a few values here so from Y Delta to 0 and 2 Y del to 100 this time and here we're going to add two more attributes from Y scale and from X scale and set them to 0.8 as well and for our alpha willing to change the duration this time to 150 and from alpha 1 and to alpha 0 so I set this at 100 and I can remove that and just say 1 because it's basically the same as 0 and 1 is the same as 0 in 100 so here as well set is feel after to true and now we're going to create all the necessary logic and implement those animations on our floating action buttons so before that we need to set the initial visibility of those two action buttons to invisible because they will invisible they will be invisible at first but we're going to change their visibility inside our main activity so you will seem so just copy this attribute here as well and those two buttons will be invisible at first so next open up the mainactivity and here we're going to start by creating a four different variables for our four different animations and we're going to load those animations here so let's name the first one rotate to open and I'm going to lazily initialize those animations here so I'm going to use this class named animation utils to load this animation so just past this context parameter and the second parameter just the resource ID and let's just copy this code three more times and just change this variable name and the resource ID okay so we can have our four different animations here as well alright so here to bottom and specify to bottom a name okay so after that we need to create own click listeners for our three floating action buttons so first let's start with this Add button and let's create another two own click listeners so our edit button and the image button we have basically a toast message inside so we're going to say just simple as edit button clicked and let's copy this toast message and we're going to place that message inside our image button onclicklistener as well just change this edit to image okay and our add button will have a new function named the own add button clicked and let's create a new function down below okay so this function will have two functions inside the first one will be named the set visibility and the second one will be named a set animation and both of those functions will have a one parameter of a boolean value of a boolean type so let's first create those two functions here okay and now I need to create one more variable named clicked and this variable will be at will have the type of a boolean so this variable will act as an on and off switch and you will see so let's add this clicked boolean type as a parameter on those two functions and let's pass this clicked inside okay so first let's start with a set visibility and we're going to say now here if this clicked is false and the force is the fourth value of this variable then we want to set the visibility of those two action now floating action buttons too visible okay and in else block I want to set their visibility to invisible okay so next what I'm going to do inside our own add button click I want to add in a block and say if clicked is false then I want to assign a new value of true and if it is true then I want to assign a new value of false so this can be shortened so I'm going to apply this okay and here we say we have an arrow so we need to replace this Val with the VAR because we will later as reassign this value so inside our set animation function we're going to basically do the same as we did inside our set visibility so if our clicked is false then we want to start the animation for those three buttons so for edit button and image button and we want to start from bottom animation and for our add button we want to start rotate open animation and in else block we want to start those three animations as well but this time for those two buttons to bottom and for our add button to rotate closed so basically what we are going to do at first we have loaded those are four different animations and we have created this clicked variable which is basically the same as on and off switch and we're going to change that variable value inside our on button click method and here we are calling those set visibility and set animation functions and we are reassigning the value of this clicked variable from false to true and from true to false and we're setting visibility and the animations accordingly to that value of this clicked variable so I think this is all self-explanatory and we should now run our application and check it out okay so let's click this button and you will see that our add button row is rotating from 0 to 45 degree and those two buttons are now visible and you saw that animation where those two buttons are coming from the bottom and as you can see we can see those toes messages as well and now when we press this add button again this add button will rotate back from 45 degrees to 0 degree and that those two buttons will disappear so there is one more problem so when we click this button again and when we click this in this empty space we can we can basically trigger those at those messages as well so this is an arrow and we will fix that easily by creating a new function and this function will be named set clickable okay and it will take this boolean as a parameter as though as those two previous methods so here we're going to say if clicked is false then we want to set this is clickable to false okay and let's set that to our second floating extra button as well and in else block we want to set this is clickable to true so let's just copy that and change the value from false to true okay and now we should be able to fix this and of course call this method inside our on add button clicked okay and let's run our app again so now when we click on empty space we are not going to be able to call these toast messages and when we press this Add button and click on those buttons okay and nothing happens as well so okay I think I know why why is this happening so we mistyped the values in this set clickable function so here instead of false we need to set true and down below in else block we need to set the false okay so now everything should work perfectly fine so now as you can see what I'm clicking and nothing happens and now when you click this Add button and click on those floating action buttons now we can see this toast message and everything works perfectly fine so that will be all for this video thanks for watching please like this video if you find it helpful of course and see the next one you

Channel: Stevdza-San

Views: 28,269

Rating: 4.9046283 out of 5

Keywords: expandable, expand, floating, action, button, fab, android, studio, app, how to, guide, tutorial, animation, animate, appear, show, display, buttons, option, multiple, add, plus

Id: umCX1-Tq25k

Length: 12min 54sec (774 seconds)

Published: Tue Jul 28 2020