What are floating buttons in Android systems and how can they be used?
Another component available in Android systems is floating buttons, which in this article we will discuss in relation to this component as well as how they can be used.
|
7 minute(s) read
|
Published on: May 04, 2021
Updated on: Dec 14, 2021
|
As their name suggests, the hide button is a float placed on the page when designing or developing an application -by-application designers and developers. Of course, it should be noted that they do not move and remain on the page by scrolling the page. Of course, the choice of their location is the responsibility of the developers. These buttons are mostly used in messaging applications or their management, such as Gmail. In this part of the tutorial, we want to tell you how to create floating buttons. The Gmail page has a circular icon at the bottom right of the page with a pencil mark inside. Pressing this button will take you to the email page and write a new message.
FAB stands for Floating Action Button, which requires some libraries to launch and run, such as appcompat and design.
1- I will create a new project in Android Studio, choosing a name for it. The name chosen for this project in this tutorial is FAB.
2- Remember that we must create the project with MinSDK 17.
3- We add the library to the project. Like the following:
In this project, we use CoordinatorLayout for layout. It should be noted that using this layout is that you can use it to have better management and controls.
Convert the activity_main.xml to CoordinatorLayout using the code listed above.
4- Add a FloatingActionButton tag to android. Support.Design. Widget. FloatingActionButton.
The above code defines two values for layout_gravity: bottom and end value. layout_margin also specifies the distance it should have from the page, and the standard value to be included in the attribute is 16dp.
5- We will implement the project.
6- After executing the project, we will see that the button with the icon that we have defined will be displayed at the bottom right.
7- If we want to move the floating button to the left, we must define layout_gravity as follows:
8- start is the opposite of the end, which means the beginning of the screen.
9- We will run the project again.
10- FAB background color is received and determined by default using the color accent.
11- To change the background color, we must also change the property of the app: background Tint. Like the following:
12- To change the button's size, we must use the app: font size. This means it is possible to resize the button using the app: font size, which accepts two values. Normal and mini values
By entering the following code, we will change the size of the button to a small size, and if we do not make any changes, the button's size will be normal.
13- We can use the app: ripple Color property to apply a change that makes the color a little darker when the button is clicked and changes color.
14- But if we use ripple Color, we can apply a new color. Like the following:
15- In the next steps, we need to define an event for the floating button.
16- Also, pay attention to the codes inserted below.
But in newer versions of Android Studio, this is not necessary.
17- We will implement the project.
18- Click on FloatingActionButton.
19- After running the project, we see that the toast was successful.
In this part of the tutorial, you will get acquainted with creating a floating button and changing its color and size. If you follow the steps inserted in this tutorial carefully, you can easily create a floating button and use it.
Switch Button
In the previous section, we talked about floating buttons, which were used for messaging apps and were mostly located at the bottom right of the screen. In this part of the tutorial, we also want to talk about Switch Buttons that are used to enable or disable.
Switch Buttons have two modes: ON or ON, OFF or ON. This button has many uses, and for example, in the Instagram virtual network application in the settings section, we can see a large number of these buttons that can be used to change the settings. You can also use the Switch Buttons to change the theme from dark to light in other situations. In general, it can be said that the Switch Button has two modes, and two values are used to select one of them. In other words, they are logical and do not have more than two values.
1- We create a new project in Android Studio and choose the desired name. The name chosen in this tutorial for this project is Switch.
2- The activity used in this training is of the Empty Activity type.
3- It should be noted that the language we have to choose in this project and training in Java.
4- In the activity layout, we add a Switch and a TextView.
5- It should be noted that the Switch can be added in two ways, drag & drop, manually, and text.
6- The codes that should be in the activity_main.xml section are as follows:
.jpg "As their name suggests, the hide button is a float that is placed on the page when designing or developing an application-by-application designers and developers, and of course, it should be noted that by scrolling the page, they do not move and remain on the page. Of course, the choice of their location is the responsibility of the developers. These types of buttons are mostly used in messaging applications or their management such as Gmail. In this part of the tutorial, we want to tell you about how to create floating buttons.")
7- After defining these two widgets, we need to define a Listener for the Switch button in the Activity class.
8- The codes that should be in the MainActivity.java section are as follows:
Note that we must use setOnCheckedChangeListener () for Switch Buttons. Because the Switch Buttons are not like the usual buttons to use setOnClickListener ().
9- Inside this method, we need to create a method and name it onCheckedChanged.
10- The second parameter of this method is boolean, which we have specified with the name b.
11- We define a condition as follows:
By inserting the above code and the condition listed above, we cause it to check that if b is equal to true, it means that the button is active, and then the first part of the condition will be executed. Otherwise, when b is equal to false, the button is inactive, and the second part of the condition must be executed.
12- We will implement the project.
13- After running the project, we see that the button is inactive by default.
14- Click on the button to activate it.
15- By activating the button, the first part that I entered in the conditional code will be executed, and the phrase "active" will be displayed inside TextView.
16- If we turn the button back to inactive, we will see that the phrase "inactive" will be displayed. That is, the second part of the condition will be inserted.
17- In some cases, we may want to be informed whether the buttons are active or inactive outside the listener, in which case we use the isChecked () method.
18- Add a Button to the Active.
19- The codes that must be entered in activity_main.xml are as follows:
20- Then, we must define a condition.
In the code above, if mSwitch. IsChecked () has a true value, and if the Switch Button is active, its part is inserted as a condition. Otherwise, if it is inactive, the second part of the condition will be fulfilled.
21- The complete and final code that should be in the MainActivity.java section is as follows:
22- We will implement the project.
23- Using isChecked (), we can check the status of the button whenever needed.
In this part of the training, you were able to get acquainted with the floating button and successfully launch and execute the project.
DotNek Android development services