Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-26442] Android: Toolbar with "extendBackground" true is too tall if both status bar and navigation bar is transparent

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2018-10-25T14:06:44.000+0000
Affected Version/sn/a
Fix Version/sRelease 7.5.0
ComponentsAndroid
Labelsandroid, toolbar
ReporterJoshua Quick
AssigneeJoshua Quick
Created2018-10-06T00:09:41.000+0000
Updated2018-10-25T19:39:19.000+0000

Description

*Summary:* If 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

FileDateSize
NavBarOpaque.png2018-10-05T23:55:51.000+000035584
NavBarTransparent.png2018-10-05T23:55:51.000+000036041

Comments

  1. Joshua Quick 2018-10-06

    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".
  2. Joshua Quick 2018-10-13

    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.
  3. Joshua Quick 2018-10-18

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/10383
  4. Josh Longton 2018-10-25

    *FR Passed* Waiting on Jenkins to merge
  5. Keerthi Mahalingam 2018-10-25

    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
       

JSON Source