How to Build a Sticker Styles Image Pipeline on iOS & Android

TL;DR

• You’ll build: a mobile feature that converts images into “stickers” with a white outline, drop-shadow, or neon glow effect (exported as a transparent PNG).
• You’ll do: Get SDK access → Install the Sticker Styles SDK → Run the sample app on iOS and Android → Integrate the SDK into your app → Test with sample images.
• You’ll need: a Cybergarden developer account, a test image (with background removed), an iPhone/Android device (or simulators), and Xcode/Android Studio set up.

1) What is the Sticker Styles Pipeline?

What it enables

• Outline border: Automatically generate a crisp outline (stroke) around the subject of an image, typically a white or colored border that makes the image "pop" off any background. This gives the image a die-cut sticker look (mimicking the effect of a sticker's white trim).
• Drop shadow: Add a soft shadow behind the image for depth and a floating effect. The pipeline creates a blurred, offset silhouette of the image in a darker color and layers it beneath, completing the classic sticker appearance.
• Neon glow: Surround the image with a glowing aura as if it's emitting light. This effect uses a bright colored outline with a Gaussian blur, often layered in multiple passes, to produce a neon-like glow around the subject.

When to use it

• User-generated stickers: Use this pipeline in apps where users turn photos or artwork into stickers (for messaging, social posts, AR filters, etc.). It automates adding outlines/glows so users can create polished stickers from ordinary images.
• Creative and marketing content: The outline and glow effects are useful for highlight reels, thumbnails, or promotional graphics where you want an image to stand out. For example, outlining product images can make them stand out on any background, and neon glows can create a futuristic or “highlighted” vibe for special promotions.
• Print preview or die-cut prep: If you’re building an app that lets users design stickers or decals for printing, this pipeline can preview how an image would look with a cut-line border and shadow. (The white outline is often used in printed stickers as a buffer.)

Current limitations

• Requires subject transparency: The pipeline works best if the input image already has a transparent background (or a precise mask of the subject). It doesn’t currently remove backgrounds – you need to provide an image with transparency (or apply a separate background removal step beforehand). If you use a normal photo, the outline will just trace the rectangular photo edge instead of the subject.
• Performance on-device: Generating thick outlines and blurs can be computationally heavy for large images. The underlying morphological operations for outlines have a complexity up to O(m·n) (image pixels × kernel size), so very high-resolution images or very thick borders may be slow on older phones. It's recommended to perform the processing on a background thread and be mindful of memory usage.
• No real-time video support (yet): The pipeline is designed for static images (PNG/JPEG). Applying these effects frame-by-frame in real-time (for video or camera preview) isn’t optimized in the current version. You can use it on a single frame from camera, but not at 30fps stream.
• Limited color customization in API: The default outline is white and default shadow is black; you can change colors via parameters, but dynamic multi-color gradients or complex glow shapes are not built-in. Neon glow currently produces a single-color outer glow; multi-colored neon effects would require additional custom processing.
• Platform constraints: iOS 13+/Android 8+ are the minimum supported OS versions for the SDK. The iOS SDK uses Metal for acceleration under the hood (ensure devices have Metal support), and the Android SDK uses NEON optimized routines on ARM. There is no official web or React Native support at this time – the focus is native mobile SDK integration.

2) Prerequisites

Access requirements

• Create or sign in to the Cybergarden Developer Portal. You’ll need an account to access the Sticker Styles SDK.
• Join the Sticker Styles Beta (if not publicly available). In the portal, navigate to Products → Sticker Styles Pipeline and request access if it’s in preview.
• Accept any beta terms or license agreements presented for using the Sticker Styles SDK.
• Create a project/app ID in the portal (if required). Some SDK versions require registering an app to obtain credentials or to enable API usage tracking.
• Obtain the SDK credentials (if any):

• iOS: You may need to download a config file (e.g., StickerStylesConfig.plist) or note an API key to add to your Xcode project.
• Android: Note any API keys or tokens. For example, if the SDK is distributed via a private Maven repository or GitHub Packages, you’ll get a token to access it.

Done when: You have the necessary access tokens or config files (e.g., an API key or SDK download link) and can see your registered app/project in the Cybergarden portal’s dashboard for Sticker Styles.

Platform setup

iOS

• Xcode 14.0 or newer, targeting iOS 13.0+.
• Swift Package Manager (built-in to Xcode) or CocoaPods installed (depending on SDK distribution).
• A physical iPhone running iOS 13+ (recommended for testing performance) or a Simulator (the effects will work on simulator, though performance may differ).

Android

• Android Studio Arctic Fox (4.2) or newer, targeting Android API level 26 (8.0 Oreo)+.
• Gradle 7+ with Kotlin 1.5+ (if using the provided sample code’s build setup).
• A physical Android device (recommended) running Android 8.0+ or an emulator (ensure it’s configured with hardware rendering for better performance).

Hardware or mock

• Sample images for testing: Prepare at least one image with a transparent background (PNG format) to see the outline/shadow effects clearly. If you don’t have one, use an online remover to get a PNG cutout of a photo.
• If testing capture from camera: a device with a camera (or use a static image as a “mock” input in the sample app).
• Ensure you have internet connectivity if your workflow includes an online step (like using a cloud background removal service before applying the pipeline), though the core pipeline itself runs offline once you have the image.

3) Get Access to the Sticker Styles SDK

1. Navigate to the Developer Portal: Log in to the Cybergarden Developer Portal and find Sticker Styles Pipeline in the products or SDK section.
2. Request access: If the SDK is in beta, click “Join Beta” or “Request Access”. Approval is usually instant if public, or you might need to wait for access confirmation email.
3. Agree to terms: Accept any usage guidelines or EULA for the Sticker Styles SDK. This may include acknowledging it’s for development/testing and not final.
4. Create a new project: In the portal, create a project (or select an existing one) to use with Sticker Styles. This will generate identifiers needed for the SDK. For example, create an app named “StickerDemo” and note the Project ID or App ID.
5. Obtain credentials: Download any config files or copy keys as instructed:
   • For iOS: Download StickerStylesConfig.plist if provided, or note the Team ID/Project ID to add in Xcode. If the SDK is distributed via Swift Package Manager, you might get a private repository URL.
   • For Android: Copy the Maven repository URL and access token. For instance, you might be given a Gradle snippet and a token (e.g., maven.pkg.github.com/cybergarden/StickerStyles with a token string). Save this for integration.
6. SDK Download: If manual download is needed, grab the iOS .xcframework or Android .aar from the portal. Otherwise, prepare to integrate via dependency managers using the info above.

Done when: You have your App ID (if applicable) and any needed keys or files. At this point, you should be ready to install the SDK in your development environment – for example, you can see your project listed under Sticker Styles in the portal, and you have the repository link or file needed to fetch the SDK.

4) Quickstart A — Run the Sample App (iOS)

Goal

Run the official iOS sample app to verify that the Sticker Styles pipeline works on a real device or simulator, applying outlines/shadows/glow to a test image.

Step 1 — Get the sample

• Option 1: Clone the repo. Go to the Cybergarden GitHub (or provided repository) and clone the sample: git clone <https://github.com/cybergarden/sticker-styles-sample-ios.git>. Open StickerStylesSample.xcodeproj in Xcode.
• Option 2: Download the project. On the Developer Portal, there may be a direct download for a sample app. Download the ZIP, unzip it, and open the Xcode project inside.

Step 2 — Install dependencies

The sample app uses the Sticker Styles SDK:

• If using Swift Package Manager (SPM): In Xcode, check that the package is added. Go to File > Add Packages, and enter the package URL (e.g., https://github.com/cybergarden/StickerStylesSDK.git). Xcode will fetch the SDK. Ensure the version/tag matches the one you have access to (e.g., 1.0.0-beta).
• If using CocoaPods: Run pod install in the sample project directory to install the StickerStylesSDK pod. Make sure you have the private spec repo source and credentials set in your Podfile (for example, a source like source '<https://github.com/cybergarden/StickerPods.git'> and perhaps environment variables for auth).
• After adding the SDK, build the project once to ensure it downloads/links the SDK properly.

Step 3 — Configure the app

Before running, some configuration might be needed:

• Add config file: If you were given a StickerStylesConfig.plist, add it to the Xcode project (usually under the project’s Resources). Ensure it’s included in the app bundle. This file might contain your project ID or API key.
• Set Bundle ID: In Xcode’s project settings, ensure the bundle identifier matches one allowed in the portal (if the portal uses bundle ID whitelisting for the API key). For the sample, you can usually use the default provided bundle ID unless instructed to change.
• Permissions: If the sample app allows you to pick an image from Photos or use the camera, add the corresponding usage descriptions in Info.plist:
  • NSPhotoLibraryUsageDescription (e.g., “Allow access to photos to choose images for sticker effects.”)
  • NSCameraUsageDescription (if a camera capture feature is included).
• Capabilities: No special entitlements are needed for the pipeline itself (it runs on-device), but ensure Background Modes or others are off unless you test in background (not typical for this app).

Step 4 — Run

1. In Xcode, select the StickerStylesSample target.
2. Choose a run destination (a physical iPhone if possible, or a Simulator like iPhone 14 with iOS 17).
3. Click Build & Run. The app should compile and launch on the device/simulator.
4. When the app runs, you should see a UI (perhaps with an image placeholder and buttons to apply “Outline”, “Shadow”, “Glow”, etc., depending on how the sample is designed).

Step 5 — Test with an image

• The sample may include a default image in the app bundle (for example, a sample PNG of a object). If so, use the UI to apply each effect. For instance, tap “Outline” and see the image get a white border.
• If the sample lets you choose a custom image, tap “Import Image” or similar. Select a photo (for best results, one with a clear subject and preferably already transparent background). Then test the effects:
  • Apply Outline style: the image should get a visible border around the subject.
  • Apply Shadow style: a drop shadow should appear behind the image.
  • Apply Neon Glow style: a colored glow should emanate around the image.
• If needed, grant permissions on the device when prompted (e.g., allow photo library access or camera).

Verify:

• After tapping an effect, the app displays the processed image with the chosen effect (e.g. a white outline is clearly visible around the subject).
• The background around the image remains transparent in the app (indicated by the image either showing a checkerboard pattern or just showing the app’s background through it if implemented).
• You can export or save the resulting image (if the sample has a “Save PNG” feature) and the saved file retains transparency (opening the saved file should show only the sticker, no white/black background).

Common issues

• Build errors (iOS): If you get an error like “No such module StickerStylesSDK,” the Swift Package may not have been added correctly. Fix: re-add the package, or if using CocoaPods, ensure pod install was run and open the .xcworkspace instead of .xcodeproj. Also check that your Package Index or Pod repo is authenticated (you might need to add a GitHub token in Xcode’s accounts or in your netrc for CocoaPods).
• Blank or weird output: If the sample runs but the output image looks wrong (e.g., fully white or invisible), it could be due to an input issue. For example, using a JPEG (no alpha) might result in the entire image being outlined as one rectangle. Fix: try the sample’s included image or ensure you use a PNG with transparency. The outline effect needs a transparent background to work properly – otherwise it outlines the image’s edges.
• Slow performance or app freeze: Large images (e.g. a 12MP photo) might take a couple of seconds to process, during which the UI might freeze if not handled asynchronously. The sample should offload work to a background thread, but if not, you may notice a pause. If testing on older devices, be patient, or try a smaller image to confirm the pipeline works.
• Simulator rendering issues: On some simulators, the neon glow (which uses a GPU blur under the hood) might not render exactly as on device. If the glow looks pixelated or too faint on the simulator, test on a real device for accurate rendering.

5) Quickstart B — Run the Sample App (Android)

Goal

Run the official Android sample app to verify that the Sticker Styles pipeline works and applies effects correctly on an Android device or emulator.

Step 1 — Get the sample

• Clone the repository: git clone <https://github.com/cybergarden/sticker-styles-sample-android.git>. Then open the project in Android Studio (Use Open an existing project, and select the folder).
• (If provided via download, use that.) The project likely contains a module like app/ with the sample code.

Step 2 — Configure dependencies

Before building, set up the Sticker Styles SDK dependency:

• Add the Maven repo: In the project’s top-level build.gradle or settings script, add the repository given by the portal. For example: gradle Copy code maven { url "<https://maven.pkg.github.com/cybergarden/StickerStyles>" credentials { username = "YOUR_GITHUB_USERNAME" password = "YOUR_PERSONAL_ACCESS_TOKEN" } } This allows Gradle to find the Sticker Styles SDK artifact.
• Add the dependency: In app/build.gradle, add the SDK: gradle Copy code dependencies { implementation "com.cybergarden.stickers:sticker-styles-sdk:1.0.0-beta" } (Use the exact coordinates and version provided.)
• Gradle properties (if needed): If the repo requires authentication (as in the GitHub Packages example above), open your ~/.gradle/gradle.properties and add: properties Copy code gpr.user=YOUR_GITHUB_USERNAME gpr.key=YOUR_PERSONAL_ACCESS_TOKEN Alternatively, the sample may include a gradle.properties template for you. This ensures Gradle can fetch the package.
• Sync Gradle: Allow Android Studio to sync/resolve dependencies. You should see it download the StickerStyles SDK. If it fails with authentication errors, double-check the username/token and that your token has read package permissions.

Step 3 — Configure app

Prepare the sample app settings:

• Application ID: Open app/build.gradle and ensure the applicationId is unique (e.g., "com.cybergarden.stickersample"). If the developer portal required a specific App ID, use that here. Otherwise, the default sample ID should be fine for testing.
• Insert API keys: If an API key or config is needed in code, find where the sample expects it. Possibly in a Strings.xml or a config class. For example, there might be a placeholder like StickerStyles.init(context, "YOUR_API_KEY"). Put your key from the portal.
• AndroidManifest permissions: If the sample app loads images from storage or uses camera:
  • Ensure it has <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> (for older Android versions) or uses Storage Access Framework (if implemented).
  • If camera is used: <uses-permission android:name="android.permission.CAMERA" />.
  • Network permission is not strictly needed unless the app does online background removal or logging.
  • The pipeline itself doesn’t require special permissions to run locally.
• File provider (if saving files): Check if the sample needs a FileProvider for sharing the output PNG. If so, verify it’s set up in the manifest.

Step 4 — Run

1. Select the app module configuration in Android Studio.
2. Choose a deployment target device (preferably a physical Android phone for realistic performance; otherwise use an emulator with API 30+ for good graphics support).
3. Click Run. The gradle build should compile the app and install it on the device/emulator.
4. Grant any runtime permissions on first launch (the app may prompt for storage or camera access if those features are used).
5. You should see the sample app UI. It might have a default image preview and buttons like “Outline”, “Shadow”, “Glow”, similar to the iOS sample.

Step 5 — Test the effects

• Use the sample app’s UI to load an image. There might be a button to select a photo from gallery. Choose a PNG with transparency if possible (or a clear subject photo).
• Tap the “Outline” button. The image should be re-displayed with a crisp outline around it (usually white border).
• Tap “Shadow”. Now a drop shadow should appear under the image (you might see an offset grey/black behind it).
• Tap “Neon Glow”. A colored glow (often defaulting to something like blue or green) should radiate around the image.
• Try saving or sharing if the app provides that, to ensure the output includes the effect.

Verify:

• The app shows the transformed image on screen for each effect (outline/shadow/glow) without crashing.
• The transparent areas remain transparent – e.g., when you activate shadow or glow, you should still see the app’s background around the image, not a solid rectangle.
• There are no obvious visual glitches (no weird black boxes, unless the input was not transparent as noted).
• If you save the image, check it in the device’s gallery or via Android Studio “Device File Explorer” – the PNG should have the outline/shadow/glow and transparent background.

Common issues

• Gradle authentication error: If build fails with an error pulling the SDK (401 Unauthorized), double-check the Maven URL and credentials. Ensure you replaced the placeholders with your actual username/token, and that the token is valid. Also verify the repository path matches exactly what the portal provided.
• Manifest merger conflict: If the SDK has its own manifest entries, you might see a merge warning. For example, if the SDK declares an application <uses-feature> or something. Typically, this shouldn’t fail the build; a warning can be resolved by tools:replace in the manifest if needed. Check the build output for details and consult Cybergarden docs if a specific setting is needed.
• No effect or black background: If the outline or glow doesn’t show up and instead you see a solid background behind the image, it likely means the sample loaded a JPEG (which has no alpha). The output might be correct but you can’t see transparency on a white background. Try the sample’s default image or use a PNG. Also, ensure the ImageView in the layout is using android:background="@android:color/transparent" and not a solid color.
• Out of memory on large image: If you loaded a very large image (say 6000x4000), the app might crash or hang due to memory. Logcat would show an OOM. The sample might downscale images, but if not, try a smaller image or implement downsampling. On Android, you can use BitmapFactory.Options.inSampleSize or use Glide/Picasso to load a smaller version for processing.

6) Integration Guide — Add Sticker Styles to an Existing App

Goal

Integrate the Sticker Styles SDK into your own app, allowing your users to apply the outline, shadow, or glow effects to their images and export the result. We’ll add the SDK, then implement one feature end-to-end: selecting a photo and generating a sticker.

Architecture

Your app’s flow will be: UI triggers an image transform → Sticker Styles SDK processes the image → result (PNG) returned → app displays or saves it. In a typical setup:

• App UI – e.g., an “Add Outline” button in an image editor screen.
• Sticker Styles SDK client – a class or function that calls into the SDK (or library code). This handles loading the image, running the outline/shadow/glow algorithm (possibly on a background thread), and getting the output image.
• App logic – receives the processed image (via callback or promise), then updates UI (like showing the new image preview) and possibly saves it to storage or shares it.
• (No external wearable or cloud needed; the processing happens on-device, but if your app wants, you could offload to a server using the same algorithm for batch processing.)

Step 1 — Install the SDK in your project

iOS (Swift):

• If using Swift Package Manager, add the dependency in your app’s Package.swift or via Xcode UI: swift Copy code .package(url: "<https://github.com/cybergarden/StickerStylesSDK.git>", from: "1.0.0") Then add "StickerStylesSDK" to your target’s dependencies.
• If using CocoaPods, add: ruby Copy code pod 'StickerStylesSDK', '~> 1.0' (Make sure any private source and credentials are set as per Quickstart A.)
• Run pod install or resolve packages to fetch the SDK. You should now have access to the SDK’s classes (for example, StickerStylesProcessor).

Android (Kotlin/Java):

• In your root build.gradle or settings, add the Maven repo (if not public). E.g.: gradle Copy code maven { url "<https://maven.pkg.github.com/cybergarden/StickerStyles>" credentials { ... } }
• In app/build.gradle, add the implementation dependency: gradle Copy code implementation("com.cybergarden.stickers:sticker-styles-sdk:1.0.0")
• Sync Gradle. The SDK should download. You can now call its methods (e.g., StickerStyles.applyOutline(bitmap, ...) or similar, according to documentation).

Step 2 — Add necessary permissions

The Sticker Styles SDK itself might not require special permissions, but your app likely needs some to let users pick images and save results:

iOS (Info.plist):

• NSPhotoLibraryUsageDescription – if users will pick images from or save images to the photo library.
• NSCameraUsageDescription – if you have a feature to take a photo and then sticker-ify it.
• (The SDK’s image processing doesn’t need camera or network on its own; all processing is local. No Bluetooth or microphone usage.)

Android (AndroidManifest.xml):

• <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> – if your app targets Android < Q and you need to read images from gallery. (On Android Q/11+, you’ll use the system picker which doesn’t require this, or the Storage Access Framework.)
• <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> – if saving files to shared storage (again, for older API levels or if using MediaStore on newer ones, you might not need this explicitly).
• <uses-permission android:name="android.permission.CAMERA" /> – if capturing photos in-app.
• Ensure your app has the appropriate file provider setup if you share the PNG file (not strictly a permission, but related to saving and sharing files).

Step 3 — Create a thin client wrapper in your app

To keep your code organized, wrap the Sticker Styles functionality in a service or manager class. For example:

• StickerStylesClient (or ImageEffectsManager): This class will initialize the SDK if needed and expose methods like applyOutline(image: UIImage) -> UIImage or for Android fun applyOutline(bitmap: Bitmap): Bitmap. Internally it calls the SDK’s functions. If the SDK requires initialization (like StickerStylesSDK.init(context, key)), do it here (perhaps on app launch).
• StickerEffectsService: You might separate by effect. For instance, have functions for each effect:
  • createOutlineImage(inputImage) – returns the image with outline.
  • createShadowImage(inputImage)
  • createNeonImage(inputImage, color) – perhaps allowing a color parameter. These might internally call a common function in the SDK with different parameters.
• Background processing: Ideally, these functions should not block the main thread. Use Grand Central Dispatch or OperationQueue on iOS (or DispatchQueue.global().async) and on Android use Coroutine or an AsyncTask/Executor to offload the image processing. Then deliver the result back to the main thread for UI.
• Permissions handling: If not already done, create a helper (like PermissionsManager) to handle requests for Camera/Gallery access, so that by the time you get to the SDK, you have an image ready to go.

Definition of done:

• The Sticker Styles SDK is initialized (if required) when your app launches or before first use. (E.g., StickerStyles.configure(apiKey) is called in AppDelegate or Application subclass if needed.)
• You have functions that take an input image/bitmap and return a new image with the effect applied. These functions handle threading (so the UI doesn’t lock up during processing).
• Errors are handled: e.g., if the SDK throws an exception (out of memory or invalid image), you catch it and perhaps show an alert “Failed to apply effect.” All errors or important events are also logged for debugging.
• The pipeline results are integrated into app flow – e.g., if user taps “Save Sticker,” after generating the image, your code saves it to Photos or shares it, and provides user feedback.

Step 4 — Add a minimal UI screen

Design a simple UI to let users use this feature. For instance, a “Sticker Maker” screen in your app:

UI Elements to include:

• An ImageView/UIImageView to display the selected image (and eventually the result).
• A “Select Image” button to choose an image from gallery (or take photo).
• Option toggles or buttons for each effect:
  • e.g., three buttons: “Outline”, “Shadow”, “Neon Glow”. When tapped, each triggers the pipeline and updates the image preview.
• A Save/Share button to export the final sticker (PNG). This should use platform-specific sharing (UIActivityViewController on iOS, Share Intent on Android) or save to camera roll.

Implement the interactions:

1. User selects or captures an image.
2. They tap “Outline” – your app calls StickerStylesClient.applyOutline(selectedImage) asynchronously. While processing, show a loading indicator.
3. When result returns, display it in the ImageView.
4. Similarly for “Shadow” and “Glow”.
5. Save/Share will take the currently displayed image (with effect) and either save to file or open share sheet.

Make sure to handle edge cases:

• If no image is selected and they tap an effect, prompt them to select an image first.
• If the image has no alpha and user tries outline, consider warning or auto-remove background using an API (if your app has that capability).
• Provide an option to adjust glow color or outline thickness if your SDK supports it (not mandatory for a basic integration).

7) Feature Recipe — Generate a Sticker from a Photo (Outline & Save)

Let’s walk through a concrete example: User taps “Create Sticker” on a photo → the app produces a sticker with a white outline and saves it.

UX flow

1. User picks a photo in the app (from gallery or camera).
2. User taps “Outline” (or “Make Sticker”) button.
3. The app shows a progress indicator (e.g., “Adding outline…”).
4. Sticker Styles pipeline creates the outlined image.
5. The app displays the new image with a white border on screen, and maybe a “Save” icon.
6. User taps “Save”, the app saves the PNG to their device (or shares it).
7. A confirmation (“Saved to Photos ✅”) is shown.

Implementation checklist

• Image source ready: Ensure you have a Bitmap or UIImage from the picker. If the original is JPG, consider converting it to a format that supports alpha (on iOS, UIImagePNGRepresentation; on Android, create a Bitmap with ARGB_8888 config).
• Permissions are granted: By this point, the user granted Photos access if needed. (Double-check before saving and request if not.)
• Call the SDK: Use your wrapper to apply outline. E.g.:

• iOS: let stickerImage = StickerStylesClient.shared.applyOutline(originalImage)
• Android: val stickerBitmap = stickerStylesClient.createOutline(originalBitmap)

• Timeout/long processing: If the image is large, set a reasonable expectation. If the operation can take more than a second or two, consider using a background thread with a timeout or at least keep the user informed with a spinner.
• Display result: On the main thread, update the ImageView with the returned sticker image. Clear the progress indicator.
• Persist the result: When user chooses to save, convert the image to PNG and save:

• iOS: UIImagePNGRepresentation(stickerImage) then write to Photos (using PHPhotoLibrary or UIActivityViewController).
• Android: Save via MediaStore or FileOutputStream to Pictures directory, then scan it.

• Confirm to user: Toast or alert that the sticker was saved successfully (or handle errors if file I/O fails).

Pseudocode

swift

Copy code

@IBAction func onMakeStickerTapped() { guard let image = selectedImage else { showAlert("Please select an image first"); return } showLoading("Adding outline...") DispatchQueue.global(qos: .userInitiated).async { do { let sticker = try StickerStylesSDK.shared.addOutline(to: image, color: .white, thickness: 10) DispatchQueue.main.async { self.hideLoading() self.imageView.image = sticker } } catch { DispatchQueue.main.async { self.hideLoading() self.showAlert("Sticker creation failed: \\(error.localizedDescription)") } } } } @IBAction func onSaveTapped() { guard let sticker = imageView.image else { return } saveImageToPhotos(sticker) // platform-specific save function showToast("Saved ✅") }

kotlin

Copy code

fun makeSticker() { if (selectedBitmap == null) { showSnackbar("Select an image first"); return } progressBar.visible(true) Executors.newSingleThreadExecutor().execute { try { val stickerBmp = StickerStyles.applyOutline(selectedBitmap!!, Color.WHITE, 10f) runOnUiThread { progressBar.visible(false) imageView.setImageBitmap(stickerBmp) } } catch (e: Exception) { runOnUiThread { progressBar.visible(false) Toast.makeText(this, "Failed to create sticker: ${e.message}", Toast.LENGTH_LONG).show() } } } } fun saveSticker() { val bmp = (imageView.drawable as? BitmapDrawable)?.bitmap ?: return saveBitmapToGallery(bmp, "sticker.png") Toast.makeText(this, "Saved to Photos ✅", Toast.LENGTH_SHORT).show() }

(The above pseudocode assumes the SDK provides a simple addOutline function; in reality, function names may differ. Always refer to the SDK docs for exact API calls.)

Troubleshooting

• Output PNG has jagged edges: The outline might appear pixelated if the source image was low-res. This is expected – a higher resolution image yields a smoother outline. Consider documenting recommended image sizes (e.g., “For best results, use images at least 500px in width”).
• Outline color blending issue: If your image has semi-transparent pixels at the edges (anti-aliased cutout), the white outline might mix with those and look grayish. A solution is to pre-multiply alpha or tweak the algorithm to treat any pixel with alpha > 0 as fully opaque for outline purposes. This kind of issue is deep in the rendering; if noticed, you might need to post-process by tweaking alpha threshold.
• Glow effect looks weak: If the neon glow isn't as strong as expected on a light background, remember glow shows up better on dark backgrounds. You can mitigate by using a slightly thicker or more opaque glow on bright backgrounds, or simply documenting that it looks best on dark mode. Another approach is to overlay the glow layer twice for more intensity (the SDK might allow a "strength" parameter which essentially does this).
• App memory usage spikes: Images with multiple effects applied in succession might be kept in memory. Make sure to recycle or release bitmaps not in use (Android) or let iOS ARC free unused UIImages. If users stack multiple effects, you might implement it such that it always applies effects to the original image, not repeatedly onto an already processed image (to avoid growing artifacts or memory use).
• Crash on some Android devices: If you see a crash on specific devices (especially older or with specific CPUs), the issue might be native libraries (perhaps the SDK includes native code for performance). Ensure you included all ABI splits or packaged the .so for armeabi-v7a and arm64. If you limited ABI in Gradle, include the ones the SDK needs.

8) Testing Matrix

9) Observability and Logging

When integrating a new pipeline, it’s helpful to log key events and metrics for debugging and performance tuning:

• Initialization events: Log when the SDK is initialized, e.g. StickerStyles_Init_Start, StickerStyles_Init_Success or any error (with error codes). This helps if there's an issue loading native libs on certain devices.
• User actions: Log when the user requests an effect: user_tap_outline, user_tap_shadow, user_tap_neon. This can be paired with performance metrics to see how often each is used and how long they take.
• Processing times: Measure and log the duration for each effect:
  • Start a timer when beginning an effect (e.g., outline_start).
  • When it finishes, log outline_success with the elapsed time in ms. For example: OutlineSuccess [duration_ms=120].
  • If an error occurs: log outline_fail [error=XYZ].
• Memory usage (if possible): On Android you might log Runtime.getRuntime().freeMemory() before and after to see memory impact. On iOS, you could observe memory in Instruments. Not necessary in production logs but useful during testing.
• Output info: Log the dimensions of output images and maybe a checksum or hash. For instance, Generated outline PNG 1024x1024 px.
• Frequency of use and errors: If using analytics, track how many stickers are created, and how many times users encountered an error (e.g., out of memory) so you can address if it’s common.
• Lifecycle: If your pipeline involves any persistent state (not much here, since it’s stateless image processing), ensure to log if you release or re-initialize anything on app background/foreground. Likely not needed for this SDK.

By logging these events, you can answer questions like: Is the neon effect significantly slower than outline? Does it fail on any device? How many users who start the process actually save the sticker? For example, a log might show outlines usually take ~100ms, but on one device it took 2000ms – indicating a performance issue on that device (perhaps using software rendering). Such insights allow targeted optimizations.

(Note: In a production app, you might use a logging framework or analytics platform to collect this data rather than raw logs.)

10) FAQ

• Q: Do I need special hardware or an internet service to use this?A: No special hardware is required – any modern smartphone that can run your app is sufficient. The Sticker Styles pipeline runs entirely on-device (CPU and possibly GPU optimizations). You also don’t need a cloud service for the effects; once the SDK is in your app, it processes images locally. (If your users need to remove backgrounds, that part might use an online API unless you implement it on-device via Vision or ML.)
• Q: Which devices and platforms are supported?A: On iOS, devices running iOS 13.0 or above (iPhone and iPad) are supported. On Android, any device running Android 8.0 (API 26) or above should work. The SDK has been tested on common devices like iPhone 14, iPhone SE 2nd gen, Google Pixel 5, Samsung Galaxy S20, etc. For development, you can use Xcode on macOS for iOS and Android Studio on any OS for Android. There is currently no official support for other platforms like web or Flutter; this guide covers native iOS/Android integration.
• Q: Can I use this in a production app?A: If the Sticker Styles SDK is in beta, you should use caution. Beta means APIs or performance might not be final. Check the Cybergarden license – it might forbid production use until a stable release. That said, technically nothing stops you from using it in a live app if it meets your needs. Just be sure to test thoroughly on a range of images and devices. If it’s open-source or out of beta, then yes, it’s intended for production. Always credit or comply with license requirements if open-source.
• Q: Does the pipeline automatically remove the background from photos?A: Not currently. The pipeline assumes the image input has transparency where you want no content. If you input a normal photo (JPEG), the outline will surround the entire rectangular photo. To get a true sticker of a subject, you need to remove the background first. You can integrate an image segmentation tool or let users manually cut out the background. Future versions might incorporate an optional background removal step if there’s demand.
• Q: Can I customize the outline color or glow intensity?A: Yes. The SDK provides parameters for color and thickness/radius. For example, you can create a red outline instead of white, or a larger glow radius for a more diffuse neon. Check the SDK documentation for the specific function signatures. Typically, you’ll have something like applyOutline(image, color, thickness) and applyGlow(image, color, radius, intensity). If you want multi-layer glows (for a stronger effect) you might call the glow function twice or increase intensity if supported.
• Q: How does this differ from just using CSS/graphics filters? A: While platforms like CSS have a drop-shadow filter and basic outline, this pipeline is tailored to stickers – meaning it operates on the image's alpha channel to outline the actual shape, not the bounding box (unless the image has no alpha). It produces a new image asset (PNG) that you can use anywhere, whereas CSS styles are ephemeral and web-only. Also, the neon glow here is more involved than a simple shadow – it can layer blurs to create that signature neon look. Essentially, this gives you a static image result that can be used across platforms (shareable, printable, etc.), which a pure CSS effect cannot.
• Q: Can I combine effects or do them multiple times?A: Yes, you can combine them, but it often works best in a certain order. For instance, you might outline an image and also add a shadow. The recommended approach is usually: first add outline, then add drop shadow to the outlined image (so the shadow reflects the outline shape). Neon glow is typically used on its own (an outline with a glow is essentially the neon effect). If you do multiple operations, be mindful of increased image size (an outline will make the image larger dimension-wise). Also, each operation is additional processing – consider doing combined effects in one go if the SDK offers it, or ensure your UI communicates the extra wait if stacking them.

11) SEO Title Options

• “How to Get Access to the Sticker Styles SDK and Run the Sample App (iOS & Android)” – covers the onboarding and quickstart for both platforms.
• “Integrate Sticker Styles Image Effects into an iOS or Android App – Step by Step Guide” – emphasizes adding the new solution into existing apps.
• “Add Outline, Shadow, and Neon Glow to Images in Your Mobile App” – highlights the main outcome (creating sticker-style images) in plain language for search.
• “Sticker Styles Troubleshooting: Transparency Issues, Performance Tips, and Common Errors” – a focused title for developers searching for solutions to problems when implementing this.

12) Changelog

• 2026-01-02 — Verified with StickerStyles SDK v1.0.0-beta on iOS 17.2 (Xcode 15) and Android 14 (API 34). Tested outline, shadow, neon on sample devices (iPhone 12, Pixel 5) and updated instructions for latest Gradle and Xcode. Added notes on performance and transparency handling.
• (Future updates would be listed here, e.g., if SDK APIs change or new features added.)