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

doc(android): various improvements including size specs #280

Merged
merged 2 commits into from
Jun 30, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 55 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,11 @@ This plugin displays and hides a splash screen while your web application is lau
- [Supported Platforms](#supported-platforms)
- [Platform Splash Screen Image Configuration](#platform-splash-screen-image-configuration)
- [Example Configuration](#example-configuration)
- [Android-specific Information](#android-specific-information)
- [Image Layout](#image-layout)
- [`density`](#density)
- [Image Sizing Table](#image-sizing-table)
- [Example Android Configuration](#example-android-configuration)
- [iOS-specific Information](#ios-specific-information)
- [Launch Storyboard Images](#launch-storyboard-images)
- [Designing Launch Storyboard Images](#designing-launch-storyboard-images)
Expand Down Expand Up @@ -100,7 +105,6 @@ projectRoot

```xml
<platform name="android">
<!-- you can use any density that exists in the Android project -->
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi" />
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi" />
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi" />
Expand All @@ -126,7 +130,6 @@ projectRoot
<splash src="res/screen/ios/Default@3x~universal~anyany.png" />
<splash src="res/screen/ios/Default@3x~universal~anycom.png" />
<splash src="res/screen/ios/Default@3x~universal~comany.png" />

</platform>

<!-- Configuration using MRT concept (Recommended, see "Windows-specific information" section for details): -->
Expand All @@ -144,6 +147,56 @@ projectRoot
<preference name="SplashScreenDelay" value="10000" />
```

### Android-specific Information

To effectively create your Android SplashScreen assets, it is important to understand the idiom and sizes used for the assets.

Android defined its assets by the image's layout and `density`.

#### Image Layout

- `land` short for landscape mode
- `port` short for portrait mode

#### `density`

The image's density refers to the number of pixels per square inch. Android, interchangeably refers to this as DPI.

Not all devices have the same pixel size so it is important to create images for all DPI to ensure that the quality of the image for each device is great.

If not all DPI images are considered, some devices might not show a SplashScreen or will use an incorrect DPI image that can result in a blurry scaled image.

#### Image Sizing Table

| size | portrait | landscape |
| :-----: | :-------: | :-------: |
| ldpi | 200x320 | 320x200 |
| mdpi | 320x480 | 480x320 |
| hdpi | 480x800 | 800x480 |
| xhdpi | 720x1280 | 1280x720 |
| xxhdpi | 960x1600 | 1600x960 |
| xxxhdpi | 1280x1920 | 1920x1280 |

#### Example Android Configuration

```xml
<platform name="android">
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi" />
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi" />
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi" />
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi" />
<splash src="res/screen/android/splash-land-xxhdpi.png" density="land-xxhdpi" />
<splash src="res/screen/android/splash-land-xxxhdpi.png" density="land-xxxhdpi" />

<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi" />
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi" />
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi" />
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi" />
<splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi" />
<splash src="res/screen/android/splash-port-xxxhdpi.png" density="port-xxxhdpi" />
</platform>
```

### iOS-specific Information

Launch storyboard images are sized based on scale, idiom, and size classes. It supports all devices, and can be used with split-screen/slide-over multitasking.
Expand Down