How to run fullscreen in an Android Chrome app: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
No edit summary
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Google recently added a little trick to Chrome, allowing apps to become full screen. It works on both the Desktop and Android devices. You'll need to be running Chrome Version 28 or newer.
This works on both the Desktop and Android devices.


To use it, add a button to your app with the following code:
To use it, add a button to your app with the following code:
<pre>
<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
// JavaScript
function btnChrome_onclick() {
  document.documentElement.webkitRequestFullScreen();
}
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
' Basic
Function btnChrome_onclick()
Function btnChrome_onclick()
   document.documentElement.webkitRequestFullScreen()
   document.documentElement.webkitRequestFullScreen()
End Function
End Function
</pre>
</syntaxhighlight>
</tabber>
 
After going to full screen, a message is displayed telling how to go back: swipe down on an Android device or hit escape on the desktop.
After going to full screen, a message is displayed telling how to go back: swipe down on an Android device or hit escape on the desktop.


Line 12: Line 25:


If you want to execute some code after the resize (perhaps to move controls to take advantage of the larger screen, do the following:
If you want to execute some code after the resize (perhaps to move controls to take advantage of the larger screen, do the following:
<pre>
 
<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
// JavaScript
function window_onresize() {
  console.log('resize')
  // … do any housekeeping
}
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
' Basic
Function window_onresize()
Function window_onresize()
   Print "resize"
   Print "resize"
   '… do any housekeeping
   '… do any housekeeping
End Function
End Function
</pre>
</syntaxhighlight>
</tabber>
 


If you want hide the button if you are not using Chrome, add this code to your global code:
If you want hide the button if you are not using Chrome, add this code to your global code:
<pre>
<tabber>
  If Not window.chrome Then btnChrome.hide()
JavaScript=
</pre>
<syntaxhighlight lang="JavaScript">
// JavaScript
if (!window.chrome) btnChrome.hide();
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
' Basic
If Not window.chrome Then btnChrome.hide()
</syntaxhighlight>
</tabber>
 


A few gotchas:
A few gotchas:
<ul>
<ul>
<li>This won't work with the Android Browser or iOS.
<li>This won't work with iOS.  
<li>This won't work with PhoneGap, as long as it still uses the Android Browser.
<li>It seems to have to be done from a button: just putting it in Global Code does not work.
<li>It seems to have to be done from a button: just putting it in Global Code does not work.
</ul>
</ul>


Let us know if you find out anything more about this trick!
 
'''Built-in Fullscreen Mode in Chrome for Android'''
 
Alternatively, any AppStudio web app can run in fullscreen mode on Chrome for Android by opening the app in the browser, then:
 
<ul>
<li>Tapping the '''Menu''' button (three vertical dots) in the upper right-hand corner of the screen (or tap the hardware menu button on those devices having one)
<li>Selecting '''Add to homescreen''' from the menu
<li>Tapping the '''Add''' button in the pop up dialog
<li>Then, from the home screen, tap the app icon to open in fullscreen mode.
</ul>
 
This is a newer Chrome feature than the first method described above and is typically the preferable option.

Latest revision as of 22:59, 12 November 2020

This works on both the Desktop and Android devices.

To use it, add a button to your app with the following code:

// JavaScript
function btnChrome_onclick() {
  document.documentElement.webkitRequestFullScreen();
}

' Basic
Function btnChrome_onclick()
  document.documentElement.webkitRequestFullScreen()
End Function

After going to full screen, a message is displayed telling how to go back: swipe down on an Android device or hit escape on the desktop.

Here's how it looks in action.

If you want to execute some code after the resize (perhaps to move controls to take advantage of the larger screen, do the following:

// JavaScript
function window_onresize() {
  console.log('resize')
  // … do any housekeeping
}

' Basic
Function window_onresize()
  Print "resize"
  '… do any housekeeping
End Function


If you want hide the button if you are not using Chrome, add this code to your global code:

// JavaScript
if (!window.chrome) btnChrome.hide();

' Basic
If Not window.chrome Then btnChrome.hide()


A few gotchas:

  • This won't work with iOS.
  • It seems to have to be done from a button: just putting it in Global Code does not work.


Built-in Fullscreen Mode in Chrome for Android

Alternatively, any AppStudio web app can run in fullscreen mode on Chrome for Android by opening the app in the browser, then:

  • Tapping the Menu button (three vertical dots) in the upper right-hand corner of the screen (or tap the hardware menu button on those devices having one)
  • Selecting Add to homescreen from the menu
  • Tapping the Add button in the pop up dialog
  • Then, from the home screen, tap the app icon to open in fullscreen mode.

This is a newer Chrome feature than the first method described above and is typically the preferable option.