Develop Reference

How to get Viewport Height Between Bars on Mobile? (React)

I would like to know the exact device viewport height between the top bar and bottom bar on IOS, Android, Safari, Chrome, etc. Is this possible?
Top bar meaning search bar, and bottom bar meaning nav bar.
const visibleMobileHeight = viewportHeight - topBarHeight - bottomBarHeight;
I would like my application to stay between these bars no matter what, in all situations, all scenarios.
vw, vh doesnt work because that gives the entire screen size including bars.
Currently, my application is obscured by the bars, it's kind of annoying lol. If you use 100% instead of vh and vw, the application will not render. Position fixed causes a glitch when rotating, the bottom bar forces the content up and leaves an extra space at the bottom.
Example: codesandbox
Any help would be appreciated!

ANativeWindow_getHeight subtracts nav bar height sometimes

I have a C++ app that runs as the home app. I am testing on Android 5.0.2.
When I restart my app ANativeWindow_getHeight returns to me a height of 752. This is the screen height minus the nav bar at the bottom. This is the result even though the nav bar is not showing and the area of the window is indeed 800 pixels.
When I reboot the device and it launches my home app immediately, ANativeWindow_getHeight returns the actual window height of 800.
Is there anyway I can reliably get the actual window height in all scenarios?

Status bar height on s8+ in full screen mode

I've previously used some of the solutions on this question to offset a PopUpWindow window directly underneath the status bar. This works fine on an S8+ (which reports a status bar height of 84 pixels) as long as the app has not been set as a "Full Screen App".
If the app has been set to be a "Full Screen App" under Settings -> Display -> Full Screen Apps, the PopUpWindow will not display directly beneath the (still visible) status bar. Although the system still reports a status bar height of 84 pixels, the correct offset at this point is 0.
I can work around this by calculating the aspect ratio of the screen and if it is 1.9388889, then the app is in full screen mode, so the PopUpWindow offset can be set to 0.
However, this feels fragile and I'm not sure how this will work on other devices that support tall aspect ratios (LG6, etc). Ideally I would have a way to detect if an app is running in full screen without relying on specific aspect ratios. This seemed ideal:
boolean fullScreen = (getWindow().getAttributes().flags & WindowManager.LayoutParams.FLAG_FULLSCREEN) != 0;
...but it returns false on an S8+ running an app set to be a Full Screen App. It appears Full Screen Mode and Full Screen App are two distinct concepts.
Rather than using specific aspect ratios, is there a better way to detect something is running as a Full Screen App? Or, a more robust way to calculate the status bar offset required, that will handle this Full Screen App scenario?

Adjust height according to keyboard

I'm trying to design a layout similar to LinkedIn screen for sharing an update.
When you enter the screen for the first time the layout is split something like this:
half the screen is an edittext
half the screen is a gallery of images with a bar above the gallery
Now when I click the edittext - the keyboard comes up and it's just as high as the gallery, leaving the bar with the camera icon visible.
How did they design this layout so that the keyboard height is kinda the same as the gallery height?

In fact every keyboard can have different height, so to achieve this you should resize your activity to fit current 'height' when keyboard is shown status.
Tricky part is, android doesn't provides you that current status is keyboard shown status or not, so you should manage this status smart(One tip can be comparing curent height or height/width ratio to check it's resized or not by keyboard.

How do I get the size of the navigation bar on a Kindle tablet?

I'm working with the Kindle Fire HD 8.9", and unlike other Android tablets, its navigation bar (Back, Home, etc.) resides on the right edge of the device rather than the bottom edge. This is causing layout issues for myself since I need to calculate sizes as a percentage of the available screen width.
I've tried Display#getPoint(Point), as the Javadoc wording makes it sound like it will exclude system decor, but it does not for this device. I'm also aware of setting a OnLayoutChangeListener on my root view, but I need to know the available size prior to when this listener is triggered.
So is there a way to get the size of the navigation bar programmatically? I've calculated the size to be 90px, but I want to avoid hardcoding as it's risk-prone.