Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-26442

Android: Toolbar with "extendBackground" true is too tall if both status bar and navigation bar is transparent

    Details

      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:

      1. Build and run the below code on Android 4.4 or higher.
      2. 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".

      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.

      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

          Activity

            People

            • Assignee:
              jquick Joshua Quick
              Reporter:
              jquick Joshua Quick
              Reviewer:
              Yordan Banev
            • Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-6616
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code