[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
Toolbar
any 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.