Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(android): Add immersive configuration to Splash #2425

Merged
merged 1 commit into from
Mar 20, 2020
Merged

feat(android): Add immersive configuration to Splash #2425

merged 1 commit into from
Mar 20, 2020

Conversation

xzilja
Copy link
Contributor

@xzilja xzilja commented Feb 8, 2020

This adds additional flag to capacitor config called splashImmersive that allows to hide not only status bar (achieved by using already existing splashFullScreen flag) but also software navigation bar. More info available here https://developer.android.com/training/system-ui/immersive#immersive

This particular configuration uses "Sticky Immersive" approach https://developer.android.com/training/system-ui/immersive#sticky-immersive

closes #2423

@xzilja
Copy link
Contributor Author

xzilja commented Feb 8, 2020

@jcesarmobile I wanted to ask for your help with this one. I'll attach gif below that shows current functionality, you will notice these 2 issues

  1. Navbar is not hidden instantly as statusbar is
  2. if <item name="android:background">@drawable/splash</item> is set inside style, when navbar is hidden screen jumps down, ideally it should remain fixed all the time. If I set it to just black color for example, it is no longer an issue, but it takes a while to see splash screen graphic.

Unfortunately my knowledge of android is not enough to figure out why exactly this is happening. As you can see in #2423 there are few more things I am doing maybe its missing here? I tried adding setOnSystemUiVisibilityChangeListener, but it didn't make any difference. One other thing that is different there is Override for onWindowFocusChanged method, but I have no clue how to apply it inside Splash file atm.

giphy-preview

@jcesarmobile
Copy link
Member

No idea, try with windowBackground instead of background

@xzilja
Copy link
Contributor Author

xzilja commented Feb 9, 2020

Same issue, also tried to add match_parent to android layout width and height. But besides this it does what it needs to do and hides software ui fully. Could you let me know if it is good to merge or if some changes are still needed? Once approved I will add this to documentation as well.

I will continue trying ideas out to fix this "jump" effect as they come.

@xzilja xzilja changed the title [WIP][Android][Splash] Add immersive configuration [Android][Splash] Add immersive configuration Feb 11, 2020
@xzilja
Copy link
Contributor Author

xzilja commented Feb 19, 2020

@jcesarmobile I spent 2h trying to fix this jump today, but came up empty handed. Can this be merged as is, or should we keep looking for solution? Perhaps you could suggest someone I can reach out to that might be able to help?

@xzilja xzilja changed the title [Android][Splash] Add immersive configuration feat(android): Add immersive configuration to Splash Mar 13, 2020
Copy link
Member

@jcesarmobile jcesarmobile left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good.
merging now that the jump was fixed in another PR.
would be good if you could send another PR documenting it on https://github.com/ionic-team/capacitor/blob/master/site/docs-md/apis/splash-screen/index.md
and if you also document splashFullScreen even better.

@xzilja
Copy link
Contributor Author

xzilja commented Mar 21, 2020

Added documentation #2613

@Epameinondas-Theodoropoulos

I still have the same problem. Only the top bar is hidden.
The Navigation bar (bottom one) is still visible.

I have this in my capacitor.config.json
` "plugins": {

"SplashScreen": {
  "backgroundColor": "#07070a",
  "splashFullScreen": true,
  "splashImmersive": true
}

}`

and this is android\app\src\main\res\values\styles.xml

` <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">

    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

`
check the picture below from the splash screen
https://imgur.com/a/CLtGuEC

@faithfulojebiyi
Copy link

I'm also experiencing the same issue with the jump...

@mjatin-globalizeMe
Copy link

For Capacitor, I did like this, and it works fine!

	"SplashScreen": {
		"launchShowDuration": 5000,
		"launchAutoHide": true,
		"splashImmersive": true,
		"androidScaleType": "CENTER_CROP",
		"useDialog": false,
		"backgroundColor": "#63d99f"
	},

@Pacjonek
Copy link

Pacjonek commented Jan 4, 2022

I had a different problem. In my case, the gray bar was displayed in place of the status bar.
I had to add the following line (style.xml):

        <item name="android:background">@android:color/white</item>

or if you want to have white background only during launch:

        <item name="android:windowBackground">@android:color/white</item>
        <item name="android:fitsSystemWindows">true</item>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: Allow fullscreen immersive mode in splash screen
7 participants