You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by er...@apache.org on 2020/06/30 13:46:44 UTC

[cordova-plugin-splashscreen] branch master updated: doc(android): various improvements including size specs (#280)

This is an automated email from the ASF dual-hosted git repository.

erisu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cordova-plugin-splashscreen.git


The following commit(s) were added to refs/heads/master by this push:
     new 2ee4ff9  doc(android): various improvements including size specs (#280)
2ee4ff9 is described below

commit 2ee4ff97ff69701fbf0cb53b7c146d975102c048
Author: エリス <er...@users.noreply.github.com>
AuthorDate: Tue Jun 30 22:46:35 2020 +0900

    doc(android): various improvements including size specs (#280)
    
    * Add size specs for Android Splash Screens
    * doc(android): add splashscreen details
    
    Co-authored-by: Mosab A <47...@users.noreply.github.com>
---
 README.md | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 947e2c1..65d25fe 100644
--- a/README.md
+++ b/README.md
@@ -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)
@@ -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" />
@@ -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): -->
@@ -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.


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org