[TIMOB-19769] Android: Hide the Soft Navigation Bar

GitHub Issue	n/a
Type	New Feature
Priority	High
Status	Open
Resolution	Unresolved
Affected Version/s	Release 5.0.1, Release 5.0.2, Release 5.0.0
Fix Version/s	n/a
Components	Android
Labels	2019-cl, Android, module_navbar, navigationbar, qe-testadded
Reporter	Ricardo Ramirez
Assignee	Unknown
Created	2015-10-22T21:56:38.000+0000
Updated	2019-11-07T00:41:48.000+0000

Description

Issue description:

Customer needs to hide the navigation bar (Not the title bar at the top but the bar at the bottom which has the back and home button). Nexus devices have this on screen navigation bar. Android allows developers to hide the navigation bar http://developer.android.com/training/system-ui/navigation.html. Customer primarily need to use it to hide the bar during launching of the app. The navigation bar cuts off the splash screen. **Image screen shot attached

Attachments

File	Date	Size
Captura de pantalla 2015-12-22 a las 1.02.54 p.m..png	2015-12-23T16:45:53.000+0000	120170
SplashScreen.png	2015-10-22T21:56:08.000+0000	2677978

Comments

Ashraf Abu 2015-12-09

PR: https://github.com/appcelerator/titanium_mobile/pull/7552
Ashraf Abu 2015-12-10

PR merged.
Josh Longton 2016-01-14

Putting <fullscreen>true</fullscreen> in the tiapp.xml does not hide the nav bar. checked on android 6.0 and android 4.4.2 emulator. Reopening Tested on: nexus 6p (6.0.1) Android emulator (4.4.2) Mac OSX El Capitan 10.11 (15A284) Studio: 4.4.0.201511241829 Ti SDK: 5.2.0.v20160111111831 Appc NPM: 4.2.2 App CLI: 5.1.0 Node v4.2.4
Ashraf Abu 2016-01-14

[~jlongton] Does this work on a non Android 6.0 for you?
Josh Longton 2016-01-14

[~msamah] No it doesn't work on any devices I have tested on, I have also tested on the nexus 5 (5.1.1) and got the same results

Ashraf Abu 2016-01-14

[~jlongton] Tested with 5.2.0.v20160111111831. No issues. My app.js is empty so as to show only the splashscreen. Here's what is in my tiapp.xml (code below). Line 11 is where I set fullscreen to true. Do note, it takes a slight moment for the navigation bar to hide. (It's an animation) Once you click on the app, it will actually make the navigation bar appear again. It will only hide again when you reset the app. If everything is okay, let me know and you can also resolve the ticket.

   <?xml version="1.0" encoding="UTF-8"?>
   <ti:app xmlns:ti="http://ti.appcelerator.org">
       <id>sg.com.appcelerator</id>
       <name>CrashThis</name>
       <version>1.0</version>
       <publisher>msamah</publisher>
       <url>http://www.appcelerator.com<;/url>
       <description>undefined</description>
       <copyright>2015 by msamah</copyright>
       <icon>appicon.png</icon>
       <fullscreen>true</fullscreen>
       <navbar-hidden>false</navbar-hidden>
       <analytics>true</analytics>
       <property name="ti.ui.defaultunit" type="string">dp</property>
       <ios>
           <plist>
               <dict>
                   <key>UISupportedInterfaceOrientations~iphone</key>
                   <array>
                       <string>UIInterfaceOrientationPortrait</string>
                   </array>
                   <key>UISupportedInterfaceOrientations~ipad</key>
                   <array>
                       <string>UIInterfaceOrientationPortrait</string>
                       <string>UIInterfaceOrientationPortraitUpsideDown</string>
                       <string>UIInterfaceOrientationLandscapeLeft</string>
                       <string>UIInterfaceOrientationLandscapeRight</string>
                   </array>
                   <key>UIRequiresPersistentWiFi</key>
                   <false/>
                   <key>UIPrerenderedIcon</key>
                   <false/>
                   <key>UIStatusBarHidden</key>
                   <false/>
                   <key>UIStatusBarStyle</key>
                   <string>UIStatusBarStyleDefault</string>
               </dict>
           </plist>
       </ios>
       <android xmlns:android="http://schemas.android.com/apk/res/android">
           <manifest/>
       </android>
       <mobileweb>
           <precache/>
           <splash>
               <enabled>true</enabled>
               <inline-css-images>true</inline-css-images>
           </splash>
           <theme>default</theme>
       </mobileweb>
       <modules>
       </modules>
       <deployment-targets>
           <target device="android">true</target>
           <target device="ipad">true</target>
           <target device="iphone">true</target>
           <target device="mobileweb">true</target>
           <target device="windows">false</target>
       </deployment-targets>
       <sdk-version>5.2.0.v20160111111831</sdk-version>
   
   </ti:app>

Ashraf Abu 2016-01-20

[~jlongton] May I know the status for this?

Srikanth Sombhatla 2016-01-28

[~msamah] There seems to be an edge case with this fix when using with Ti.Camera + overlay. Here is the crash dump.

   01-28 19:41:58.344: E/TiApplication(19374): (main) [569,569] Sending event: exception on thread: main msg:java.lang.RuntimeException: Unable to start activity ComponentInfo{com.titanium.test/ti.modules.titanium.media.TiCameraActivity}: android.util.AndroidRuntimeException: requestFeature() must be called before adding content; Titanium 1.0,N/A,N/A
   01-28 19:41:58.344: E/TiApplication(19374): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.titanium.test/ti.modules.titanium.media.TiCameraActivity}: android.util.AndroidRuntimeException: requestFeature() must be called before adding content
   01-28 19:41:58.344: E/TiApplication(19374): 	at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2325)
   01-28 19:41:58.344: E/TiApplication(19374): 	at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2387)
   01-28 19:41:58.344: E/TiApplication(19374): 	at android.app.ActivityThread.access$800(ActivityThread.java:151)
   01-28 19:41:58.344: E/TiApplication(19374): 	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1303)
   01-28 19:41:58.344: E/TiApplication(19374): 	at android.os.Handler.dispatchMessage(Handler.java:102)
   01-28 19:41:58.344: E/TiApplication(19374): 	at android.os.Looper.loop(Looper.java:135)
   01-28 19:41:58.344: E/TiApplication(19374): 	at android.app.ActivityThread.main(ActivityThread.java:5254)
   01-28 19:41:58.344: E/TiApplication(19374): 	at java.lang.reflect.Method.invoke(Native Method)
   01-28 19:41:58.344: E/TiApplication(19374): 	at java.lang.reflect.Method.invoke(Method.java:372)
   01-28 19:41:58.344: E/TiApplication(19374): 	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903)
   01-28 19:41:58.344: E/TiApplication(19374): 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:698)
   01-28 19:41:58.344: E/TiApplication(19374): Caused by: android.util.AndroidRuntimeException: requestFeature() must be called before adding content
   01-28 19:41:58.344: E/TiApplication(19374): 	at com.android.internal.policy.impl.PhoneWindow.requestFeature(PhoneWindow.java:302)
   01-28 19:41:58.344: E/TiApplication(19374): 	at android.app.Activity.requestWindowFeature(Activity.java:3605)
   01-28 19:41:58.344: E/TiApplication(19374): 	at org.appcelerator.titanium.TiBaseActivity.onCreate(TiBaseActivity.java:627)
   01-28 19:41:58.344: E/TiApplication(19374): 	at ti.modules.titanium.media.TiCameraActivity.onCreate(TiCameraActivity.java:139)
   01-28 19:41:58.344: E/TiApplication(19374): 	at android.app.Activity.performCreate(Activity.java:5990)
   01-28 19:41:58.344: E/TiApplication(19374): 	at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1106)
   01-28 19:41:58.344: E/TiApplication(19374): 	at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2278)

Here is the app.js

       var self = Ti.UI.createWindow();
       var cameraOverlay = Titanium.UI.createView({
       	backgroundColor: '#FF00FFAA'
       });
     
       var cameraOverlayButton = Titanium.UI.createImageView({
           bottom: 100,
           image: '/appcelerator_small.png',
       });
       cameraOverlay.add(cameraOverlayButton);
     
       cameraOverlay.addEventListener('click', function(e){
       	Ti.API.info("taking pic");
           Ti.Media.takePicture();
       });
     
       self.addEventListener("postlayout", postlayoutHandler);
       function postlayoutHandler(e) {
           self.removeEventListener("postlayout", postlayoutHandler);
           Titanium.Media.showCamera({
               overlay: cameraOverlay,
               showControls: false,
               success: function(e) {
                     Ti.API.info('# SUCCESS : '+ JSON.stringify(e));
               },
               cancel: function(e) {
                     Ti.API.info('# CANCEL : '+e.error);
                  
               },
               error: function(e) {
                     Ti.API.info('# ERROR : '+ e.code +' : '+ e.error);
                  
               },
               mediaTypes:Ti.Media.MEDIA_TYPE_PHOTO,
           });
       }
       self.open();

Srikanth Sombhatla 2016-01-28

[~msamah] Since setSystemUiVisibility is safe to call after onCreate, it could be internally changing the window composition. Using setFullscreen(true) after super.onCreate could work in this case since we are not using window flags to set full screen mode. https://github.com/ashcoding/titanium_mobile/blob/da0ba48a38b07142e53a99ca1af7023ee727af5f/android/modules/media/src/java/ti/modules/titanium/media/TiCameraActivity.java#L139
Ashraf Abu 2016-02-02

5_2_X PR https://github.com/appcelerator/titanium_mobile/pull/7663 For your review, [~ssombhatla]
Ashraf Abu 2016-02-02

[~jlongton] The PR fix above is for a separate issue that is not related to what you mentioned. If your issue is okay, this ticket should be resolvable after [~ssombhatla] reviews for an edge case issue.
Ashraf Abu 2016-02-02

PR7663 merged for 5_2_X. Master PR: https://github.com/appcelerator/titanium_mobile/pull/7664
Ashraf Abu 2016-02-02

Master PR merged.
Lokesh Choudhary 2016-02-04

Verified the implementation. The Soft NavigationBar hides when splash screen is visible with property <fullscreen>true</fullscreen> set to true in the tiapp.xml. Checked with the code below: setTimeout(function(){ var win = Ti.UI.createWindow(); win.open(); },5000); Closing. Environment: Appc Studio : 4.5.0.201601262138 Ti SDK : 5.2.0.v20160203194918 Ti CLI : 5.0.6 Alloy : 1.7.33 MAC Yosemite : 10.10.5 Appc NPM : 4.2.3-2 Appc CLI : 5.2.0-242 Node: 4.2.2 Nexus 6P - Android 6.0
Fokke Zandbergen 2016-03-11

Reopening as the current implementation causes unwanted side-affects. By using the existing <fullscreen> option, you will not only hide the soft navigation bar, but also [select the Theme.AppCompat.NoTitleBar.Fullscreen theme](https://github.com/appcelerator/titanium_mobile/blob/master/android/templates/build/AndroidManifest.xml#L17). Unless you have specified a custom theme this will mean: * The app will hide the Android top status bar as well * The app will have no Action Bar * Because the app has no Action Bar you cannot use TabGroup (which requires Action Bar) We will have to create a separate option for this, or maybe simply always hide the soft navigation bar on splash screens?
Fokke Zandbergen 2016-04-11

[~cng] can we look at the above comment for 5.4, maybe even 5.3 if possible since this change caused a regression?
Ashraf Abu 2016-04-12

[~fokkezb] 5.3 would be extremely hard to get in. 5.4 is more realistic. Is there an ideal behaviour that is acceptable for this ticket to achieve? (Native Android app example)
Fokke Zandbergen 2016-04-12

[~msamah] I think ideally we should not automate anything the user can do himself in AndroidManifest.xml (preferably via tiapp.xml of course). Looking at the PRs for this ticket am I right this is indeed something we have to do right? Or could this be done via a theme as well? The problem is that <fullscreen> was used, which now triggers two different behaviours (see my comment above). I see different possible solutions: * Undo [this](https://github.com/appcelerator/titanium_mobile/blob/master/android/templates/build/AndroidManifest.xml#L17) since that can be done via AndroidManifest.xml using the builtin themes as well. * and/or for this ticket use a different (more descriptive) XML element/property, e.g. <fullscreen-splash>.
Ashraf Abu 2016-04-26

The way this was handled in https://github.com/appcelerator/titanium_mobile/pull/7552/ was by setting setSystemUiVisibility(). This is seen here http://developer.android.com/training/system-ui/immersive.html. This is not done via the AndroidManifest.xml (or tiapp.xml).
Ashraf Abu 2016-04-26

I think might be a good suggestion. Will look into this.
Fokke Zandbergen 2016-04-27

[~msamah] On hindsight I should never have restored <fullscreen> and <navbar-hidden> since this *can* be done through theme. Then we wouldn't have this problem now. But before we introduce <fullscreen-splash> isn't this something the developer could set from code? Like Ti.UI.backgroundColor? We've been introducing/changing/deprecating/removing too many tiapp.xml stuff (run on main thread..)
Ashraf Abu 2016-04-28

That's a good point. I'll look into the possibility of setting it from code.
Ashraf Abu 2016-05-03

[~fokkezb] Took a look more into this. For Splash Screen, at least in Android, this can't be done from code app.js. This is because the splash screen exists even before anything else is created there. Hence, the only other place that it can be manipulated from is the tiapp.xml. Please correct me if I'm wrong. With that, i think fullscreen-splash is a reasonable addition to tiapp.xml. May I know where exactly (which PR) was done that you restored <fullscreen> and <navbar-hidden>. That would help me in implementing <fullscreen-splash>
Fokke Zandbergen 2016-05-03

[~msamah] this is done here: https://github.com/appcelerator/titanium_mobile/blob/master/android/templates/build/AndroidManifest.xml#L17
Fokke Zandbergen 2016-05-06

[~fmiao] that's the project template, I think [~msamah] is right for the place to read the value from?
amit.mishra 2019-02-27

how I detect soft navigation bar or hard navigation bar in android titanium i am facing the problem like when i create any tab bar its behind the soft navigation bar i am adding the bottom+45 height to show but in some devices navigation bar is outside like back button home button are in hardware buttons so my tab bar is so 45 up so how i detect when soft navigation bar is available its up and hardware buttons its bottom 0.

JSON Source