Floating Action Button in Jetpack Compose using Kotlin | Android Studio

hey everyone welcome back to my channel in this video we will learn how to create a floating action button and an extended Floating Action button in Jetpack compost it's super duper easy okay also I'll be creating jetpack compost projects in upcoming videos but before that I wanted to clear all the basics so that you are confident enough to build a project all right let's start so first I'll teach you how to create a simple Floating Action button in Jetpack compost and then later we will see how to create an extended Floating Action button okay now let me quickly add all the prerequisites like colors and theme and done then clear all the existing code and done now let's create a composable function named learn FB don't forget to call it here inside the set content then to create a floating action button first we need to create a box around it that acts as a screen surface hence a box with a modifier parameter as fill Max size means the entire screen then inside that box Here Comes The Floating Action button with four parameters if you will click on it you can see all the parameters out of which we will use padding alignment color and on click wait let me create a preview of it so that you can see the changes while writing the code in new Android Studio it shows code suggestions which you can directly add by clicking on t button cool right all right now the first parameter is padding means the space around it which will be 16 DP from all sides then alignment means the position of the button I want Fab to be at the the bottom on the right hand side technically called the bottom end then I want the Fab color to be green so I'll give the container color green simple then comes the on click means what will happen when the Fab is clicked you can simply redirect to another screen using the navigation or maybe you can open a dialogue box anything will work but for now I'll throw a toast now to throw a toast we require context so let me quickly initialize context and then then here toast as Fab clicked great lastly of course the icon so there is no parameter to add an icon hence you have to come inside the brackets and here call the icon with the image Vector I'll choose add icon and content description as null and that's it our Floating Action button is ready let's run the app and see it looks perfect and it is clickable great see I told you it was so easy but it can be hard for a beginner so let's keep that in mind next let's move on to the extended Floating Action button but what's that so in the extended Floating Action button you will have an icon with a text the text makes the floating action button an extended Floating Action button got it all right let's create it so I will create a new composable function named learn extended Fab and inside it I will copy and paste the above code also make sure to call it here inside the set content and comment all the other existing [Music] code and done now see we have a context variable for toast then a box as a screen surface and inside it an extended Floating Action button with the same four parameters so padding of all sides 16 DP then alignment as the bottom and then container color as green and then the on click here we need to make a change as extended Fab clicked lastly we do have an icon as a menu and as I previously said an extended Fab means a button with an icon and text so the icon is present all we need is text that says menu with 4 DP padding and a font size of 16 SP and that's it this is how it looks on the preview let me quickly run the app and see all right it looks nice and if I click on it it says extended Fab is clicked perfect and that is it for the video so if you're new to this channel then please consider subscribing to my channel and I'll see you in the next video [Music]

Channel: Android Knowledge

Views: 748

Keywords: learn jetpack compose, jetpack compose introduction android hindi, android jetpack compose tutorial hindi, jetpack compose, android jetpack compose beginners guide hindi, android ui design in jetpack compose, compose view interoperability android, recomposition in jetpack compose basic, jetpack compose for beginners, jetpack compose tutorial, learn android development, android studio, learn android programming hindi, kotlin android tutorial, fab, extended fab, english, fab jc

Id: ppbyVn2SJ9Y

Length: 6min 9sec (369 seconds)

Published: Wed May 08 2024