@maccesar/titools 2.2.4 → 2.2.8

package/skills/ti-ui/references/icons-and-splash-screens.md

@@ -1,36 +1,36 @@
-# Icons and Splash Screens
+# Icons and splash screens
 
 ## 1. Overview
 
-App icons and splash screens are required for app store submissions and provide visual branding during app launch.
+App icons and splash screens are required for app store submissions and give users a branded first impression.
 
-**Tools for asset generation:**
+Tools for asset generation:
 - [TiCons website](http://ticons.fokkezb.nl/)
 - [TiCons CLI](https://www.npmjs.org/package/ticons)
 - [Android Asset Studio](https://romannurik.github.io/AndroidAssetStudio/index.html)
 
-## 2. Asset Locations
+## 2. Asset locations
 
-| Platform        | Classic Project                         | Alloy Project                             |
+| Platform        | Classic project                         | Alloy project                             |
 | --------------- | --------------------------------------- | ----------------------------------------- |
 | Shared          | `Resources/`                            | `app/assets/`                             |
 | iOS             | `Resources/iphone/` or `Resources/ios/` | `app/assets/iphone/` or `app/assets/ios/` |
 | Android         | `Resources/android/`                    | `app/assets/android/`                     |
 | Android density | `platform/android/res/drawable-*dpi/`   | `app/platform/android/res/drawable-*dpi/` |
 
-## 3. DefaultIcon.png (Recommended)
+## 3. DefaultIcon.png (recommended)
 
-Place a single `DefaultIcon.png` (1024x1024px) in project root. Titanium auto-generates all missing icon sizes.
+Place a single `DefaultIcon.png` (1024x1024 px) in the project root. Titanium auto-generates missing icon sizes.
 
-**Requirements:**
-- Square (equal height/width)
+Requirements:
+- Square (equal height and width)
 - No alpha channel
 - PNG format
-- At least 1024x1024px
+- At least 1024x1024 px
 
-## 4. iOS Icons
+## 4. iOS icons
 
-### App Icons
+### App icons
 
 | Device          | Dimensions | Filename              |
 | --------------- | ---------- | --------------------- |
@@ -40,7 +40,7 @@ Place a single `DefaultIcon.png` (1024x1024px) in project root. Titanium auto-ge
 | iPad retina     | 152x152    | `appicon-76@2x.png`   |
 | iPad Pro        | 167x167    | `appicon-83.5@2x.png` |
 
-### Spotlight & Settings Icons
+### Spotlight and Settings icons
 
 | Device               | Purpose   | Dimensions | Filename                  |
 | -------------------- | --------- | ---------- | ------------------------- |
@@ -51,9 +51,9 @@ Place a single `DefaultIcon.png` (1024x1024px) in project root. Titanium auto-ge
 | Universal retina     | Settings  | 58x58      | `appicon-Small@2x.png`    |
 | iPhone 6 Plus+       | Settings  | 87x87      | `appicon-Small@3x.png`    |
 
-**App Thinning note:** Application icons and launch images are added to the Asset Catalog to support App Thinning. Due to this change, you cannot reference launch image assets from the filesystem (e.g., you cannot set `backgroundImage` to a launch image file).
+App thinning note: Application icons and launch images are added to the Asset Catalog. You cannot reference launch image assets from the filesystem, so you cannot set `backgroundImage` to a launch image file.
 
-### iOS Splash Screens
+### iOS splash screens
 
 | Device                                  | Dimensions | Filename                         |
 | --------------------------------------- | ---------- | -------------------------------- |
@@ -82,25 +82,25 @@ Place a single `DefaultIcon.png` (1024x1024px) in project root. Titanium auto-ge
 | iPad retina landscape                   | 2048x1536  | `Default-Landscape@2x.png`       |
 | iPad retina portrait                    | 1536x2048  | `Default-Portrait@2x.png`        |
 
-### iTunes Artwork (Ad-Hoc builds)
+### iTunes artwork (ad-hoc builds)
 
 | Dimensions | Filename                          |
 | ---------- | --------------------------------- |
 | 512x512    | `iTunesArtwork` (no extension)    |
 | 1024x1024  | `iTunesArtwork@2x` (no extension) |
 
-**Note:** Do not include in App Store builds.
+Note: Do not include in App Store builds.
 
-### iTunes Connect Requirements
+### iTunes Connect requirements
 
 | Purpose        | Dimensions      | Format                   |
 | -------------- | --------------- | ------------------------ |
 | Large app icon | 1024x1024       | JPG/PNG, no transparency |
 | Screenshots    | Device-specific | JPG/PNG, no transparency |
 
-## 5. Android Icons
+## 5. Android icons
 
-### Launcher Icons
+### Launcher icons
 
 | Density | DPI | Dimensions | Location                                            |
 | ------- | --- | ---------- | --------------------------------------------------- |
@@ -111,11 +111,11 @@ Place a single `DefaultIcon.png` (1024x1024px) in project root. Titanium auto-ge
 | xxhdpi  | 480 | 144x144    | `platform/android/res/drawable-xxhdpi/appicon.png`  |
 | xxxhdpi | 640 | 512x512    | `platform/android/res/drawable-xxxhdpi/appicon.png` |
 
-The filename must match the `icon` element in your tiapp.xml file. By default, newly created projects use `Resources/android/appicon.png`.
+The filename must match the `icon` element in your `tiapp.xml`. By default, new projects use `Resources/android/appicon.png`.
 
-### Action Bar Icons
+### Action bar icons
 
-| Density | Dimensions | Classic Location                        | Alloy Location                           |
+| Density | Dimensions | Classic location                        | Alloy location                           |
 | ------- | ---------- | --------------------------------------- | ---------------------------------------- |
 | ldpi    | 18x18      | `Resources/android/images/res-ldpi/`    | `app/assets/android/images/res-ldpi/`    |
 | mdpi    | 24x24      | `Resources/android/images/res-mdpi/`    | `app/assets/android/images/res-mdpi/`    |
@@ -124,9 +124,9 @@ The filename must match the `icon` element in your tiapp.xml file. By default, n
 | xxhdpi  | 72x72      | `Resources/android/images/res-xxhdpi/`  | `app/assets/android/images/res-xxhdpi/`  |
 | xxxhdpi | 144x144    | `Resources/android/images/res-xxxhdpi/` | `app/assets/android/images/res-xxxhdpi/` |
 
-### Small and Contextual Icons
+### Small and contextual icons
 
-Used for notification status bar icons and other small UI elements:
+Used for status bar icons and other small UI elements:
 
 | Density | Dimensions |
 | ------- | ---------- |
@@ -135,13 +135,13 @@ Used for notification status bar icons and other small UI elements:
 | hdpi    | 24x24      |
 | xhdpi   | 32x32      |
 
-### Notification Icons
+### Notification icons
 
-**Important:** Must be white-on-transparent background only.
+Important: Use white-only shapes on transparent backgrounds.
 
-Same density/location structure as action bar icons, but in `platform/android/res/drawable-*dpi/`.
+Same density and location structure as action bar icons, but in `platform/android/res/drawable-*dpi/`.
 
-### Google Play Requirements
+### Google Play requirements
 
 | Purpose         | Dimensions | Format              |
 | --------------- | ---------- | ------------------- |
@@ -150,13 +150,13 @@ Same density/location structure as action bar icons, but in `platform/android/re
 | Feature graphic | 1024x500   | PNG/JPG, no alpha   |
 | Promotional     | 180x120    | PNG/JPG, no alpha   |
 
-## 6. Android Splash Screens
+## 6. Android splash screens
 
 ### Android 12+ (SDK 12.0.0+)
 
-Android 12 uses app icon as splash screen automatically. Use **Adaptive Icons** for best results.
+Android 12 uses the app icon as the splash screen automatically. Use adaptive icons for best results.
 
-**Customize splash background color via theme:**
+Customize splash background color via theme:
 
 ```xml
 <!-- tiapp.xml -->
@@ -193,23 +193,23 @@ Android 12 uses app icon as splash screen automatically. Use **Adaptive Icons**
 </layer-list>
 ```
 
-### Android < 12 (Legacy)
+### Android < 12 (legacy)
 
-Use `default.png` or nine-patch images. Android uses `default.png` (lowercase 'd') for the splash screen filename. This is different from iOS which uses uppercase `Default.png`.
+Use `default.png` or nine-patch images. Android expects `default.png` (lowercase d) for splash screens. iOS uses `Default.png` with an uppercase D.
 
-**Warning:** Do not use `<supports-screens/>` with `android:anyDensity` set to false, as this can cause scaling issues with splash screens.
+Warning: Do not use `<supports-screens/>` with `android:anyDensity` set to false. It can cause scaling issues with splash screens.
 
-#### Nine-Patch Images (Recommended)
+#### Nine-patch images (recommended)
 
 Nine-patch images define stretchable regions for different screen sizes.
 
-**Creating:**
-1. Create PNG with 1px transparent/white border
-2. Mark stretchable areas with black pixels on top/left borders
-3. Mark drawable areas with black pixels on right/bottom borders
-4. Name file with `.9.png` extension
+Creating:
+1. Create a PNG with a 1 px transparent or white border.
+2. Mark stretchable areas with black pixels on the top and left borders.
+3. Mark content areas with black pixels on the right and bottom borders.
+4. Name the file with a `.9.png` extension.
 
-**Usage:**
+Usage:
 ```javascript
 // Reference without .9 in code
 const button = Ti.UI.createButton({
@@ -217,7 +217,7 @@ const button = Ti.UI.createButton({
 });
 ```
 
-#### Density-Specific Splash Screens
+#### Density-specific splash screens
 
 ```
 platform/android/res/
@@ -230,9 +230,9 @@ platform/android/res/
 └── drawable-nodpi/background.9.png  (universal fallback)
 ```
 
-**Warning:** Do not use `drawable/` (without suffix) - causes scaling issues. Use `drawable-nodpi/` for universal images.
+Warning: Do not use `drawable/` (without suffix). It causes scaling issues. Use `drawable-nodpi/` for universal images.
 
-#### Custom Theme Splash Screen
+#### Custom theme splash screen
 
 ```xml
 <!-- platform/android/res/values/mytheme.xml -->
@@ -263,9 +263,9 @@ platform/android/res/
 </android>
 ```
 
-## 7. Localized Splash Screens
+## 7. Localized splash screens
 
-### Android Localization
+### Android localization
 
 Place images in `res-<lang>` folders:
 
@@ -277,11 +277,11 @@ Resources/android/images/
 └── res-long-land-hdpi/default.png
 ```
 
-Localized images take precedence over non-localized.
+Localized images take precedence over non-localized ones.
 
-### iOS Localization
+### iOS localization
 
-Place in `i18n/<lang>/` folder:
+Place them in `i18n/<lang>/`:
 
 ```
 i18n/
@@ -293,11 +293,11 @@ i18n/
     └── Default-568h@2x.png
 ```
 
-## 8. Adaptive Icons (Android 8.0+)
+## 8. Adaptive icons (Android 8.0+)
 
-Adaptive icons have foreground and background layers.
+Adaptive icons use foreground and background layers.
 
-**Structure:**
+Structure:
 ```
 platform/android/res/
 ├── mipmap-anydpi-v26/
@@ -307,7 +307,7 @@ platform/android/res/
 │   └── ic_launcher_background.xml
 ```
 
-**appicon.xml:**
+appicon.xml:
 ```xml
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
@@ -316,34 +316,34 @@ platform/android/res/
 </adaptive-icon>
 ```
 
-## 9. Common Issues
+## 9. Common issues
 
-### Build Fails - Missing Icons
+### Build fails - missing icons
 
-If any app icon files are missing, the build will fail. If launch image files (prefixed with `Default`) are missing, the build will NOT fail. If you have a `DefaultIcon.png` in the project root, the Titanium SDK will auto-generate any missing iTunesArtwork files.
+If any app icon files are missing, the build fails. If launch image files (prefixed with `Default`) are missing, the build does not fail. If you have a `DefaultIcon.png` in the project root, the Titanium SDK auto-generates missing iTunesArtwork files.
 
-**Solution:** Add `DefaultIcon.png` (1024x1024) to project root for auto-generation.
+Solution: Add `DefaultIcon.png` (1024x1024) to the project root for auto-generation.
 
-### Android Splash Stretched/Distorted
+### Android splash stretched or distorted
 
-**Solution:** Use nine-patch images or `drawable-nodpi` folder.
+Solution: Use nine-patch images or the `drawable-nodpi` folder.
 
-### iOS Icons Not Updating
+### iOS icons not updating
 
-**Solution:**
-1. Clean project
-2. Delete `build/` folder
-3. Rebuild
+Solution:
+1. Clean the project.
+2. Delete the `build/` folder.
+3. Rebuild.
 
-### Android 12 Splash Not Showing Custom Image
+### Android 12 splash not showing custom image
 
-**Solution:** Android 12+ uses app icon by default. Customize via theme's `windowSplashScreenBackground` only.
+Solution: Android 12+ uses the app icon by default. You can only customize the background color via `windowSplashScreenBackground`.
 
-## 11. iOS Launch Files (Storyboards)
+## 11. iOS launch files (storyboards)
 
-Since iOS 8, Apple recommends using Launch Files (Storyboards) instead of multiple `Default*.png` images. This allows a single file to support all device sizes and slims down the IPA.
+Since iOS 8, Apple recommends launch storyboards instead of multiple `Default*.png` images. You get one file that works across device sizes and a smaller IPA.
 
-### Enabling Launch Storyboards
+### Enabling launch storyboards
 
 In the `<ios>` section of `tiapp.xml`:
 
@@ -351,7 +351,7 @@ In the `<ios>` section of `tiapp.xml`:
 <enable-launch-screen-storyboard>true</enable-launch-screen-storyboard>
 ```
 
-### Customizing Background Color
+### Customizing background color
 
 Set a default background color for the launch screen and the gap before the first view opens:
 
@@ -359,28 +359,28 @@ Set a default background color for the launch screen and the gap before the firs
 <default-background-color>#C7172C</default-background-color>
 ```
 
-### Using Images in Storyboards
+### Using images in storyboards
 
-To use an image in a custom native Storyboard:
-1. Set the `Image` property of an *Image View* to the path under `app/assets/` without the extension or modifiers.
-2. **Important (App Thinning)**: If `use-app-thinning` is enabled, you must use the name of the generated asset catalog. This is a hash based on the image path.
+To use an image in a native Storyboard:
+1. Set the Image View's `Image` property to the path under `app/assets/` without extension or modifiers.
+2. App thinning note: If `use-app-thinning` is enabled, use the generated asset catalog name.
    - Build the app.
-   - Look up the `[hash].imageset` under `build/iphone/Assets.xcassets/`.
-   - Use that `[hash]` value in the Storyboard.
+   - Find the `[hash].imageset` under `build/iphone/Assets.xcassets/`.
+   - Use that hash value in the Storyboard.
 
-### Launch File Cache
+### Launch file cache
 
-iOS caches launch screen snapshots. If changes aren't appearing:
+iOS caches launch screen snapshots. If changes do not appear:
 1. Reset Content and Settings in the Simulator.
 2. Run `ti clean` or Project > Clean.
 
-## Best Practices
+## Best practices
 
-1. **Use DefaultIcon.png** for automatic icon generation
-2. **Use nine-patch** for Android splash screens
-3. **Test on multiple densities** especially Android
-4. **Keep icons simple** - Details lost at small sizes
-5. **No alpha channel** on app icons
-6. **Square icons only** - Equal width/height
-7. **Clean project** after icon changes
-8. **Use adaptive icons** for Android 8.0+
+1. Use `DefaultIcon.png` for automatic icon generation.
+2. Use nine-patch for Android splash screens.
+3. Test on multiple densities, especially Android.
+4. Keep icons simple. Details vanish at small sizes.
+5. No alpha channel on app icons.
+6. Square icons only.
+7. Clean the project after icon changes.
+8. Use adaptive icons for Android 8.0+.