When a user drags a photo onto a template, scales it, rotates it, and adds text — any lag in rendering is immediately noticeable. The entire UI must run on the GPU, not the CPU. We specialize in building mobile collage and photo album apps that maintain 60 FPS even during concurrent pinch, rotate, and pan gestures. With over five years of experience and more than 50 successful releases on the App Store and Google Play, we deliver stable performance even on mid-range devices. Contact our engineers for a project consultation.
Canvas Performance: Avoiding Lag During Manipulations
iOS. We avoid using UIImageView for every layer because Core Animation does not GPU-accelerate transformations when using transform. Instead, we build a CALayer hierarchy or use Metal rendering via MTKView. For most collages (up to 10–15 layers), CALayer suffices: each element is a sublayer with contents = CGImage, and transformations via CATransform3D are GPU-backed. CATiledLayer handles large background images. For final file output, we use UIGraphicsImageRenderer or a Metal pipeline to accurately capture transformations.
Android. The Canvas approach on SurfaceView or TextureView works but makes layer management complex. We prefer a custom View with drawBitmap and a transformation matrix per element. For advanced effects, we use OpenGL ES through GLSurfaceView. In Jetpack Compose, the Canvas Composable with drawImage(paint = ...) is fast for simple cases; for large projects we rely on OpenGL.
Flutter. We use CustomPainter with canvas.drawImageRect for images and canvas.drawParagraph for text. To avoid redrawing the entire scene, each editable element is wrapped in a RepaintBoundary. Flutter then repaints only the changed layer.
| Platform | Primary Approach | GPU Acceleration | Layer Complexity | Typical Latency (ms) |
|---|---|---|---|---|
| iOS | CALayer / Metal | Yes | Medium | ≤16 |
| Android | Custom View / GLSurfaceView | Yes | High | ≤20 |
| Flutter | CustomPainter + RepaintBoundary | Yes | Low | ≤16 |
Synchronous Gesture Handling for Scale, Rotation, and Pan
Processing pinch, rotate, and pan simultaneously is standard but tricky to implement correctly. On iOS, we use UIPinchGestureRecognizer, UIRotationGestureRecognizer, and UIPanGestureRecognizer together with shouldRecognizeSimultaneouslyWith. Each gesture’s delta is applied incrementally to the element’s CATransform3D — never an absolute value, otherwise the element jumps when a new gesture starts. UIPinchGestureRecognizer documentation
On Android, we combine ScaleGestureDetector with a manually implemented RotationGestureDetector (tracking two touch points) and GestureDetector. ScaleGestureDetector documentation
Flutter: GestureDetector with onScaleUpdate handles both scale and rotation in one callback (ScaleUpdateDetails.rotation). We also implement snap-to-grid and snap-to-center: when dragging, we check proximity to axes (±10 dp) and canvas center, snapping with haptic feedback if close.
Why Store Collage Templates as JSON?
A template defines the number of cells, their positions, and aspect ratios. We store them as JSON: an array of {x, y, width, height, rotation} in 0-to-1 units relative to the collage size. At runtime, we scale to the screen dimensions. Users fill cells with photos from the gallery using PHPickerViewController (iOS 14+), PhotoPicker (Android), or image_picker (Flutter) — modern pickers that don’t require full gallery permission. The user chooses between fit or fill for each cell, cropping or padding as needed.
On a recent project, we reduced gesture latency from 50 ms to under 16 ms on mid-range devices by switching to Metal rendering on iOS and optimizing transform delta calculations for Android. This allowed smooth real-time previews even on devices like the iPhone 8 and Samsung Galaxy A50.
What We Guarantee
We follow a methodology proven on 50+ projects. For iOS, the final build undergoes code review and testing on devices running iOS 15 and above. For Android, we test on emulators and physical devices with Android 10+. We ensure no memory leaks (monitored via Instruments and LeakCanary) and stable 60 FPS during gestures. We provide technical documentation and support during deployment.
Export Resolutions
We render the final collage offline at 2x–3x screen resolution for social media, or at 300 DPI for a given physical print size. Rendering progress is shown via Progress or ProgressBar. Saving to Photos uses PHPhotoLibrary.performChanges (iOS) or MediaStore.Images.Media.insertImage (Android).
| Target Use | Resolution | Format | Approx. File Size |
|---|---|---|---|
| Social media | 2x–3x screen (up to 12 MP) | JPEG/PNG | 1–5 MB |
| Print (10×15 cm) | 300 DPI (1181×1772 px) | PNG | 3–8 MB |
| Print (20×30 cm) | 300 DPI (2362×3543 px) | PNG | 10–25 MB |
What's Included in Our Work
- UX/UI analysis and prototyping (wireframes, user flows)
- Canvas implementation with GPU acceleration (Metal / OpenGL / CustomPainter)
- Template system (10–15 built-in, custom possible)
- Gesture handling (pinch, rotate, pan, snap-to-grid)
- High-resolution export (2x–3x, 300 DPI)
- Testing on real devices (iOS/Android)
- Deployment to App Store and Google Play, code signing setup
- Documentation and team training
Timelines and Pricing
A basic editor with 10–15 templates, text, and export takes 3–4 weeks. A full editor with stickers, filters, custom templates, and cloud storage takes 6–8 weeks. Cost is determined individually after analyzing your requirements. Contact us for a stack and timeline consultation.