Browse Source

[Android] Support for transparent statusbar with current screen rendered behind it (#2274)

* add support to tell screen to place its self underneath the statusbar for android.

* added property to documentation.
Marcus Andersson 7 years ago
parent
commit
8a2946f33f

+ 7
- 0
android/app/src/main/java/com/reactnativenavigation/controllers/Modal.java View File

120
         setAnimation(screenParams);
120
         setAnimation(screenParams);
121
         setStatusBarStyle(screenParams.styleParams);
121
         setStatusBarStyle(screenParams.styleParams);
122
         setNavigationBarStyle(screenParams.styleParams);
122
         setNavigationBarStyle(screenParams.styleParams);
123
+        setDrawUnderStatusBar(screenParams.styleParams);
123
     }
124
     }
124
 
125
 
125
     private void setStatusBarStyle(StyleParams styleParams) {
126
     private void setStatusBarStyle(StyleParams styleParams) {
128
         StatusBar.setTextColorScheme(window.getDecorView(), styleParams.statusBarTextColorScheme);
129
         StatusBar.setTextColorScheme(window.getDecorView(), styleParams.statusBarTextColorScheme);
129
     }
130
     }
130
 
131
 
132
+    private void setDrawUnderStatusBar(StyleParams styleParams) {
133
+        Window window = getWindow();
134
+        if (window == null) return;
135
+        StatusBar.displayOverScreen(window.getDecorView(), styleParams.drawUnderStatusBar);
136
+    }
137
+
131
     private void setNavigationBarStyle(StyleParams styleParams) {
138
     private void setNavigationBarStyle(StyleParams styleParams) {
132
         NavigationBar.setColor(getWindow(), styleParams.navigationBarColor);
139
         NavigationBar.setColor(getWindow(), styleParams.navigationBarColor);
133
     }
140
     }

+ 1
- 0
android/app/src/main/java/com/reactnativenavigation/params/StyleParams.java View File

89
     public StatusBarTextColorScheme statusBarTextColorScheme;
89
     public StatusBarTextColorScheme statusBarTextColorScheme;
90
     public Color statusBarColor;
90
     public Color statusBarColor;
91
     public boolean statusBarHidden;
91
     public boolean statusBarHidden;
92
+    public boolean drawUnderStatusBar;
92
     public Color contextualMenuStatusBarColor;
93
     public Color contextualMenuStatusBarColor;
93
     public Color contextualMenuButtonsColor;
94
     public Color contextualMenuButtonsColor;
94
     public Color contextualMenuBackgroundColor;
95
     public Color contextualMenuBackgroundColor;

+ 5
- 0
android/app/src/main/java/com/reactnativenavigation/params/parsers/StyleParamsParser.java View File

32
         result.statusBarColor = getColor("statusBarColor", getDefaultStatusBarColor());
32
         result.statusBarColor = getColor("statusBarColor", getDefaultStatusBarColor());
33
         result.statusBarHidden = getBoolean("statusBarHidden", getDefaultStatusHidden());
33
         result.statusBarHidden = getBoolean("statusBarHidden", getDefaultStatusHidden());
34
         result.statusBarTextColorScheme = StatusBarTextColorScheme.fromString(params.getString("statusBarTextColorScheme"), getDefaultStatusBarTextColorScheme());
34
         result.statusBarTextColorScheme = StatusBarTextColorScheme.fromString(params.getString("statusBarTextColorScheme"), getDefaultStatusBarTextColorScheme());
35
+        result.drawUnderStatusBar = params.getBoolean("drawUnderStatusBar", getDefaultDrawUnderStatusBar());
35
         result.contextualMenuStatusBarColor = getColor("contextualMenuStatusBarColor", getDefaultContextualMenuStatusBarColor());
36
         result.contextualMenuStatusBarColor = getColor("contextualMenuStatusBarColor", getDefaultContextualMenuStatusBarColor());
36
         result.contextualMenuButtonsColor = getColor("contextualMenuButtonsColor", getDefaultContextualMenuButtonsColor());
37
         result.contextualMenuButtonsColor = getColor("contextualMenuButtonsColor", getDefaultContextualMenuButtonsColor());
37
         result.contextualMenuBackgroundColor = getColor("contextualMenuBackgroundColor", getDefaultContextualMenuBackgroundColor());
38
         result.contextualMenuBackgroundColor = getColor("contextualMenuBackgroundColor", getDefaultContextualMenuBackgroundColor());
281
         return AppStyle.appStyle != null && AppStyle.appStyle.statusBarHidden;
282
         return AppStyle.appStyle != null && AppStyle.appStyle.statusBarHidden;
282
     }
283
     }
283
 
284
 
285
+    private boolean getDefaultDrawUnderStatusBar() {
286
+        return AppStyle.appStyle != null && AppStyle.appStyle.drawUnderStatusBar;
287
+    }
288
+
284
     private StyleParams.Font getDefaultBottomTabsFontFamily() {
289
     private StyleParams.Font getDefaultBottomTabsFontFamily() {
285
         return AppStyle.appStyle == null ? new StyleParams.Font() : AppStyle.appStyle.bottomTabFontFamily;
290
         return AppStyle.appStyle == null ? new StyleParams.Font() : AppStyle.appStyle.bottomTabFontFamily;
286
     }
291
     }

+ 6
- 0
android/app/src/main/java/com/reactnativenavigation/screens/Screen.java View File

62
         createViews();
62
         createViews();
63
         EventBus.instance.register(this);
63
         EventBus.instance.register(this);
64
         sharedElements = new SharedElements();
64
         sharedElements = new SharedElements();
65
+        setDrawUnderStatusBar(styleParams.drawUnderStatusBar);
65
     }
66
     }
66
 
67
 
67
     public void registerSharedElement(SharedElementTransition toView, String key) {
68
     public void registerSharedElement(SharedElementTransition toView, String key) {
106
         setStatusBarHidden(styleParams.statusBarHidden);
107
         setStatusBarHidden(styleParams.statusBarHidden);
107
         setStatusBarTextColorScheme(styleParams.statusBarTextColorScheme);
108
         setStatusBarTextColorScheme(styleParams.statusBarTextColorScheme);
108
         setNavigationBarColor(styleParams.navigationBarColor);
109
         setNavigationBarColor(styleParams.navigationBarColor);
110
+        setDrawUnderStatusBar(styleParams.drawUnderStatusBar);
109
         topBar.setStyle(styleParams);
111
         topBar.setStyle(styleParams);
110
         if (styleParams.screenBackgroundColor.hasColor()) {
112
         if (styleParams.screenBackgroundColor.hasColor()) {
111
             setBackgroundColor(styleParams.screenBackgroundColor.getColor());
113
             setBackgroundColor(styleParams.screenBackgroundColor.getColor());
174
         StatusBar.setHidden(((NavigationActivity) activity).getScreenWindow(), statusBarHidden);
176
         StatusBar.setHidden(((NavigationActivity) activity).getScreenWindow(), statusBarHidden);
175
     }
177
     }
176
 
178
 
179
+    private void setDrawUnderStatusBar(boolean drawUnderStatusBar) {
180
+        StatusBar.displayOverScreen(this, drawUnderStatusBar);
181
+    }
182
+
177
     private void setStatusBarTextColorScheme(StatusBarTextColorScheme textColorScheme) {
183
     private void setStatusBarTextColorScheme(StatusBarTextColorScheme textColorScheme) {
178
         StatusBar.setTextColorScheme(this, textColorScheme);
184
         StatusBar.setTextColorScheme(this, textColorScheme);
179
     }
185
     }

+ 17
- 0
android/app/src/main/java/com/reactnativenavigation/utils/StatusBar.java View File

30
         }
30
         }
31
     }
31
     }
32
 
32
 
33
+    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
34
+    public static void displayOverScreen(View view, boolean shouldDisplay) {
35
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) return;
36
+
37
+        if(shouldDisplay) {
38
+            int flags = view.getSystemUiVisibility();
39
+            flags |= View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
40
+            flags |= View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
41
+            view.setSystemUiVisibility(flags);
42
+        } else {
43
+            int flags = view.getSystemUiVisibility();
44
+            flags &= ~View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
45
+            flags &= ~View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
46
+            view.setSystemUiVisibility(flags);
47
+        }
48
+    }
49
+
33
     @TargetApi(Build.VERSION_CODES.M)
50
     @TargetApi(Build.VERSION_CODES.M)
34
     public static void setTextColorScheme(View view, StatusBarTextColorScheme textColorScheme) {
51
     public static void setTextColorScheme(View view, StatusBarTextColorScheme textColorScheme) {
35
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) return;
52
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) return;

+ 1
- 0
docs/styling-the-navigator.md View File

101
   navBarButtonFontFamily: 'sans-serif-thin', // Change the font family of textual buttons
101
   navBarButtonFontFamily: 'sans-serif-thin', // Change the font family of textual buttons
102
   topBarElevationShadowEnabled: false, // default: true. Disables TopBar elevation shadow on Lolipop and above
102
   topBarElevationShadowEnabled: false, // default: true. Disables TopBar elevation shadow on Lolipop and above
103
   statusBarColor: '#000000', // change the color of the status bar.
103
   statusBarColor: '#000000', // change the color of the status bar.
104
+  drawUnderStatusBar: false, // default: false, will draw the screen underneath the statusbar. Useful togheter with statusBarColor: transparent
104
   collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar image.
105
   collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar image.
105
   collapsingToolBarImage: require('../../img/topbar.jpg'), // Collapsing Toolbar image. Either use a url or require a local image.
106
   collapsingToolBarImage: require('../../img/topbar.jpg'), // Collapsing Toolbar image. Either use a url or require a local image.
106
   collapsingToolBarCollapsedColor: '#0f2362', // Collapsing Toolbar scrim color.
107
   collapsingToolBarCollapsedColor: '#0f2362', // Collapsing Toolbar scrim color.

+ 1
- 0
src/deprecated/platformSpecificDeprecated.android.js View File

149
     statusBarColor: processColor(originalStyleObject.statusBarColor),
149
     statusBarColor: processColor(originalStyleObject.statusBarColor),
150
     statusBarHidden: originalStyleObject.statusBarHidden,
150
     statusBarHidden: originalStyleObject.statusBarHidden,
151
     statusBarTextColorScheme: originalStyleObject.statusBarTextColorScheme,
151
     statusBarTextColorScheme: originalStyleObject.statusBarTextColorScheme,
152
+    drawUnderStatusBar: originalStyleObject.drawUnderStatusBar || false,
152
     topBarReactView: originalStyleObject.navBarCustomView,
153
     topBarReactView: originalStyleObject.navBarCustomView,
153
     topBarReactViewAlignment: originalStyleObject.navBarComponentAlignment,
154
     topBarReactViewAlignment: originalStyleObject.navBarComponentAlignment,
154
     topBarReactViewInitialProps: originalStyleObject.navBarCustomViewInitialProps,
155
     topBarReactViewInitialProps: originalStyleObject.navBarCustomViewInitialProps,