diff --git a/.gitignore b/.gitignore index 579cb06ded..a4e832ed03 100644 --- a/.gitignore +++ b/.gitignore @@ -28,8 +28,11 @@ local.properties contents.xcworkspacedata .stencil/ android-template/.gradle/ -android-template/app/app.iml -*.js -*.json +android-template/app/app.iml +*.js +*.json /site/.env /site/.firebase +.gradle/ +.settings/ +.project diff --git a/android/capacitor/src/main/java/com/getcapacitor/Splash.java b/android/capacitor/src/main/java/com/getcapacitor/Splash.java index 4b220f21b1..4d18718f75 100644 --- a/android/capacitor/src/main/java/com/getcapacitor/Splash.java +++ b/android/capacitor/src/main/java/com/getcapacitor/Splash.java @@ -56,6 +56,15 @@ private static void buildViews(Context c) { // https://stackoverflow.com/a/21847579/32140 splashImage.setDrawingCacheEnabled(true); + String backgroundColor = Config.getString(CONFIG_KEY_PREFIX + "backgroundColor"); + try { + if (backgroundColor != null) { + splashImage.setBackgroundColor(Color.parseColor(backgroundColor)); + } + } catch (IllegalArgumentException ex) { + Log.d(LogUtils.getCoreTag(), "Background color not applied"); + } + String scaleTypeName = Config.getString(CONFIG_KEY_PREFIX + "androidScaleType", "FIT_XY"); ImageView.ScaleType scaleType = null; try { @@ -233,7 +242,7 @@ public void run() { spinnerBar.setIndeterminateTintList(colorStateList); } } catch (IllegalArgumentException ex) { - // Do not apply any spinner color. + Log.d(LogUtils.getCoreTag(), "Spinner color not applied"); } } diff --git a/ios/Capacitor/Capacitor/Plugins/SplashScreen.swift b/ios/Capacitor/Capacitor/Plugins/SplashScreen.swift index 96dce77a3b..60e81fd8d3 100644 --- a/ios/Capacitor/Capacitor/Plugins/SplashScreen.swift +++ b/ios/Capacitor/Capacitor/Plugins/SplashScreen.swift @@ -37,11 +37,12 @@ public class CAPSplashScreenPlugin: CAPPlugin { let fadeInDuration = call.get("fadeInDuration", Int.self, defaultFadeInDuration)! let fadeOutDuration = call.get("fadeOutDuration", Int.self, defaultFadeOutDuration)! let autoHide = call.get("autoHide", Bool.self, defaultAutoHide)! + let backgroundColor = getConfigValue("backgroundColor") as? String ?? nil let spinnerStyle = getConfigValue("iosSpinnerStyle") as? String ?? nil let spinnerColor = getConfigValue("spinnerColor") as? String ?? nil showSpinner = getConfigValue("showSpinner") as? Bool ?? false - showSplash(showDuration: showDuration, fadeInDuration: fadeInDuration, fadeOutDuration: fadeOutDuration, autoHide: autoHide, spinnerStyle: spinnerStyle, spinnerColor: spinnerColor, completion: { + showSplash(showDuration: showDuration, fadeInDuration: fadeInDuration, fadeOutDuration: fadeOutDuration, autoHide: autoHide, backgroundColor: backgroundColor, spinnerStyle: spinnerStyle, spinnerColor: spinnerColor, completion: { call.success() }, isLaunchSplash: false) } @@ -60,9 +61,7 @@ public class CAPSplashScreenPlugin: CAPPlugin { image = UIImage(named: "Splash") if image == nil { - print( - "Unable to find splash screen image. Make sure an image called Splash exists in your assets" - ) + print("Unable to find splash screen image. Make sure an image called Splash exists in your assets") } // Observe for changes on frame and bounds to handle rotation resizing @@ -112,9 +111,9 @@ public class CAPSplashScreenPlugin: CAPPlugin { func showOnLaunch() { let launchShowDurationConfig = getConfigValue("launchShowDuration") as? Int ?? launchShowDuration let launchAutoHideConfig = getConfigValue("launchAutoHide") as? Bool ?? launchAutoHide + let launchBackgroundColorConfig = getConfigValue("backgroundColor") as? String ?? nil let launchSpinnerStyleConfig = getConfigValue("iosSpinnerStyle") as? String ?? nil let launchSpinnerColorConfig = getConfigValue("spinnerColor") as? String ?? nil - print("valor de showSpinner\(showSpinner)") let view = bridge.viewController.view view?.addSubview(imageView) @@ -125,12 +124,16 @@ public class CAPSplashScreenPlugin: CAPPlugin { spinner.centerYAnchor.constraint(equalTo: view!.centerYAnchor).isActive = true } - showSplash(showDuration: launchShowDurationConfig, fadeInDuration: 0, fadeOutDuration: defaultFadeOutDuration, autoHide: launchAutoHideConfig, spinnerStyle: launchSpinnerStyleConfig, spinnerColor: launchSpinnerColorConfig, completion: { + showSplash(showDuration: launchShowDurationConfig, fadeInDuration: 0, fadeOutDuration: defaultFadeOutDuration, autoHide: launchAutoHideConfig, backgroundColor: launchBackgroundColorConfig, spinnerStyle: launchSpinnerStyleConfig, spinnerColor: launchSpinnerColorConfig, completion: { }, isLaunchSplash: true) } - func showSplash(showDuration: Int, fadeInDuration: Int, fadeOutDuration: Int, autoHide: Bool, spinnerStyle: String?, spinnerColor: String?, completion: @escaping () -> Void, isLaunchSplash: Bool) { + func showSplash(showDuration: Int, fadeInDuration: Int, fadeOutDuration: Int, autoHide: Bool, backgroundColor: String?, spinnerStyle: String?, spinnerColor: String?, completion: @escaping () -> Void, isLaunchSplash: Bool) { DispatchQueue.main.async { + if backgroundColor != nil { + self.imageView.backgroundColor = UIColor(fromHex: backgroundColor!) + } + let view = self.bridge.viewController.view if self.showSpinner { diff --git a/site/docs-md/apis/splash-screen/index.md b/site/docs-md/apis/splash-screen/index.md index ba7c2d6041..f8e781ec62 100644 --- a/site/docs-md/apis/splash-screen/index.md +++ b/site/docs-md/apis/splash-screen/index.md @@ -70,6 +70,12 @@ If you want to be sure the splash never hides before the app is fully loaded, se Then run `npx cap copy` to apply these changes. +## Background Color + +In certain conditions, especially if the splash screen does not fully cover the device screen, it might happen that the app screen is visible around the corners (due to transparency). Instead of showing a transparent color, you can set a `backgroundColor` to cover those areas. + +Possible values for `backgroundColor` in your `capacitor.config.json` are either `#RGB` or `#ARGB`. + ## Spinner If you want to show a spinner on top of the splash screen, set `showSpinner` to `true` in your `capacitor.config.json`: @@ -96,7 +102,7 @@ For Android, `androidSpinnerStyle` has the following options: For iOS, `iosSpinnerStyle` has the following options: - large (default) -- small +- small To set the color of the spinner use `spinnerColor`, values are either `#RGB` or `#ARGB`. @@ -112,12 +118,13 @@ These config parameters are available in `capacitor.config.json`: "SplashScreen": { "launchShowDuration": 3000, "launchAutoHide": true, + "backgroundColor": "#ffffffff", + "androidSplashResourceName": "splash", + "androidScaleType": "CENTER_CROP", "androidSpinnerStyle": "large", "iosSpinnerStyle": "small", "spinnerColor": "#999999", - "showSpinner": true, - "androidSplashResourceName": "splash", - "androidScaleType": "CENTER_CROP" + "showSpinner": true } } } @@ -127,7 +134,7 @@ These config parameters are available in `capacitor.config.json`: If your splash screen images aren't named "splash.png" but for example "screen.png" you have to change `"androidSplashResourceName": "screen"` in `capacitor.config.json` and change the following files in you're Android app as well: -`android/app/src/main/res/drawable/launch_splash.xml` +`android/app/src/main/res/drawable/launch_splash.xml` replace ```xml @@ -144,7 +151,7 @@ with /> ``` -`android/app/src/main/res/values/styles.xml` +`android/app/src/main/res/values/styles.xml` replace ```xml @@ -167,4 +174,4 @@ with ## API - \ No newline at end of file +