Skip to main content

How to use Floating Action Button Component In Kodular ?

 

How to use Floating Action Button Component In Kodular ?

So, today we are back again with our new fresh Tutorial on "How to use Floating Action Button Component In Kodular ?". Hope you will surely enjoy this tutorial, here we start our tutorial without wasting any more time....

How to use Floating Action Button Component In Kodular ?

1.What is floating action button?

Floating action button is a button in android development which is always floating on the screen of device.This button is used in android development usually for carrying out any action by user's command and hence this is called Floating action button or FAB in short.We are also given a component to use floating action button in Kodular with the help of a component also named as Floating action Button.We are also provided many options in this component so that, we are able to use this button as many action button.

2.Why we should use Floating action Button?

We should use Floating action Button because.....
1. It is always a attention Catching for user.
2. Makes app easy to use for user.
3. Improves UI and UX of our application.
4. Perfect for options like fullscreen,download etc.

3.How to add Floating action Button to our Kodular project?

Step 1:Open Kodular Creator's Website and open the project in which you want to add floating action button.

Step 2:Look for floating action button component under User Interface and drag and drop it to your project.

OR

Search for floating action button in the search box of the palette and you will find floating action button component.So, just drag and drop it to your project.

4. Properties of Floating action button:

1. Background Color:
It is used to set background color of Floating action button.

2. Elevation:
Sets the elevation of floating action button from Screen.

3. Icon:
Sets the icon for Floating action button.

4.Material Icon:
Sets the material icon to be placed on your FAB.

5.Margin Bottom:
This sets the distance of floating action button from bottom of screen.

6.Margin Right:
This sets the distance of floating action button from right side of screen.

7.Size:
Sets the size of floating action button.

You can check for advanced properties of FAB here

5. Main Blocks of floating action button:

1.Start Rotation Animation:

Block 1

To call FAB to start FAB rotation animation.

2.Show FAB:

Block 2
Makes FAB Visible to user.

4.Hide FAB:

Block 3
Makes FAB invisible to user.

5.When FAB long click:

Block 4
To perform a action when FAB is long clicked.

6.When FAB click:

Block 5
To perform a action when FAB is long clicked.

5. FAB rotate on click:

Block 6
To check or set FAB rotate on click true or false.

6. Rotation Duration:

Block 7
Sets the Duration or speed of rotation of FAB.

7.Rotation End Degrees:

Block 8
Sets the angle for end of rotation of FAB.

8.Rotation Start Degree:

Block 9
Sets the angle for start of rotation of FAB.

So, these were the main blocks for FAB. We will also be learning to use it's more properties in our next tutorials.Till then.....

                                            
Happy Koding.......
Labels:

Comments

Post a Comment

Popular posts from this blog

Kodular Basics- Getting started with Kodular

What Is Kodular? Kodular is a online software which allows us to make android apps without any programming knowledge. Kodular's enable us to make fantastic android apps using their blocks-type editor.We can make our apps stand out with the material design UI. Using Kodular we can make android apps just by dragging and dropping components provided in Kodular Creator.We also need not to write any code to make our app working. We just have to specify blocks in kodular creator and we are out of the tension to write Codes. Getting Started With Kodular :   For making apps you just need to go to Kodular's Creator and sign up there with your email and activate your account.You can create Kodular account and make apps for free. There aren't any charges to use Kodular Creator. So just go Kodular.io and sign up there and start happy coding and app making.  Kodular Dashboard: After you have signed up for Kodular creator,select the option "Create Apps" and you will be redirect
Post a Comment
Read

How to use dynamic component in Kodular Creator ?

How to use dynamic components in Kodular Creator? Welcome back my dear friends, today we are back again with a complete new tutorial. Today we are going to learn How to use Dynamic components in Kodular Creator? As of all our tutorials I assure you you will find this tutorial very useful while developing any of you application which the no. of components are not fixed. So, we use dynamic components to add as much as number of components as we want. So, here we start our tutorial with some of FAQ's that will help you to learn what is concept of dynamic components if you didn't understood "What does dynamic components mean?"  FAQ's about Dynamic components 1. What are dynamic components? Dynamic components are the components which allows us to show as much as number of components in our application as we want. So, that we need not to update app to add any component in our application. This is useful when we are developing any application like Shopping application in
Post a Comment
Read

How to make a stopwatch application in Kodular?

  How to make a stopwatch application in Kodular? So, guys we are back with a new tutorial. In today's tutorial we will learn making an app rather than learning to use any component in  Kodular creator. It has been time, since we  have provided a tutorial for making a android app in Kodular Creator Series. Hence, today we will  be learning How to make a simple seconds based stopwatch in Kodular. Here firstly we talk about some of FAQ's about Stopwatch in Kodular creator....... FAQ's about stopwatch App 1. Functions of this Stopwatch If you want to know the main functions of this Stopwatch application then we have how this app will work: 1. Firstly User has to start the stopwatch 2. Then he can pause or start the stopwatch. 3. User will be able to reset this stopwatch. 4. User can check timing upto 10 mini seconds. 5. User can easily use this app. 2. How will this app work? In this app we will use a timer component to record time and we will use button for start stop and re
Post a Comment
Read