Centralize FAB - Vertically and Horizontally

(Gabriel Farias) #1
This topic will contain a table of contents
Hello, I was going to sleep yesterday when I thought of a way to centralize the FAB (Floating Action Bar), so, mathematically, I thought the following way (Follow step-by-step).

Getting the Width of the Screen
To get the width of the canvas is easy, just add an object (I’ll use an arrangement) and set its width to fill all the available content, it is important that this object has no obstacles and that can fill the entire width of the screen:
image
After that, then the only thing to do is to get the width of the arrangement, as it combre the whole width of the screen, the value returned will be the width of the screen:
image

Positioning the FAB
To position the FAB in the middle of the screen, we will divide the width of the arrangement / screen by 2:
image

See the result:


See, it was not centralized as expected, this is because the positioning of the FAB is not based on the center of the object, but on the right margin and lower margin, we will solve.

To solve this “slip” we have to subtract the result of the previous division by the radius of the FAB, unfortunately I do not know the exact diameter of the FAB, so I relied on the width of an arrangement comparing its size with the FAB, i arrived at the result of 55 pixels at its normal size, does the radius correspond to half the diameter of the circle: 55/2 = 27.5.
If the developers know the exact size of the FAB please let me know :slight_smile:.

Now, with the radius obtained, we can centralize the FAB, do the same, but now subtracting the previous result by 27.5, which is the radius of the FAB:

And the result will be this:

Vertically also
You can also centralize the FAB vertically, just do the same step-by-step, but this time with the height of the object:


FAB centered on the screen:

Final details
Just like at startup, I recommend adding an event for when the screen orientation changes, so the FAB will be centered in both portrait and landscape mode:


Result:

I hope I have explained everything right, and that everything works the same for you, to reproduce this result I am using a G2 bike, which has a 5’’ screen, but with some settings to make things smaller, everything seemed very responsive, test the AIA file on your smartphone and show the result! :slight_smile:.

Source code
FAB_Center.aia (2,7 KB)

17 Likes

(DjJohn) #2

Good job… Keep it up…
:hugs:

3 Likes

(Vaibhav The Developer) #3

Good Job Bro … Keep it up
I :heart: It

4 Likes

(Boban Stojmenovic) #4

FAB

  • big 56
  • small 44

https://community.kodular.io/search?context=topic&context_id=21755&q=Center%20Fab&skip_context=true

Good job btw

/Boban

3 Likes

(Gabriel Farias) #5

Thanks for the info, I did not know that there were already other tutorials about this in other communities, I will edit the post later with the new information!:slight_smile:.

1 Like

(Boban Stojmenovic) #6

Don’t worry, its good as it is

/Boban

1 Like

(Franck G) #7

Great tutorial !
image
I think these block should work instead of an arrangement

3 Likes

(Gabriel Farias) #8

Had not seen these blocks, but thanks for the info! :slight_smile:.

1 Like

(Boban Stojmenovic) #9

Yes, only if your title and status are hidden

/Boban

5 Likes

(Franck G) #10

You’re welcome! :slight_smile:

1 Like

(Gabriel Farias) #11

Well, I’ve been here in this community since the middle of last year, but thanks! :grin:.

2 Likes

(system) closed #12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

0 Likes