Placing correctly elements on all devices

[Stefun]

Hello the community
I’m facing an issue which is I guess the issue faced by every Android devlopper, placing elements at the good place
Actually on my Galaxy S10+, I’ve placed my top FAB at (screen height - 5 - 55) and the following result is fine :

But while launching on a Galaxy A8, my top FAB seems to be to high in the screen and the result is that :

However, I used the screen height which should not be the same on every device and so, FAB should be at good place (60 from top border)

How can I do to place them correctly whatever the device, can anyone answer this and help me please ?
Do I have to place them at a % of the screen height instead ?

[Zia_Choudhary (Zia Ur Rahman)]

Use floating button instead and use %

[Stefun]

FAB from my side is Floating Action Button

[Zia_Choudhary (Zia Ur Rahman)]

Try using percentage

[Vaibhav]

May be these topics can provide some help…

Centralize FAB - Vertically and Horizontally

This topic will contain a table of contentsHello, 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] …

Bottom Material Navigation Bar

I want to ask community members if someone knows whether this type of Bottom Navigation Bar can be made in Kodular or not. [mio-design_assets_1PrVPyUvR5HvW5KcvIIy9s3T52Vy9jwN9_bottom-app-bar-intro] because I tried making it with bottom navigation bar and fab component it works well and somehow looks like this but the problem is fab button does’nt stick to centre of the screen and if I set it’s margins according to my device it comes to centre but when I tested on another device fab’s position…

I know they are about centralizing fab but see if you get any idea by going through them once

[Stefun]

I’ve read everyhting and this is how I calculate the margin…
offset from border is 0.5% of the biggest screen dimension (width or height)

On my S10+, button is correctly placed but on a Nexus, it looks like this

While doing some tests, it appears that Margin Right is ok but bug is coming from Margin Bottom (value seems too high !)
I’m lost

[Vaibhav]

Maybe the title bar’s height causing the problem? Should you exclude the height of title bar even?Just a guess though. I am not sure enough.

[Stefun]

Thanks for your reply, there is no title bar in this screen but I suspect the system bar which is bigger in height that the Nexus.
By the way, I wonder what is behind screen height, does it includes the system bar and navigation bar or not ?

[Vaibhav]

Sorry I saw that but was late for the reply

@Stefun

does it includes the system bar and navigation bar or not ?

The height includes the status bar even see Boban’s reply here

Centralize FAB - Vertically and Horizontally

Yes, only if your title and status are hidden /Boban

For navigation bar, I am not sure, because some devices out there have the navigation bar embedded in the hardware itself and it’s not on the software part. So in such cases height will only include status and title bar

[Boban (Boban Stojmenovic)]

If you are using Google map component, then use it’s height instead of screen height…

[Stefun]

Thanks a lot @Boban

Sometimes solution is in front of you and you can’t even see it !