Skip to content

Commit

Permalink
feat(splash-screen): add useDialog and layoutName options for Android (…
Browse files Browse the repository at this point in the history 
…#519)

* feat(splash-screen): add useDialog and layoutName options for Android
* fix immersive style
* the layout background programmatically
* Create default layout programmatically
* fmt
  • Loading branch information
@jcesarmobile
jcesarmobile committed Jul 21, 2021
1 parent 0292dab commit f48733f
Show file tree
Hide file tree
Showing 6 changed files with 268 additions and 48 deletions.
34 changes: 20 additions & 14 deletions splash-screen/README.md
View file
Expand Up @@ -71,19 +71,21 @@ To set the color of the spinner use `spinnerColor`, values are either `#RRGGBB`

These config values are available:

| Prop | Type | Description | Default | Since |
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----- |
| **`launchShowDuration`** | <code>number</code> | How long to show the launch splash screen when autoHide is enabled (in ms) | <code>0</code> | 1.0.0 |
| **`launchAutoHide`** | <code>boolean</code> | Whether to auto hide the splash after launchShowDuration. | <code>true</code> | 1.0.0 |
| **`backgroundColor`** | <code>string</code> | Color of the background of the Splash Screen in hex format, #RRGGBB or #RRGGBBAA. | | 1.0.0 |
| **`androidSplashResourceName`** | <code>string</code> | Name of the resource to be used as Splash Screen. Only available on Android. | <code>splash</code> | 1.0.0 |
| **`androidScaleType`** | <code>'CENTER' \| 'CENTER_CROP' \| 'CENTER_INSIDE' \| 'FIT_CENTER' \| 'FIT_END' \| 'FIT_START' \| 'FIT_XY' \| 'MATRIX'</code> | The [ImageView.ScaleType](https://developer.android.com/reference/android/widget/ImageView.ScaleType) used to scale the Splash Screen image. Only available on Android. | <code>FIT_XY</code> | 1.0.0 |
| **`showSpinner`** | <code>boolean</code> | Show a loading spinner on the Splash Screen. | | 1.0.0 |
| **`androidSpinnerStyle`** | <code>'horizontal' \| 'small' \| 'large' \| 'inverse' \| 'smallInverse' \| 'largeInverse'</code> | Style of the Android spinner. | <code>large</code> | 1.0.0 |
| **`iosSpinnerStyle`** | <code>'small' \| 'large'</code> | Style of the iOS spinner. Only available on iOS. | <code>large</code> | 1.0.0 |
| **`spinnerColor`** | <code>string</code> | Color of the spinner in hex format, #RRGGBB or #RRGGBBAA. | | 1.0.0 |
| **`splashFullScreen`** | <code>boolean</code> | Hide the status bar on the Splash Screen. Only available on Android. | | 1.0.0 |
| **`splashImmersive`** | <code>boolean</code> | Hide the status bar and the software navigation buttons on the Splash Screen. Only available on Android. | | 1.0.0 |
| Prop | Type | Description | Default | Since |
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- | ----- |
| **`launchShowDuration`** | <code>number</code> | How long to show the launch splash screen when autoHide is enabled (in ms) | <code>0</code> | 1.0.0 |
| **`launchAutoHide`** | <code>boolean</code> | Whether to auto hide the splash after launchShowDuration. | <code>true</code> | 1.0.0 |
| **`backgroundColor`** | <code>string</code> | Color of the background of the Splash Screen in hex format, #RRGGBB or #RRGGBBAA. Doesn't work if `useDialog` is true. | | 1.0.0 |
| **`androidSplashResourceName`** | <code>string</code> | Name of the resource to be used as Splash Screen. Only available on Android. | <code>splash</code> | 1.0.0 |
| **`androidScaleType`** | <code>'CENTER' \| 'CENTER_CROP' \| 'CENTER_INSIDE' \| 'FIT_CENTER' \| 'FIT_END' \| 'FIT_START' \| 'FIT_XY' \| 'MATRIX'</code> | The [ImageView.ScaleType](https://developer.android.com/reference/android/widget/ImageView.ScaleType) used to scale the Splash Screen image. Doesn't work if `useDialog` is true. Only available on Android. | <code>FIT_XY</code> | 1.0.0 |
| **`showSpinner`** | <code>boolean</code> | Show a loading spinner on the Splash Screen. Doesn't work if `useDialog` is true. | | 1.0.0 |
| **`androidSpinnerStyle`** | <code>'horizontal' \| 'small' \| 'large' \| 'inverse' \| 'smallInverse' \| 'largeInverse'</code> | Style of the Android spinner. Doesn't work if `useDialog` is true. | <code>large</code> | 1.0.0 |
| **`iosSpinnerStyle`** | <code>'small' \| 'large'</code> | Style of the iOS spinner. Doesn't work if `useDialog` is true. Only available on iOS. | <code>large</code> | 1.0.0 |
| **`spinnerColor`** | <code>string</code> | Color of the spinner in hex format, #RRGGBB or #RRGGBBAA. Doesn't work if `useDialog` is true. | | 1.0.0 |
| **`splashFullScreen`** | <code>boolean</code> | Hide the status bar on the Splash Screen. Only available on Android. | | 1.0.0 |
| **`splashImmersive`** | <code>boolean</code> | Hide the status bar and the software navigation buttons on the Splash Screen. Only available on Android. | | 1.0.0 |
| **`layoutName`** | <code>string</code> | If `useDialog` is set to true, configure the Dialog layout. If `useDialog` is not set or false, use a layout instead of the ImageView. Only available on Android. | | 1.1.0 |
| **`useDialog`** | <code>boolean</code> | Use a Dialog instead of an ImageView. If `layoutName` is not configured, it will use a layout that uses the splash image as background. Only available on Android. | | 1.1.0 |

### Examples

Expand All @@ -103,7 +105,9 @@ In `capacitor.config.json`:
"iosSpinnerStyle": "small",
"spinnerColor": "#999999",
"splashFullScreen": true,
"splashImmersive": true
"splashImmersive": true,
"layoutName": "launch_screen",
"useDialog": true
}
}
}
Expand All @@ -130,6 +134,8 @@ const config: CapacitorConfig = {
spinnerColor: "#999999",
splashFullScreen: true,
splashImmersive: true,
layoutName: "launch_screen",
useDialog: true,
},
},
};
Expand Down

0 comments on commit f48733f

Please sign in to comment.