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

Android: Add "safeAreaPadding" property to Ti.UI.Window


    • Story Points:
    • Sprint:
      2018 Sprint 20 SDK, 2018 Sprint 21, 2018 Sprint 22


      On Android, we'd like to add support for Window property "extendSafeArea" so that the window's root view can extend under the Android 9 notch or under an Android 4.4 translucent StatusBar/NavigationBar (see: TIMOB-26246). However, this feature is useless since these insets can be of various sizes and on any side of the screen. An app developer needs to know what region of the screen they can place content so that it won't be covered up by the device's insets.

      Add read-only property "safeAreaPadding" to Ti.UI.Window. This property will return a Titanium ViewPadding dictionary providing the left, top, right, and bottom padding needed to show content safely within the window without overlap. If there are no insets or if "extendSafeArea" is set false, then this property is expected to return all zeros for the padding.

      The idea is that the app developer will then be able to set up their own safe area view and use it as a container as shown below.

      var FLAG_TRANSLUCENT_NAVIGATION = 134217728;
      var FLAG_TRANSLUCENT_STATUS = 67108864;
      var window = Ti.UI.createWindow({
      	extendSafeArea: true,
      	theme: "Theme.AppCompat.NoTitleBar",
      var safeAreaView = Ti.UI.createView({
      	backgroundColor: "green",
      	borderWidth: "4dp",
      	borderColor: "blue",
      window.addEventListener("postlayout", function() {
      	// Padding's left/top/right/bottom can be used as pin positions for the view.

      We should do the same on iOS to handle the following:

      • iPhone X top notch and bottom home indicator.
      • Translucent status bar on all other iOS devices. (Safe area should be beneath status bar.)

      Safe-Area Container Example:
      Test code ExtendSafeAreaContainerTest.js shows how to create a safe-area view container for other child views, guaranteed to always make child content tappable without overlap. The green rectangle with the blue border is the safe-area view within the root white window using an orange border.

      Safe-Area ScrollView Example:
      Test code ExtendSafeAreaScrollViewTest.js shows how to pad a ScrollView. It allows its contents to scroll beneath a translucent status bar and navigation bar, but pads the top and bottom so that the top-most view and bottom-most view can be scrolled within the safe-area, making them tappable.

      Safe-Area TabGroup Example:
      Test code ExtendSafeAreaTabsTest.js shows how to extend tabs to beneath the notches, translucent status bar, and translucent navigation bar. You would not normally use a translucent top status bar with an opaque top tab bar, but this is for testing purposes. Note that the top tab bar hovers over the content and each individual tab completely fills the window. The safe-area padding reported lies within the TabGroup container where content is normally displayed when "extendSafeArea" is set to false.

      Safe-Area DrawerLayout Example:
      Test code ExtendSafeAreaDrawerTest.js shows that a Ti.UI.Toolbar with "extendBackground" to true will automatically handle the safe-area when docked to the top of the screen. The toolbar will extend into the unsafe area of the screen inset while leaving its text and button content within the safe-area. This test code uses a toolbar in the root view and in a drawer side panel.


          Issue Links



              • Assignee:
                jquick Joshua Quick
                jquick Joshua Quick
                Gary Mathews
              • Watchers:
                7 Start watching this issue


                • Created:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Integration