[TIMOB-26442] Android: Toolbar with "extendBackground" true is too tall if both status bar and navigation bar is transparent
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | Medium |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2018-10-25T14:06:44.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | Release 7.5.0 |
| Components | Android |
| Labels | android, toolbar |
| Reporter | Joshua Quick |
| Assignee | Joshua Quick |
| Created | 2018-10-06T00:09:41.000+0000 |
| Updated | 2018-10-25T19:39:19.000+0000 |
Description
*Summary:*
If Notice the
Toolbar property "extendBackground" is set true and the top status bar is transparent and the bottom navigation bar is transparent, then the Toolbar will end up being taller than expected. The Toolbar's top padding will be set to the status bar's height and the Toolbar's bottom padding will be set to the navigation bar's height.
*Steps to reproduce:*
Build and run the below code on Android 4.4 or higher.
Notice the Toolbar has too much bottom padding.
var FLAG_TRANSLUCENT_STATUS = 67108864;
var FLAG_TRANSLUCENT_NAVIGATION = 134217728;
var window = Ti.UI.createWindow({
theme: "Theme.AppCompat.NoTitleBar",
windowFlags: FLAG_TRANSLUCENT_STATUS | FLAG_TRANSLUCENT_NAVIGATION,
// windowFlags: FLAG_TRANSLUCENT_NAVIGATION,
// windowFlags: FLAG_TRANSLUCENT_STATUS,
});
window.add(Ti.UI.createView({
backgroundColor: "gray",
width: Ti.UI.FILL,
height: Ti.UI.FILL,
}));
var toolbar = Ti.UI.createToolbar({
title: "My Toolbar",
titleTextColor: "white",
backgroundColor: "blue",
extendBackground: true,
top: 0,
width: Ti.UI.FILL,
});
window.activity.supportToolbar = toolbar;
window.add(toolbar);
window.open();
*Result:*
The Toolbar's bottom padding is set to the height of the translucent navigation bar, as can be seen in attached screenshot "NavBarTransparent.png".
!NavBarTransparent.png|thumbnail!
*Expected Result:*
In this case, the Toolbar's bottom padding is not desired. It's expected to look like attached screenshot "NavBarOpaque.png", where if the bottom navigation bar is opaque, no bottom padding is added to the Toolbar.
!NavBarOpaque.png|thumbnail!
*Notes:*
* This is likely an issue on Google's end since they handling the padding internally.
* This is a low priority issue since most apps (such as Google's apps) don't make both top and bottom system bars transparent at the same time.
* Work-around is to not make the bottom navigation bar translucent... or leave the "extendBackground" property false and color the status bar via a theme.
* Ideally, we would also want to support displaying a Toolbar at the bottom of the screen too. In which case, "extendBackground" should extend down beneath a transparent navigation bar. _(Would we need a new property indicating which direction we want to extend towards?)_
*Recommended Solution:*
Override the Java Toolbar class' fitSystemWindows(Rect) method and strip-off the top or bottom inset before passing the rect over to super.fitSystemWindows(Rect). This will work because Google's base View implementation blindly adds the insets as padding to the view.
Attachments
| File | Date | Size |
|---|---|---|
| NavBarOpaque.png | 2018-10-05T23:55:51.000+0000 | 35584 |
| NavBarTransparent.png | 2018-10-05T23:55:51.000+0000 | 36041 |
FYI: [~ybanev] I think this is a low priority issue, but I happened to find it while testing top and bottom notch support on Android P. When I finish adding "safeAreaRect" property support via [TIMOB-26427], the app developers will be able to position the
Toolbarany way they see fit too without using "extendBackground".This issue needs to be solved in 7.5.0 since it can happen when using the
Ti.UI.Window"extendSafeArea" property for Android P notch/inset support. I have a solution now. Will submit a PR next week.PR (master): https://github.com/appcelerator/titanium_mobile/pull/10383
*FR Passed* Waiting on Jenkins to merge
Verified the fix on SDK 7.5.0.v20181025085349.Working fine. Closing.
Operating System Name = Mac OS X Version = 10.13.6 Architecture = 64bit Node.js Node.js Version = 8.12.0 npm Version = 6.4.1 Titanium CLI CLI Version = 5.1.1 Studio =5.1.2.201810080801 Titanium SDK SDK Version = 7.5.0.v20181025085349 Device = Samsung s5 Android 6,pixel android 9 Emulator = Samsung galaxy s6 android 6,nexus 4.4