[Android] Splash screen in standalone app fixes (expo#3029)

* [Android] Initilize AppLoading Screen with background color from app.json

* [Android] Adjust docs for spalsh screen for standalone apps

* Typos

Co-Authored-By: bbarthec <[email protected]>

* Add entry in CHANGELOG & adjust function for checking image dimensions

* Docs style

Co-Authored-By: bbarthec <[email protected]>

* [tools-public] Update xdl

CHANGELOG.md

@@ -6,6 +6,7 @@ This is the log of notable changes to the Expo client that are developer-facing.
 
 ### 🛠 Breaking changes
 
+- corrected behavior of splash screen image based on `resizeMode` in Android standalone apps (`contain` and `cover` were handled contrary to what docs state) by [@bbarthec](https://github.com/bbarthec) ([#3029](https://github.com/expo/expo/pull/3029))
 - `Speech.speak` changed option name from `voiceIOS` to `voice`. [@Szymon20000](https://github.com/Szymon20000) ([#3423](https://github.com/expo/expo/pull/3423))
 - renamed `Haptic` to `Haptics` and deprecated `Haptics.{notification, impact, selection}` in favour of `Haptics.{notificationAsync, impactAsync, selectionAsync}` [@bbarthec](https://github.com/bbarthec) ([#3330](https://github.com/expo/expo/pull/3330))
 - `ImageManipulator.manipulateAsync` is now accepting `ImageManipulator.FlipType.{Vertical, Horizontal}` as flipping action parameter and `ImageManipulator.SaveFormat.{JPEG, PNG}` as saving option [@bbarthec](https://github.com/bbarthec) ([#3245](https://github.com/expo/expo/pull/3245))

android/expoview/src/main/java/host/exp/exponent/experience/ReactNativeActivity.java

@@ -148,7 +148,7 @@ protected void onCreate(Bundle savedInstanceState) {
     mLayout.addView(mContainer);
     mLoadingView = new LoadingView(this);
     if (!Constants.isStandaloneApp() || Constants.SHOW_LOADING_VIEW_IN_SHELL_APP) {
-      mContainer.setBackgroundColor(ContextCompat.getColor(this, R.color.white));
+      mContainer.setBackgroundColor(ContextCompat.getColor(this, R.color.splashBackground));
       mLayout.addView(mLoadingView);
     }
 

docs/pages/versions/unversioned/guides/splash-screens.md

@@ -75,15 +75,15 @@ Notice that in the last example, we stretched the image to fill the entire width
 Any of the splash options can be configured on a per-platform basis by nesting the configuration under the `android` or `ios` keys within `app.json` (the same as how you would customize an icon for either platform). In addition to this, certain configuration options are only available on iOS or Android.
 
 - On iOS, you can set [ios.splash.tabletImage](../../workflow/configuration/#tabletimage) if you would like to have a different splash image on iPads.
-- On Android, you can set splash images for [different device DPIs](../../workflow/configuration/#ldpi), from `ldpi` to `xxxhdpi`.
+- On Android, you can set splash images for [different device DPIs](../../workflow/configuration/#android), from `mdpi` to `xxxhdpi`.
 
 ### Using `AppLoading` and/or `SplashScreen`
 
 As long as `AppLoading` is the only component rendered in your application, your splash screen will remain visible. We recommend using `AppLoading` while caching assets or fetching any data from `AsyncStorage` to set the app up. However, if you want to control the moment of splash screen visibility change use `SplashScreen`.
 
 Read more about [AppLoading](../../sdk/app-loading/) and [SplashScreen](../../sdk/splash-screen/).
 
-### Differences between environments
+### Differences between environments - iOS
 
 Your app can be opened from the Expo client or in a standalone app, and it can be either published or in development. There are slighty differences in the splash screen behavior between these environments.
 
@@ -93,6 +93,18 @@ Your app can be opened from the Expo client or in a standalone app, and it can b
 - **In the middle**, we are in the Expo client and we are loading a published app. Notice that again the splash image does not appear immediately.
 - **On the right**, we are in a standalone app. Notice that the splash image appears immediately.
 
+### Differences between environments - Android
+
+Splash screen behaves in most cases exactly the same as in iOS case.
+
+There is a slight difference when it comes down to **standalone Android applications**.
+In this scenario extra attention should be paid to [`android.splash` section](../../workflow/configuration/#android) configuration inside [`app.json`](../../workflow/configuration/#android).
+
+Depending on the `resizeMode` you will get the following behavior:
+- **cover** - In this mode your app will be leveraging Android's ability to present a static bitmap at the very beginning of the application start. Unfortunately, Android (unlike iOS) is not supporting stretching provided image, so the application will just present given image centered on the screen.
+By default `splash.image` would be used as the `mdpi` resource. It's up to you to provide graphics that meet your expectations and fit the screen dimension. To achieve this, use different resolutions for [different device DPIs](../../workflow/configuration/#android), from `mdpi` to `xxxhdpi`.
+- **contain** - As described in `cover` mode it isn't possible to dynamically adjust image to the screen size at the very beginning of the application start. Therefore, in this mode, at first only background color will be presented and then, when some view hierarchy is mounted, `splash.image` will be shown.
+
 ### Ejected ExpoKit apps
 
 If you run `expo eject` (choosing the ExpoKit option) on iOS and your app already uses the splash API, the resulting ExpoKit project will contain an Interface Builder launch screen file configured correctly for your app. After this, if you want to make changes to your app's splash screen, just edit the Interface Builder file directly.