Android App Development – IMG.LY Blog

CE.SDK v1.73 Release Notes

Neslihan — Tue, 21 Apr 2026 13:29:35 GMT

v1.73 is a mobile-focused release. The main act is our new architectural foundation for iOS and Android: Starter Kits give you full ownership of your editor configuration. On the engine side, CE.SDK now supports SVG export across all platforms.

Own Your Mobile Editor — Not Just the Config

The old model was simple: drop in a solution component (PhotoEditor, VideoEditor, DesignEditor), pass a license key, ship. For most teams, that was exactly the right starting point. Fast to integrate, zero configuration overhead, a full editor running in your app within hours.

As products matured, though, teams needed more. Deeper customization. Granular control over behaviors. An editor that felt like theirs.

That’s what Starter Kits for Mobile addresses.

The prebuilt solution components are replaced by a single Editor entry point and a set of Starter Kits: complete, working editor projects for each use case that live in your codebase, not ours. Set it up in minutes.

For your product, this means: you can adapt the editor to fit your product, not the other way around.

Everything Is In Your Code Now
Each Starter Kit is a real editor project — not a thin config wrapper. Every toolbar item, every callback, every loading phase is written out explicitly in files you own.

That means your team can read the integration, review changes to it, and understand exactly what the editor does and why. No more hunting through SDK internals to figure out why something behaves the way it does.

SDK Updates Stop Touching Your UI
Previously, updating CE.SDK could introduce new buttons, changed defaults, or different menus without you asking for them. Your QA had to catch it.

That dynamic is reversed now. Engine improvements, bug fixes, and performance gains come through updates as before. But your editor UI stays exactly where you left it. New features arrive as optional building blocks, documented and ready when you want them.

No More Customization Ceiling
The old configuration APIs had a line between what you could change and what you couldn’t. Starter Kits remove that line entirely. You can restructure initialization, inject custom logic between loading phases, and build workflows specific to your product.

If you can see it in the code, you can change it.

If none of the five kits match your needs, the Editor view accepts raw configuration directly.

Migration

This is a breaking change on both iOS and Android. Migration guides cover every change with before-and-after examples.

→ Android Migration Guide
→ iOS Migration Guide

Starter Kit Repositories

Editor	iOS (Swift)	Android (Kotlin)
Photo	GitHub	GitHub
Design	GitHub	GitHub
Video	GitHub	GitHub
Postcard	GitHub	GitHub
Apparel	GitHub	GitHub

Export Vector Designs as SVG

Until now, users working with vector content in CE.SDK had no path to get that content out as a vector file. CE.SDK v1.73 adds SVG export via the image/svg+xml MIME type.

Text is exported as vector paths for consistent rendering across environments regardless of font availability. Drop shadows, blur, effects, and embedded raster images are rasterized and included as embedded images within the SVG output.

→ Exporting Blocks Engine Guide

Changelog

See the full changelog for the complete list.

Thanks for building with IMG.LY.

Join 3,000+ creative professionals who get early access to new features and updates—subscribe.

CE.SDK v1.48 Release Notes

Neslihan — Tue, 08 Apr 2025 12:13:35 GMT

This release makes it easier than ever to tailor the Android editing experience to your brand. Customize the navigation bar to guide your users seamlessly and create an interface that feels uniquely yours.

Let’s jump in:

You now have more control over customizing the navigation bar on Android, ensuring that it reflects your brand and optimizes user flows.

Key Features:

Add Custom Buttons: You can add custom buttons to the navigation bar, to give users quick access to frequently used actions.
Rearrange Buttons: Arrange buttons in your navigation bar.
Integrate Custom Components: Customize the navigation bar by integrating unique elements that fit your app’s design and functionality.

These updates allow you to fully tailor the mobile editing experience to your specific needs.

💡 Did you know? In our previous update, we introduced customizability for the dock and inspector bar on Android—laying the foundation for more UI personalization.

We’re continuing that momentum by giving you full control over the navigation bar, ensuring that every part of your mobile editing experience can align with your product’s workflow.

Start customizing your navigation bar with our documentation.

Upcoming

Enjoy Vibrant HDR Videos
CE.SDK will support loading HDR videos on iOS, converting them to SDR on the fly for accurate and vibrant color representation—without the need for time-consuming transcoding.

Previously, HDR videos needed to be transcoded with delays—especially with large 4K videos. Soon, HDR content is processed instantly. Videos appear with correct color fidelity right away, making the editing experience more fluid and visually accurate for users.

This enhancement will remove friction in the editing workflow and lets your users start working with their content immediately. By offering a smoother, higher-quality experience, your app can boost user engagement and retention.

View all bug fixes and changes in the Changelog. Thanks for reading!

3,000+ creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.

CE.SDK v1.45 Release Notes

Neslihan — Tue, 25 Feb 2025 14:11:57 GMT

Welcome to CE.SDK v1.45! We’re expanding creative possibilities and refining the editing experience. Reactions are now available on Android, enabling users to record, edit, and personalize real-time responses.

We also introduce improvements like smoother development with TypeScript and better text rendering across languages.

These solutions help creators and developers work smarter, engage better, and deliver high-quality content.

Record Reactions to Videos on Android

Now available on Android, the popular Reactions feature lets users record and add their real-time responses to videos.

This is a must-have for engagement-driven content, mirroring interactions on platforms like TikTok and Instagram. Reactions have become a key element of personal branding and connecting with other creators on social media. With Reactions, users can:

Connect with their audience—duet, respond to trends, or join conversations.
Add a personal touch—react to fan art, viral moments, or inspiring videos.
Show thought leadership—comment on user questions, industry news, or niche topics.
Increase reach—boost visibility and interaction.
Monetize content—sell products and showcase collaborations.

Reactions make content creation fast, easy, and personal.

With our shipped UI, users can select a vertical or horizontal layout to record their reaction video, then customize it with text, filters, adjustments, and more.

It’s easy to crop, trim, and further adjust your video clip—providing a flexible starting point for seamless editing.

Try the live demo and enable Reactions for Android with our documentation.

Improvements

Ensure Text Rendering Across Languages

When a glyph is unavailable in the selected font, CE.SDK automatically falls back to a configurable default font. This prevents localization issues and ensures seamless text rendering, perfect for your global projects.

Simplify Development with Complete TypeScript Support

We’ve improved TypeScript support by exposing previously missing types used in our UI APIs. This enhancement, based on user feedback, reduces complexity and ensures smoother development workflows.

View the Changelog. Thanks for reading!

3,000+ creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.

CE.SDK v1.44 Release Notes

Neslihan — Thu, 06 Feb 2025 07:31:00 GMT

Welcome to CE.SDK v1.44! This release brings a range of updates designed to enhance your editing workflow across platforms. Enjoy more vibrant and true-to-life visuals with expanded P3 color support on iOS and Android. On the web, streamline your editing process with the new ability to add multiple clips per track, making timeline management more efficient.

Let’s dive into the updates!

Simplify Your Video Editing Workflow

Add multiple clips to a single track on your video timeline! With CE.SDK video editing for the web, you can insert video clips, text, overlays, and more on one track—resulting in a more organized and efficient workspace.

This update empowers you to create richer, more dynamic sequences while keeping your timeline neat and easy to navigate.

Maximize Efficiency
Simplicity and speed are key. By reducing the need for multiple tracks, this feature helps users to work smarter and faster—allowing them to focus on creative storytelling and deliver engaging content.

Get started with our Video Editing for Web documentation.

Get Vibrant Colors with P3/Wide Gamut Support

Unlock a broader color range with P3 color space support on iOS and Android devices. This enhancement ensures your designs and content are more vibrant, accurate, and true to life—giving you richer color options for all your projects.

Set up color spaces with our documentation for iOS and Android.

💡 The Canvas menu appears when you select a design block, letting you edit its settings, like duplicating a selected image.

Building on mobile configuration introduced in our last release, we’ve extended customization to the editor Canvas Menu for Android. This update gives you full control over how the menu and its items appear and behave in the editor:

Customization: Configure visibility, transition effects, and decoration. Adjust the style of the divider between buttons.
Item List Control: Modify, add, reorder, or hide menu items.
Flexible Button and Divider Configuration: Adjust button appearance, functionality, and divider styles to match your design requirements.

More customizations will be available soon, including for iOS.
Explore the documentation.

Improvements

Switch the Editor Language without Restarting

Easily switch languages in our web editor without restarting it. This update lets you update the UI language instantly via API, streamlining localization. Check our documentation, and translate right away!

Upcoming

Record Reactions to Videos on Android
We’re excited to announce that Reactions will soon be available on Android. Already live in CE.SDK on iOS, this feature—popularized by platforms like TikTok and Instagram—allows users to capture and share their real-time responses to videos. Enhance engagement and provide content creators with immediate, interactive feedback, making your video content even more dynamic.

View the Changelog. Thanks for reading!

3,000+ creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.

CE.SDK v1.43 Release Notes

Neslihan — Mon, 03 Feb 2025 12:20:13 GMT

Welcome to CE.SDK v1.43! This update brings you enhanced customization tools, allowing you to tailor the interface of your Android Editor to fit your workflow. With new possibilities for mobile configurations, you’ll enjoy a more flexible and responsive user experience. Let’s dive into what’s new!

Shape Your Interface Around Your Workflow

We’re excited to introduce powerful new ways to customize your Editor on Android. Easily configure your dock and inspector—giving you the flexibility to design a more personalized, responsive user experience!

💡 The dock is where you keep essential tools for quick access, while the inspector provides detailed controls and settings for the selected item. What’s New:

Rearrange Your Dock
Move and remove dock items freely while keeping your custom settings intact, like button height.

Smart Custom Buttons
For a more responsive workflow, add buttons that dynamically appear, change, or disappear based on your workflow—adapting to selected tools or active tasks.

Real-Time Updates
The dock updates in real-time, instantly reflecting changes to icons or visibility and adapting seamlessly to your workflow.

More customization options are coming soon! This update will be available on iOS shortly. Get started with our docs for Inspector and Dock Configuration.

Control How Images Fit into Blocks

This web feature is perfect for customizing how images appear in designs and templates, allowing for more precise control. With Fill Mode for images, you can choose from three options:

Crop: Resizes and may crop the image to fill the block.
Cover: The image fully covers the block while remaining centered both vertically and horizontally.
Fit: Scales the image to fit within the block without cropping, leaving space if necessary.

Control this via API, with details in our documentation.

Upcoming

Streamline Your Video Editing Workflow

Our next release makes web video creation smoother than ever! You will be able to add multiple video clips within a single track on your timeline, keeping your workspace organized and efficient. No more juggling extra tracks—just a clean, intuitive editing experience that lets you focus on bringing your vision to life.

View the Changelog. Thanks for reading!

3,000+ creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.

CE.SDK v1.39 Release Notes

Neslihan — Tue, 10 Dec 2024 10:23:38 GMT

This release introduces powerful new features to take your app’s content creation capabilities to the next level. With the new Camera UI for Android, users can now capture high-quality videos directly within your app, making content creation smoother than ever.

This update also brings enhancements like color backgrounds for text, helping users add a professional touch to their designs.

Capture Videos on Android

Easily integrate video recording capabilities into your Android app: our new Camera UI for Android empowers users to capture high-quality videos directly within your app, streamlining the content creation process. With intuitive controls and customizable settings, it’s designed to fit seamlessly into your app’s workflow.

If you’re already using our Video Editor for Android, which includes a sleek timeline editor, you can easily enhance functionality by adding clips and selecting ‘Camera’ to record new footage directly into your timeline.

With the Android Camera UI, your users can create engaging video content without requiring additional tools, keeping them fully engaged within your app.

Get started today:

Dive into our Documentation
Explore the feature in our Demo

Add Backgrounds to Text

Apply solid color backgrounds to text. Additionally, adjust padding and rounded corners of your text background. This new feature ensures readability and adds a polished, professional touch to your designs. By elevating text design, your app helps users create visually compelling content that stands out.

Try customizing text in our Demo.

Upcoming

Our next release is right around the corner, which includes React Native & Expo Support. Get ready for more upcoming tools and even better developer experience:

Reimagining Our Documentation
We’re revamping our documentation to deliver a superior developer experience. With improved structure, searchability and an AI-friendly design, our new docs will cater to both developers and their AI tools of choice. Our documentation will be further optimized for clarity, structure, and accessibility, making navigation, integration and creation easier than ever.

View the complete Changelog. Thanks for reading!

Over 3,000 creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.

CE.SDK Video Editor Now Available on Android

Jan — Tue, 22 Oct 2024 11:44:02 GMT

We are excited to announce the release of CE.SDK’s video editing and video content creation tools for Android!

After the successful iOS launch, CE.SDK’s professional video editing capabilities are now available for Android. Whether your app focuses on social media, e-commerce, or marketing technology, CE.SDK enables users to create high-quality videos directly within your app.

Getting Started

Getting up and running with an instance of the CE.SDK video editor for Android is easy.

After downloading your license (get your trial license here) from your dashboard, simply invoke VideoEditor as composable function, Activity or Fragment.

Our Video Editing Backstory

Since we launched VideoEditor SDK almost ten years ago, we have seen an astounding range of creative and unique use cases of our SDK in customer projects. From Cameo connecting celebrities and their fans in new ways, over Multibrain supercharging their users marketing campaigns with editable video content, to Zigazoo powering video content within their social network for kids while putting safety and parental control first.

Since then, millions of users have experienced IMG.LY’s VideoEditor SDK through our customers’ products, shaping how they expect to interact with and modify videos. Continuous feedback from both our customers and their users has also influenced the way we approach video interface design, helping us refine and innovate along the way.

Our goal was to combine the reliability and robustness of the VideoEditor SDK with true cross-platform compatibility and the flexibility to meet diverse needs. By applying the lessons we’ve learned, we aimed to deliver an exceptional video editing user experience straight out of the box. We described how those learnings shaped the design of the mobile video editing interface.

Key Capabilities

With CE.SDK’s sleek timeline interface, your Android users can now take their video editing from simple transforms and adjustments to complex composition and multi-track editing:

Timeline-Based Editing
Split, trim, arrange video and audio tracks. Position elements such as images and stickers on the timeline and control their duration.

Multi-Track Editing
Work with multiple video and audio tracks, allowing for complex composition.

Transform & Enhance
Crop, flip, rotate, and use presets for common video formats. Add filters, effects, blur and essential adjustments.

Customizable Templates
Create and import templates using our web video editor, to jumpstart your users’ video composition and designs.

Asset Integration
Integrate your own asset libraries for audio tracks, sound effects, images, and more.

Cross-platform Interoperability
CE.SDK’s video capabilities extends across iOS, Android and the Web, enabling cross-platform applications to offer seamless video editing capabilities. Users can edit and save work in progress and pick up on any device.

Check out the showcase app for an interactive demo of these features.

Customization

The ability to tailor the video editor to your app’s particular use case has been a front and center concern in its development.

UI Customization: While theming is currently limited to dark and light model, future releases will introduce more flexible theming, allowing you to modify the look and feel of the editor to match your app’s branding. Furthermore, we expose callbacks that make it possible to hook into editor events and overlays for custom dialogues.
Configure Video Presets: You can configure the editor to create video presets based on your users’ needs. For instance, you may want to fix the video’s aspect ratio or optimize for certain resolutions, depending on the target platform.
Video Templates: With the CE.SDK video editor web UI, you can create an unlimited number of video templates, such as collages, text designs, and animations, providing your users with professional-quality starting points for their video designs.
Assets: Provide custom filters, fonts, and stickers to enhance the user experience. For niche apps, this can be an excellent way to engage users by offering content that feels unique to your community.

CE.SDK’s new Android video editing capabilities are perfect for a variety of use cases, including:

Social Media Applications: The CE.SDK video editor for Android excels at short-form video, ideal for social media applications, whether your users are publishing to other networks or you run a network yourself.
Ecommerce: Allow your users to create engaging product showcases, ads, and promotional videos, testimonials or reviews.
Marketing Tech Platforms: Users can leverage our versatile templating to easily create polished social media and marketing graphics from within your app.

What’s Next?

This Android release is just the beginning! We are about to launch a Camera UI for Android and are working on more advanced template creation features. So stay tuned.
To see some of these features in action, check out our iOS demo, where the next phase of innovation is unfolding.

Get Started

Explore our Video UI Showcase and Documentation for Android to discover how CE.SDK can streamline your content creation projects and make Android video editing easier than ever.

Over 3,000 creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.

CE.SDK v1.36 Release Notes

Neslihan — Tue, 08 Oct 2024 09:52:59 GMT

Welcome to the latest update of CE.SDK. We are bringing you new features that enhance your app’s creative capabilities and user experience. This release includes the highly requested Animations for Web and our Video Timeline for Android.

Let’s dive in!

Animate On The Web

We’re introducing animation support for our Video Editor for the web. With this update, you can now apply various animations, such as blur, zoom, and slide, to elements directly within the editor.

Animate and Fine-Tune Settings

Select a ‘block’ on your canvas — that includes images, videos, text, shapes, and stickers. Then choose from twelve in-and-out animations or nine loop animations. Lastly, fine-tune your selected animation, by tweaking the properties, for custom movement and transition.

Get started with our animation documentation.

Edit Videos on Android

We are proud to launch our video editing and content creation tools for Android, following our tried and tested iOS launch. Get started with a fully customizable UI for video editing:

Now Android users can crop, split, trim, and compose videos. Add multiple elements—videos, photos, stickers, and more—to a timeline to create engaging content. Editing options like filters, effects, and audio tracks turn it into a one-stop solution for video creation.

Integrate your custom asset library for stock photos, videos, stickers, and music.

With customizable video formats, users can create content for specific platforms like Instagram and TikTok. Whether it’s stories or Ultra HD, the canvas auto-adjusts, making it easy to tailor videos for any need.

Explore our Android Showcase.

Explore New Showcases

Explore our latest solutions.

Photo Editor UI (Web)
Integrate and customize a powerful photo editor for your web apps. With background removal, cropping, adjustments, and filters, users can enhance their photos easily.

Photoshop Template Importer
Import Photoshop templates into CE.SDK while preserving key design elements like positioning, rotation, images, and text. Bulk importing is also supported for larger projects.

Upcoming

Camera UI for Android

We’re committed to expanding our out-of-the-box solutions for Android, including our upcoming Camera UI. Check out our iOS demo to see it already in action. These enhancements will further enrich the content creation experience for your Android users. Stay tuned for more updates.

React Native Support
We’re excited to announce that CE.SDK React Native support is on the way for both iOS and Android. Developers will be able to get started with React Native by integrating our fully customizable editor UIs for video, photo, and design editing, just like in Flutter.

Animate Text

With the CE.SDK v1.36 animation release, you can already animate entire text blocks. For instance, you can slide in or fade out text. However, to create more intricate animations of letters, we are excited to announce a dedicated text animation release for web soon.

View the full CE.SDK v1.36 Changelog. Thanks for reading! We are happy to support you with any questions you have.

Over 3,000 creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.

CE.SDK v1.33 Release Notes

Neslihan — Thu, 29 Aug 2024 12:08:57 GMT

Welcome to the latest update of CE.SDK! We are bringing you new features that enhance your app’s creative capabilities and user experience. This release includes Configurations for a Design Editor or Photo Editor on iOS and Android, Plugins, Voiceover Capabilities, and more.

With this release, you can:

Integrate a Design Editor on iOS and Android

Get started with our new Design Editor configuration for iOS and Android. The out-of-the-box package is designed for easy creation and management of multipage designs.

Users can switch between editing and the page overview mode to review and adjust their work.

Keep the design process straightforward and efficient: the editor features a dock at the bottom, offering convenient access to essential tools like adding text, images, stickers, and uploading new assets. Additionally, you can insert a photo directly from your camera.

Key Features

Page Management
Create and manage your design pages within a template. It’s easy to create fun carousel posts, as seen on Instagram and LinkedIn, or create a series. Head to the ‘Pages’ icon on the top right bar. In the page overview, you can create, duplicate, and edit a page. Lastly, you can change the order of pages by moving them up and down.

Image Settings
Selecting an image lets you fine-tune adjustment settings, and add filters, effects, or blur. Easily crop, straighten, rotate, or flip images.

Try the Design Editor Configuration on iOS and Android.

Use Plugins to Customize UI and Add Quick Actions

We’re excited to introduce the first part of our plugin release for CE.SDK on the web: with this release, you can tailor the editor’s UI elements, reorder components, and add quick actions like background removal.

We’ve enabled extension points within key areas of the UI: the Canvas, Navigation bar, Inspector Bar, Dock, and Canvas Menu. Modify the appearance of existing features, register new components, and integrate quick actions. For example, you can add a “Background Removal” button directly in the Canvas Menu or create complex interactions like custom cut-out lines.

For more details on this first batch release and the upcoming plugins, please read our dedicated article.

Add Voiceovers to Videos on iOS

Add voiceover tracks directly within your mobile app, making your projects more dynamic and engaging. Whether creating a tutorial, narrating a slideshow, or adding commentary to a video, this feature allows you to seamlessly record, edit, and integrate voiceovers.

The popular feature, as enjoyed on TikTok and Instagram, is a staple for content creation and adds a personal touch to video creations.

To get started, navigate to “Add Audio”, select “Voiceover” section and start recording. You can preview the recording, re-record it, and add more audio, such as music. Adjust the audio levels for a balanced background track.

Try recording a voiceover with our Demo App for iOS.

Integrate a Photo Editor for iOS and Android

Our new Photo Editor Configuration is designed to offer an intuitive, out-of-the-box solution that bundles a range of key photo editing capabilities. Enhance individual photos, add text and shapes, or apply filters—this configuration is a kick-start to provide high-quality photo editing for iOS and Android with CE.SDK.

Key Features

Crop, Resize
Crop, straighten, flip, resize, and rotate your photos.

Adjustments
Fine-tune your photos by adjusting brightness, contrast, and other key settings, ensuring your images look their best.

Text, Shapes, and Stickers
Enhance your photos by adding and customizing text, shapes, and stickers. Whether you’re creating eye-catching titles, intricate shapes, or playful stickers—our configuration gives you the flexibility to adjust fonts, font colors, sizes, and positions to perfectly match your vision.

Effects, Filters, Blur, Blending Modes
Transform your images with fun effects, blur, and filters. Apply overlays to add depth and texture to your photos by adjusting blend modes and opacity to achieve the perfect effect.

Additionally, use our range of photo filters to set the mood, from warm and nostalgic tones to vibrant, modern effects, giving your images a distinctive and professional look.

Check our documentation to get started with our photo editor configuration, or try the photo editor on iOS and Android.

Improvements

Preview Audio on iOS and Android

We’ve made it easier to select the perfect audio clip for your projects. Listen to audio tracks directly within the interface before adding them to your video. Tap the play button of an audio clip in the asset library to preview it, and adjust your audio clip within the timeline.

Resize Pages

Resize pages in your web editor by simply grabbing corners and side handles, moving beyond the limitations of input fields or preset format sizes. This intuitive resizing integrates seamlessly with other adjustments, such as image cropping, ensuring a smooth workflow. Enable or disable this behavior as needed.

Create Rounded Corners

You can now easily create rounded corners for images on the web, iOS and Android. Within your designs, you can add a sleek and modern touch to your projects.

Drag and Select Multiple Elements

You can now click and drag with your mouse to draw a selection rectangle, instantly selecting all blocks within the covered area. This feature saves you time and effort, working with complex templates.

Thanks for reading! Don’t hesitate to reach out if you have any questions or need assistance.

Over 3,000 creative professionals gain early access to our new features, demos, and updates—don’t miss out, and subscribe to our newsletter.

Please note that these release notes also include improvements from previous versions.

Elegant Event Handling in Kotlin - A Refactoring Walkthrough

Sven — Fri, 29 Sep 2023 07:00:53 GMT

In the world of software development, code refactoring is the hero that rescues us from tangled and inefficient code. In this article, we’ll embark on an adventure to revamp Kotlin code handling diverse events. Our mission? To enhance performance and style, making the code sleeker, more maintainable, and a joy to work with.

What We Aim to Achieve

On this journey to transform Kotlin event handling, our goal is to refine our code to be more efficient, readable, and maintainable. We’re introducing a variety of improvements, including:

Replacing a convoluted when statement with a HashMap for lightning-fast (O(1)) performance.
Infusing syntactic sweetness with inline functions and reified type parameters.
Employing delegated properties for cleaner dependency injection.
Adhering to the Single Responsibility Principle by enabling multiple specialized event handler functions.

Step 1: The Starting Line

Our adventure begins with a glance at the original code. This codebase manages a variety of block events through a function named handleBlockEvent and an event handler function called onEvent. Let’s unveil the original code:

open fun onEvent(event: Event) {
    // ...
    handleBlockEvent(engine, getBlockForEvents(), checkNotNull(assetsRepo.fontFamilies.value).getOrThrow())
}

fun handleBlockEvent(engine: Engine, block: DesignBlock, fontFamilyMap: Map<String, FontFamilyData>, event: BlockEvent) {
    when (event) {
        BlockEvent.OnDelete -> engine.delete(block)
        BlockEvent.OnBackward -> engine.sendBackward(block)
        BlockEvent.OnDuplicate -> engine.duplicate(block)
        BlockEvent.OnForward -> engine.bringForward(block)
        BlockEvent.ToBack -> engine.sendToBack(block)
        BlockEvent.ToFront -> engine.bringToFront(block)
        BlockEvent.OnChangeFinish -> engine.editor.addUndoStep()
        is BlockEvent.OnChangeBlendMode -> onChangeBlendMode(engine, block, event.blendMode)
        is BlockEvent.OnChangeOpacity -> engine.block.setOpacity(block, event.opacity)
        is BlockEvent.OnChangeFillColor -> onChangeFillColor(engine, block, event.color)
        // and so on...
    }
}

sealed class BlockEvent : Event {
    object OnChangeFinish : BlockEvent
    object OnForward : BlockEvent
    object OnBackward : BlockEvent
    object OnDuplicate : BlockEvent
    object OnDelete : BlockEvent
    object ToFront : BlockEvent
    object ToBack : BlockEvent
    data class OnChangeBlendMode(val blendMode: BlendMode) : BlockEvent
    data class OnChangeOpacity(val opacity: Float) : BlockEvent
    data class OnChangeFillColor(val color: Color) : BlockEvent
    // and so on...
}

To use the original code, you’d typically call the onEvent function with a specific event:

onEvent(BlockEvent.OnChangeFillColor(Color.RED))

This would then trigger the handleBlockEvent function to deal with the event at hand. Now, let’s embark on our first refactoring adventure.

Step 2: Unveiling HashMaps and Payloads for Peak Performance

In our first act of refactoring, we introduce a trusty HashMap to map each event type to its corresponding action. This heroic move eliminates the need for the convoluted when statement, making our code more efficient. We also unveil a payload mechanism to convey essential data to the event handlers.

Behold the refactored code:

abstract class EventsHandler<Payloads>(
    val fillPayload: (cache: Payloads) -> Unit
) {
    abstract val payloadCache: Payloads
    private val eventMap = mutableMapOf<KClass<out Event>, Payloads.(event: Event) -> Unit>()

    fun handleEvent(event: Event) {
        eventMap[event::class]?.let {
            it.invoke(payloadCache.also { fillPayload(it) }, event)
        }
    }

    operator fun <EventType : Event> set(event: KClass<out EventType>, lambda: Payloads.(event: EventType) -> Unit) {
        eventMap[event] = lambda as Payloads.(event: Event) -> Unit
    }
}

class BlockEventsHandler(fillPayload: (cache: BlockEventsHandler.Payloads) -> Unit) : EventsHandler<BlockEventsHandler.Payloads>(fillPayload) {
    class Payloads {
        lateinit var engine: Engine
        lateinit var block: DesignBlock
        lateinit var fontFamilyMap: Map<String, FontFamilyData>
    }
    override val payloadCache: Payloads = Payloads()

    init {
        it[BlockEvent.OnDelete::class] = { engine.delete(block) }
        it[BlockEvent.OnBackward::class] = { engine.sendBackward(block) }
        it[BlockEvent.OnDuplicate::class] = { engine.duplicate(block) }
        it[BlockEvent.OnForward::class] = { engine.bringForward(block) }
        it[BlockEvent.ToBack::class] = { engine.sendToBack(block) }
        it[BlockEvent.ToFront::class] = { engine.bringToFront(block) }
        it[BlockEvent.OnChangeFinish::class] = { engine.editor.addUndoStep() }
        it[BlockEvent.OnChangeBlendMode::class] = { onChangeBlendMode(engine, block, it.blendMode) }
        it[BlockEvent.OnChangeOpacity::class] = { engine.block.setOpacity(block, it.opacity) }
        it[BlockEvent.OnChangeFillColor::class] = { onChangeFillColor(engine, block, it.color) }
        // and so on...
    }
}

private val blockEventHandler = BlockEventsHandler {
    it.engine = engine
    it.block = getBlockForEvents()
    it.fontFamilyMap = checkNotNull(assetsRepo.fontFamilies.value).getOrThrow()
}

open fun onEvent(event: Event) {
    // ...
    blockEventHandler.handleEvent(event)
}

A Performance Boost

By harnessing the power of a HashMap, we’ve turbocharged our event handling. The time complexity for handling an event is now a lightning-fast (O(1)), a monumental improvement over the (O(n)) time complexity of the ponderous when statement. While our payload mechanism adds a dollop of syntactic sugar. It enables us to bundle all the necessary data into a single object, making our code more legible and maintainable.

? Note: Using a HashMap instead of a large when() statement provides a significant performance improvement. It can be up to 40 to 150 times faster. However, explaining the details would exceed the scope of this blog post. Therefore, I will cover it, along with other Kotlin performance puzzles, in a future blog post.

While the refactored code remains as simple as before:

onEvent(BlockEvent.OnChangeFillColor(Color.RED))

This still triggers the handleEvent method in BlockEventsHandler, which in turn performs the appropriate action based on the event type. The BlockEvent itself is a data object containing all event details, and it serves as the lambda parameter.

A Note on Payloads

The payload creation is a dynamic lambda function that’s executed each time an event is handled. This ensures that all variables not part of the event are consistently up-to-date. Given that we’re dealing with a single thread per event handler, caching the payload is entirely secure.

Step 3: Adding Syntactic Sweetness with Infix Functions

In our next act, we elevate our syntax to a new level of expressiveness and readability. We introduce an infix function called to, allowing us to map an event class to its corresponding action elegantly.

Witness the updated code:

abstract class EventsHandler<Payloads>(
    val fillPayload: (cache: Payloads) -> Unit
) {
    infix fun <Payloads, EventType : Event> KClass<out EventType>.to(lambda: Payloads.(event: EventType) -> Unit) {
        eventMap[event] = lambda as Payloads.(event: Event) -> Unit
    }
    // ... (rest of the code remains the same)
}

class BlockEventsHandler(
    manager: EventsManager,
    override val fillPayload: (cache: TextBlockEventsHandler) -> Unit
) : EventsHandler<TextBlockEventsHandler>(manager) {
    lateinit var engine: Engine
    lateinit var block: DesignBlock
    lateinit var fontFamilyMap: Map<String, FontFamilyData>

    init {
        BlockEvent.OnDelete::class to {
            engine.delete(block)
        }
        BlockEvent.OnBackward::class to {
            engine.sendBackward(block)
        }
        BlockEvent.OnDuplicate::class to {
            engine.duplicate(block)
        }
        BlockEvent.OnForward::class to {
            engine.bringForward(block)
        }
        BlockEvent.ToBack::class to {
            engine.sendToBack(block)
        }
        BlockEvent.ToFront::class to {
            engine.bringToFront(block)
        }
        BlockEvent.OnChangeFinish::class to {
            engine.editor.addUndoStep()
        }
        BlockEvent.OnChangeBlendMode::class to {
            onChangeBlendMode(engine, block, it.blendMode)
        }
        BlockEvent.OnChangeOpacity::class to {
            engine.block.setOpacity(block, it.opacity)
        }
        BlockEvent.OnChangeFillColor::class to {
            onChangeFillColor(engine, block, it.color)
        }
        // ...
    }
}

Syntactic Sweetness and Performance

The introduction of the to infix function adds a sprinkle of syntactic sweetness that enhances code expressiveness and enables a more natural usage. This makes it crystal clear what each event is all about. And fear not, the performance remains at a blazing-fast (O(1)), thanks to our trusty HashMap.

Flexibility in Syntax

While the to keyword is used here, feel free to substitute it with other terms like handle, trigger, or anything that best suits your context. Flexibility is the name of the game.

Step 4: Embracing Inline Functions for Elegance

However, this is still not perfect because the ::class breaks smooth reading.

So let’s do it differently. Let us try to introduce a more elegant way to register an event. Let us eliminate the need to specify ::class every time we register an event handler will make our code more concise and readable.

This is made possible by an inline function with a verified type parameter that maintains the class reference at runtime.

To do this, we extend the EventsHandler class with this new register function:

class EventsHandler(
    register: EventsHandler.() -> Unit,
) {
    inline fun <reified EventType : BaseEvent> register(noinline lambda: (event: EventType) -> Unit) : Any {
        this[EventType::class] = lambda
        return lambda
    }
   // ... (rest of the code remains the same)
}

The New Syntax

This is what registering an event handler looks like with the new syntax:

register<BlockEvent.OnChangeLineWidth> {
    engine.block.setWidth(block, engine.block.getFrameWidth(block))
    engine.block.setHeight(block, it.width)
}

Much better, right? The new syntax is more concise, eliminates redundancy, and is type-safe because the reified type parameters ensure that the event type is known at compile-time and runtime, eliminating the need for unsafe casting.

Step 5: Elevating `register` to an Extension Function for Highlighting

To improve code readability, we’ll make a subtle but effective step by converting the register function from a EventsHandler class function, into an EventsHandler extension function.

Sounds stupid! So why?

This small change improves code readability by highlighting the register keyword through syntax highlighting from a Kotlin extension function. This will make it much more colorful, which improves readability.

Updated `EventsHandler` Class

The EventsHandler class remains largely unchanged, but the register function is now outside the class and transformed into an extension function for the EventsHandler class:

class EventsHandler(
    register: EventsHandler.() -> Unit,
) {
    // ... (rest of the code remains the same)
}

inline fun <reified EventType : BaseEvent> EventsHandler.register(noinline lambda: (event: EventType) -> Unit) : Any {
    this[EventType::class] = lambda
    return lambda
}

By simply shifting register out of the class, the EventsHandler class definition now stands out with distinctive syntax highlighting. It’s a clever trick that doesn’t impact runtime or compile performance, since it’s an inline operation anyway.

**register**<BlockEvent.OnChangeLineWidth> {
    engine.block.setWidth(block, engine.block.getFrameWidth(block))
    engine.block.setHeight(block, it.width)
}

Step 6: Eliminating `lateinit` Variables with Delegated Properties

Now, it’s time to address the enigmatic lateinit variables and the somewhat convoluted fillPayload mechanism. Let us introduce a cleaner approach, using delegated properties and lambda functions to inject dependencies.

Let’s add an Inject class to wrap a normal lambda as delegable:

class Inject<Type>(private val inject: () -> Type) {
    operator fun getValue(thisRef: Any?, property: KProperty<*>): Type = inject()
}

With this newfound power, our event handler code becomes cleaner and more intuitive. It takes on the style of Jetpack Compose’s declarative syntax:

fun EventsHandler.textBlockEvents(
    engine: () -> Engine,
    block: () -> DesignBlock,
    fontFamilyMap: () -> Map<String, FontFamilyData>,
) {
    // Inject the dependencies
    val engine by Inject(engine)
    val block by Inject(block)
    val fontFamilyMap by Inject(fontFamilyMap)

    // Event handling logic here
    // ...
}

Whenever one of the variables is accessed, the lambda is called, and you always get the current variable.

Also, the creation of the “payload” becomes more straightforward, clean, and type-safe. It kinda looks like passing a variable:

private val eventHandler = EventsHandler {
    textBlockEvents (
        engine = ::engine,
        block = ::getBlockForEvents,
        fontFamilyMap = { checkNotNull(assetsRepo.fontFamilies.value).getOrThrow() },
    )
}

Looks and feels like magic! Pretty cool, right?

Step 7: Multiple Event Handlers for Single Responsibility Principle

In our grand finale, we harness the newfound flexibility from our previous changes to register multiple event handler functions. Each event handler registration function now has a specific topic, aligning perfectly with the Single Responsibility Principle (SRP).

Enhanced Event Handler Registration

We can now register multiple event handler functions within the same EventsHandler instance. Each function can specialize in handling a particular type of event, making the code more modular and manageable. Behold the grand design:

private val eventHandler = EventsHandler {
    cropEvents(
        engine = ::engine,
        block = ::getBlockForEvents,
    )
    blockEvents (
        engine = ::engine,
        block = ::getBlockForEvents,
    )
    textBlockEvents (
        engine = ::engine,
        block = ::getBlockForEvents,
        fontFamilyMap = { checkNotNull(assetsRepo.fontFamilies.value).getOrThrow() },
    )
    // ...
}

fun EventsHandler.blockEvents(
    engine: () -> Engine,
    block: () -> DesignBlock
) {
    val engine: Engine by Inject(engine)
    val block: DesignBlock by Inject(block)

    register<BlockEvent.OnDelete> { engine.delete(block) }

    register<BlockEvent.OnBackward> { engine.sendBackward(block) }

    register<BlockEvent.OnDuplicate> { engine.duplicate(block) }

    register<BlockEvent.OnForward> { engine.bringForward(block) }

    register<BlockEvent.ToBack> { engine.sendToBack(block) }

    register<BlockEvent.ToFront> { engine.bringToFront(block) }

    register<BlockEvent.OnChangeFinish> { engine.editor.addUndoStep() }

    register<BlockEvent.OnChangeBlendMode> {
        if (engine.block.getBlendMode(block) != it.blendMode) {
            engine.block.setBlendMode(block, it.blendMode)
            engine.editor.addUndoStep()
        }
    }

    register<BlockEvent.OnChangeOpacity> { engine.block.setOpacity(block, it.opacity) }
}

fun EventsHandler.cropEvents(
    engine: () -> Engine,
    block: () -> DesignBlock
) {
    val engine: Engine by Inject(engine)
    val block: DesignBlock by Inject(block)
    // ... (event handling logic for cropping events)
}

fun EventsHandler.textBlockEvents(
    engine: () -> Engine,
    block: () -> DesignBlock,
    fontFamilyMap: () -> Map<String, FontFamilyData>,
) {
    val engine by Inject(engine)
    val block by Inject(block)
    val fontFamilyMap by Inject(fontFamilyMap)
    // ... (event handling logic for text block events)
}

While the triggering and its API remain unchanged, and no extra parameters need to be passed:

open fun onEvent(event: Event) {
    eventHandler.handleEvent(event)
}

Final Words

As we conclude our journey through Kotlin code refactoring, we’ve unlocked the secrets to enhanced performance and style. By embracing techniques such as HashMaps, infix functions, and inline functions with reified type parameters, we’ve elevated our code to new heights. The benefits are clear: improved efficiency, readability, and adherence to the Single Responsibility Principle. Armed with these tools, you’re now ready to embark on your own coding adventures, transforming messy code into elegant masterpieces.

If you’d like to try it out, I’ve created a working example code on the Kotlin Playground.

Thank you for accompanying, and happy coding! Never miss out on updates and subscribe to our newsletter.

CE.SDK v1.15 Release Notes

Neslihan — Tue, 26 Sep 2023 08:14:20 GMT

Since our last release, we’ve been busy crafting new features and enhancements to empower your creative editing journey. We are thrilled to release CE.SDK v1.15!

With this release, you can:

Create Accurate Cutouts and Vectors

Interfaces: Engine, Editor
Platforms: All

Picture this: Your users are deep into a design project, and need to isolate an object from an image. Our latest feature simplifies this process. Whether it’s a logo, text, or a complex shape in an SVG - by clicking “Generate from Selection”, our system precisely detects object contours and effortlessly converts them into cutout lines. This means you can breeze through your design tasks without the hassle of manual tracing.
Learn more about Cutouts in our documentation.

Effortlessly Edit Across All Screen Sizes

Interfaces: Editor
Platforms: Web

We’re excited to introduce a suite of responsive UI enhancements that ensure effortless editing on all devices, including smaller screens and mobile devices. Our editor adapts to limited screen space, automatically fits content to avoid cutoffs, hides button labels when space is tight, and ensures panels remain easy to use, even on small screens. Plus, you have complete control over when and where labels appear, allowing you to customize the interface to your liking.

Improved Android Video & Audio Experience

Interfaces: Editor, Engine
Platforms: Android

Experience an enhanced video and audio experience on Android with our latest update. With our optimized codec performance, we’ve fine-tuned our tools to ensure your videos and audio play flawlessly. Enjoy smoother playback, especially when navigating through your content. Also, no more delays or interruptions when seeking in your videos or audio files. Now, you can effortlessly skip to your desired moments for uninterrupted enjoyment.

Thank you for reading! Never miss out on updates and subscribe to our newsletter.

CE.SDK v1.10 Release

Neslihan — Tue, 14 Mar 2023 15:30:46 GMT

We are pleased to announce the latest release of CE.SDK v1.10 and excited to share the newest features and updates with you. For those not yet familiar with our engine, CreativeEditor SDK is a powerful design editor that enables customizable workflows and automations for brands, agencies, and printers, all with just a few lines of code. In this release, we have introduced several new features and updates that are set to elevate the functionality and usability of the SDK, including:

Android Platform Support, making native Android application development seamless
Library Improvements, including Create, Update & Delete for Asset Libraries and Asset Libraries Generalization
Zoom Improvements, providing greater precision and accuracy when zooming to 100% and fitting specific pages
Arrange API, simplifying the visual order of items and providing common arrange methods for easier use

Android Platform Support

Our last release included iOS Native Support. So now we are thrilled to share that CE.SDK has expanded its capabilities to include full support for developing native Android applications. With this latest feature, you can seamlessly integrate the power and versatility of CE.SDK into your Android app development projects, enhancing the user experience and boosting customer engagement. Our team has worked tirelessly to make it incredibly easy for you to get started, with full Kotlin API support and plenty of integration examples to help you hit the ground running.

In today’s ever-evolving digital landscape, cross-platform app development has become essential for businesses to stay competitive. By leveraging CE.SDK’s cross-platform capabilities, you can develop and deploy apps across multiple platforms with ease, saving time and resources. This not only increases your reach, but it also allows you to provide a consistent experience to your customers, regardless of their device of choice.

Whether you’re a seasoned developer or new to the game, our Get Started Guide will equip you with the knowledge and tools necessary to begin your Android app development journey with CE.SDK.

Library Improvements

Create, Update and Delete for Asset Libraries

To streamline your workflow and save valuable time, we’ve added a much-requested feature that allows you to delete uploaded images directly from inside the asset libraries, giving you greater control and flexibility over your content.

We have updated our engine so that uploaded assets are no longer automatically tied to scenes.

Asset Libraries Generalization

We have migrated all our internal and external asset handling to be based on asset sources, eliminating the need to maintain different paths for adding and displaying assets. All visible assets are now queried from asset sources, which can be modified by adding or removing assets from a source. Additionally, we have introduced convenient helpers to create IMG.LY’s default asset sources, which contain assets that you can use to jumpstart your integration.

Zoom Improvements

Zooming has always been an integral part of editing, and our latest release makes it even more versatile and precise. With our new zoom feature, users can now zoom to fit specific pages, providing greater control and accuracy when editing complex designs. Additionally, zooming to 100% will now automatically adjust the zoom level to match the accurate export pixel size. This means that the size of pages on the screen will match exactly the size of the printed product, ensuring a seamless transition from editing to the final product. With this latest enhancement, CE.SDK is committed to providing businesses, agencies, and printers with a comprehensive and intuitive design editor.

Arrange API

We are introducing enhanced functionality for controlling the visual order of items within blocks. Previously, this could only be achieved by manually rearranging the order of the children of a block. With our latest release, we’ve extended the API with new convenience methods that provide common arrange methods for easier use.

Thanks for reading! Sign up for our Newsletter to receive our latest news straight to your inbox.

Time-Based Sprites for VE.SDK on iOS and Android

Neslihan — Mon, 05 Sep 2022 07:06:05 GMT

We are happy to extend VideoEditor SDK with a highly-requested feature: Time-Based Sprites. This new feature sets the duration of text and stickers in your video timeline. Users may now place fun stickers and text at the right moment, and give their videos a special touch.

Time-Based Sprites

The popular feature known from TikTok and Instagram Reels is now available in VE.SDK: set the starting and end point of your text or sticker. Tap your text or sticker and select Duration to determine the duration of your asset.

Unless you have specified a custom set of sticker or text actions, this feature is enabled by default since VE.SDK v10.3.0 for Android and v11.3.0 for iOS. See the official documentation for iOS or Android on Time-Based Sprites.

Why is Video Important?

Video content has become an essential medium for social media, marketing, sales, and support teams. According to marketing statistics, people are watching an average of 19 hours of online video per week in 2022. 88% of people say that they felt convinced to buy a product or service by watching a brand’s video. The growing trend and preference of consumers are why businesses are shifting their attention toward including videos in their strategies and applications.

We commit to extending our video editing features to help developers meet the demand, save resources and streamline the process of building great applications. Let us have a look at our previous VE.SDK releases:

Video Composition
Users may seamlessly edit their footage by trimming and adjusting video files with advanced filters. Finally, they can set the correct order of their video sequences to create a single composition.

Audio Support
Replace or add sound in videos by loading audio files. Users can trim their audio according to their footage. Developers can provide media libraries for audio and video files. That way, users may access media by choosing from labeled folders, such as genre, theme, or artist names.

Force Trim
The VE.SDK trim tool allows users to determine the start and end frame of a video clip and change the duration of their footage. Now you can enforce a minimum and maximum length of videos. Force Trim will come in handy for use cases, such as social media stories and posts popularly limited to bite size 15 or 60 seconds by widely loved apps – see TikTok or Instagram. Adopting a ready-to-use solution like VE.SDK will set you on your path to creating equally beautiful apps.

Thanks for reading! Let us know what you think on Twitter – or check out our Newsletter for more accelerating updates.

How To Crop and Trim Videos In Kotlin for Android

Paul — Fri, 02 Sep 2022 10:18:21 GMT

Cropping and trimming videos is a notoriously difficult task to achieve on Android. One way to implement this functionality is by using FFmpeg a free open-source suite of tools that can perform a wide range of tasks, from video converting to editing. Normally FFmpeg is used from the command line, to use it correctly in Android you have to understand its underlying APIs and how to use them.

In this tutorial, you will learn how to crop and trim videos in Android by using FFmpeg. Even if you are a beginner you should be able to follow the steps to achieve the desired results.

I try to summarise the most important basics that you need to know to manipulate videos with FFmpeg. After reading this article you should be able to use it in your own applications. Furthermore, I have developed a sample application and library that can be used to trim and crop videos with an Android device.

What is FFmpeg

FFmpeg is a great multimedia framework that is able to mux, demux, decode, encode, transcode, filter, stream, and play most media content that exists. FFmpeg supports different tools that can be used to develop an application to manipulate any kind of media to the desired output. You do not have any limitations on what to do with multimedia when using FFmpeg.

Unfortunately, to use FFmpeg in an Android App using Kotlin you have to compile and build the libraries to use them as a dependency in your project. This process is not straightforward because you have to manually compile a C/C++ library with help of the Android NDK.

Luckily, many people already have done this and we are able to use their compiled library in our project. However, if you want to compile FFmpeg from scratch you can do this. All necessary information should be available within the android developer documentation.

To show you how we can use FFmpeg in our app I will use a compiled FFmpeg library that can be found here. To find other FFmpeg libraries you can have a look at the official FFmpeg wiki where several pre-packaged sources are listed.

Setting up the project

In order to use the FFmpeg library of WritingMinds (or any other library), we have to follow some simple steps.

1. Add dependency for the FFmpeg library to your app-level build.gradle

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.writingminds:FFmpegAndroid:0.3.2'
}

2. Check if your device supports the current implementation of FFmpeg or not

fun initialize() {
        val ffmpeg = FFmpeg.getInstance(ctx.applicationContext)
        try {
            ffmpeg.loadBinary(object : LoadBinaryResponseHandler() {
                override fun onFinish() {
                    super.onFinish()
                }

                override fun onSuccess() {
                    super.onSuccess()
                }

                override fun onFailure() {
                    super.onFailure()
                }

                override fun onStart() {
                    super.onStart()
                }
            })
        } catch (e: FFmpegNotSupportedException) {
            Log.e("FFmpeg", "Your device does not support FFmpeg")
        }
    }

3. Initialize the FFmpeg module (leave command blank)

val ffmpeg = FFmpeg.getInstance(ctx)
       ffmpeg.loadBinary(object : FFmpegLoadBinaryResponseHandler {
            override fun onFinish() {
                Log.d("FFmpeg", "onFinish")
            }

            override fun onSuccess() {
                Log.d("FFmpeg", "onSuccess")
                val command = //TODO: the command will added here later
                try {
                    ffmpeg.execute(command, object : ExecuteBinaryResponseHandler() {
                        override fun onSuccess(message: String?) {
                            super.onSuccess(message)
                            Log.d(TAG, "onSuccess: " + message!!)
                        }

                        override fun onProgress(message: String?) {
                            super.onProgress(message)
                            Log.d(TAG, "onProgress: " + message!!)
                        }

                        override fun onFailure(message: String?) {
                            super.onFailure(message)
                            Log.e(TAG, "onFailure: " + message!!)
                        }

                        override fun onStart() {
                            super.onStart()
                            Log.d(TAG, "onStart")
                        }

                        override fun onFinish() {
                            super.onFinish()
                            Log.d(TAG, "onFinish")
                        }
                    })
                } catch (e: FFmpegCommandAlreadyRunningException) {
                            Log.e("FFmpeg", "FFmpeg runs already")
                }
            }

            override fun onFailure() {
                Log.e("FFmpeg", "onFailure")
            }

            override fun onStart() {
            }
        })

4. Implement the commands you want to use in your app

All commands that are supported by FFmpeg can be included in your app with help of an array. This is done by passing every command line argument as a single element within the array. The array will then be translated into an FFmpeg command using the execute method from FFmpeg:

ffmpeg.execute(command, object : ExecuteBinaryResponseHandler() { ... }

As we want to implement Trim and Crop I will show how this can be done using the arrayOf function.

Trim:

val command = arrayOf("-y", "-i", input, "-ss", startPos, "-to", endPos, "-c", "copy", output)

“-y”: overwrites output files without asking
“-i”: specifies an input file
input: the path of the source video to trim
“-ss”: specifies that the next value will be the starting point of the resulting video
startPos: the starting position in “%d:%02d:%02d” format
“-to”: specifies that the next value will be the end position of the resulting video
endPos: the end position in “%d:%02d:%02d” format
“-c” AND “copy”: defines that the stream will not be encoded. The resulting video will only be saved.
output: the path of the resulting video

To better understand every argument you can have a look at the official FFmpeg documentation.

Additionally, to provide arguments for startPos and endPos you normally would have to use a utility function that converts the timestamp of the start and end position into the desired “%d:%02d:%02d” format (a string):

fun convertTimestampToString(timeInMs: Float): String {
        val totalSeconds = (timeInMs / 1000).toInt()
        val seconds = totalSeconds % 60
        val minutes = totalSeconds / 60 % 60
        val hours = totalSeconds / 3600
        val formatter = Formatter()
        return if (hours > 0) {
            formatter.format("%d:%02d:%02d", hours, minutes, seconds).toString()
        } else {
            formatter.format("%02d:%02d", minutes, seconds).toString()
        }
    }

Crop:

val command = arrayOf("-i", input, "-filter:v", "crop=$w:$h:$x:$y", "-threads", "5", "-preset", "ultrafast", "-strict", "-2", "-c:a", "copy", output)

“-i”: specifies an input file
input: the path of the source video to trim
“-filter:v”: defines that a filtergraph is used
“crop=$w:$h:$x:$y”: use crop functionality to crop a part from the video start at point x:y and having a width(w) and height(h).
“-threads”: specifies that the next value will set the thread count
“5”: the number of threads to use
“-preset”: specifies that the next value will set the encoding preset
“ultrafast”: the encoding preset to use
“-strict”: specifies how strictly the standards should be followed
“-2”: the strict value
“-c:a” AND “copy” defines that the stream will not be encoded and ALL audio streams will also be used.
output: the path of the resulting video

Also, check the official FFmpeg documentation to better understand every argument.

5. Implement the UI

To create a fancy UI you should create a custom view that shows some of the frames available in the video (VideoPreviewView). Also, it should contain a SeekBar for cropping and a RangeSeekBar for trimming. The SeekBar will be used to switch to a certain timestamp within the video to see what is actually trimmed or cropped. The RangeSeekBar will only be used within the trimming UI to define the start and end position of the resulting video.

While SeekBar is an Android Widget the RangeSeekBar is more complicated but there exist several implementations that can be used: By Tiszideepan.

You can implement the VideoPreviewView with an easy approach. Divide the video into a specific number of frames that are based on the view’s width and display every frame sequentially within a single view to have a preview. To do this you need the width of the view and the duration of the video that can be found using the MediaMetadataRetriever. With the MediaMetadataRetriever, you can use getFrameAtTime() to fetch a single frame at a specific timestamp. If you now want to display a complete video preview you need to display viewWidth / frameWidth frames. Unfortunately, depending on the video length and video width, it could happen that only a few frames will be present within the VideoPreviewView. To fix this problem you have to maintain a threshold to ensure that a specific number of frames are displayed. This means that you have to crop the frames to a certain width until calculated frames equal the threshold.

The following code snippet will show how you can achieve this:

private fun createPreview(viewWidth: Int) {
        BackgroundExecutor.execute(object : BackgroundExecutor.Task("", 0L, "") {
            override fun execute() {
                try {
                    val threshold = 11
                    val thumbnails = LongSparseArray<Bitmap>()
                    val mediaMetadataRetriever = MediaMetadataRetriever()
                    mediaMetadataRetriever.setDataSource(context, videoUri)
                    val videoLengthInMs = (Integer.parseInt(
                        mediaMetadataRetriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_DURATION)
                    ) * 1000).toLong()
                    val frameHeight = viewHeight
                    val initialBitmap = mediaMetadataRetriever.getFrameAtTime(
                        0,
                        MediaMetadataRetriever.OPTION_CLOSEST_SYNC
                    )
                    val frameWidth =
                        ((initialBitmap.width.toFloat() / initialBitmap.height.toFloat()) * frameHeight.toFloat()).toInt()
                    var numThumbs = ceil((viewWidth.toFloat() / frameWidth)).toInt()
                    if (numThumbs < threshold) {
                        numThumbs = threshold
                    }
                    val cropWidth = viewWidth / threshold
                    val interval = videoLengthInMs / numThumbs
                    for (i in 0 until numThumbs) {
                        var bitmap = mediaMetadataRetriever.getFrameAtTime(
                            i * interval,
                            MediaMetadataRetriever.OPTION_CLOSEST_SYNC
                        )
                        bitmap?.let {
                            try {
                                bitmap = Bitmap.createScaledBitmap(
                                    bitmap,
                                    frameWidth,
                                    frameHeight,
                                    false
                                )
                                bitmap = Bitmap.createBitmap(bitmap, 0, 0, cropWidth, bitmap.height)
                            } catch (e: Exception) {
                                Log.e(TAG, "error while create bitmap: $e")
                            }
                            thumbnails.put(i.toLong(), bitmap)
                        }
                    }
                    mediaMetadataRetriever.release()
                    returnBitmaps(thumbnails)
                } catch (e: Throwable) {
                    Thread.getDefaultUncaughtExceptionHandler()
                        .uncaughtException(Thread.currentThread(), e)
                }
            }
        })
    }

Additionally, for cropping a video you need to display a crop rectangle within the UI to let users decide which part of the video they want to crop. Also, you have to give users the ability to reposition the crop area. To do this, you can use the ImageCropper library from ArthurHub which is initially designed to crop an image but can also be used for videos as you only need the values from the rectangle. Add the ImageCropper to your project:

dependencies {
    implementation 'com.theartofdev.edmodo:android-image-cropper:2.8.0'
}

Now, you can extend a CropperActivity which loads the current frame of the video (that you can extract with the VideoPreviewView) by inserting the CropImageView layout to get the cropping bounds. Once, you select an area in the UI, the rectangle values can be extracted and used to calculate the needed values for video cropping with this function:

val rect = cropFrame.cropRect
val w = abs(rect.left - rect.right)
val h = abs(rect.top - rect.bottom)
val x = rect.left
val y = rect.top

These values will then be used as input variables for the FFmpeg crop command.

To help you use all this information I created a project that uses all explained snippets to create a sample app that can crop and trim videos. The source code can be found on my personal GitHub.

Fixing error=13, Permission denied

Unfortunately, if you implement the described functionality and use the compiled FFmpeg library you will run into this problem if you compile your app for SDK 29 and onwards.

Permission denied error due to wrong target SDK The problem is caused because from Android Q onwards it is not allowed to execute binaries in your app’s private data directory. The error is described in the official issue tracker from google.

One solution will be that you compile your app for SDK 28 but this could lead to problems if you try to put your app into the Android Play Store.

Another solution will be that you compile your app for SDK 29 and stop putting binaries in any not supported directory. Unfortunately, the code that moves the binaries is within the 3rd party lib from WritingMinds and has to be removed by you (with a Pull Request) or by the maintainer of the library. A future-proof solution will be that you stop using external binaries and start compiling dependencies as an NDK project. This will be a lot of work but you can find help within a famous repository that compiles CPP to Java and also has FFmpeg

Add more commands

After you implemented crop and trim you maybe want to add more cool features to your Android app. To do this with FFmpeg and the previously described code you can do this by simply creating a new function within the VideoCommands() and translate the FFmpeg command into a VideoCommands() function.

The next sections will describe some fancy functions that would improve the usability of your app. Just add a new function with this command and fill the callbacks with a toast or anything else. Then call the function from anywhere within your app (because you do not need UI for this).

Removing audio from videos

You might run into a scenario where you’d only like to keep the visuals of a video and remove the audio track, for instance for voicing over certain footage or removing background noise:

val command = arrayOf("-i", input, "-an", output)

Compress a video

Make big videos smaller to save your valuable disk resources.

val command = arrayOf("-i", input, "-vf", "scale=$w:$h", "-c:v", "libx264", "-preset", "veryslow", "-crf", "24", output)

$w and $h are the new sizes (should be smaller). If one is -1 it will keep the ratio and is automatically adjusted in relation to the other one.

Change playback speed

Increase the playback speed to make long videos faster or decrease it for showing something really awesome very slowly.

 val command = arrayOf("-i", input, "-vf", "\"setpts=$scale*PTS\"", output)

$scale should be > 1 for slowing down a video or < 1 for fastening a video.

To find more cool commands search the official argument documentation and implement them by putting every argument into a value of the array function as described earlier.

For production-grade application you may be better served by using our VideoEditorSDK which in addition to professional trim and crop features allows your users to add filters, text and audio overlays. Recently, we released time-based sprites as well allowing users to time the appearance of text and stickers in videos.

Closing Notes

In this article, you learned that you can use FFmpeg to crop and trim videos on Android. Unfortunately, it does not work out of the box and you have to compile the library using complex techniques. Luckily, there exist some useful libraries that do the heavy lifting for you.

Using my app as a baseline you are able to crop and trim videos. Additionally, you can implement more commands easily if they do not need a GUI because creating a fancy-looking GUI was a complicated part of developing a cropping and trimming app.

Unfortunately, there are problems with the library that was used because Android Q introduces a security fix that forbids apps to execute binaries within their data folder. But, this is only a problem if you want to create a “Google Play Store” ready app because you can avoid this problem if compile your app for SDK 28 (and lower). Keep in mind that if you want to create a private app that you distribute on your website instead of using the Play Store you can do this. But, if you want to upload your app to the Google Play Store you have to search for another FFmpeg library within the documentation or build one from scratch so you can compile your app for the current needed SDK.

Looking to integrate video capabilities into your app? Check out our Video Editor SDK, Short Video Creation, and Camera SDK!

I hope you enjoyed reading this article and are able to create an Android app that can crop and trim videos. If you have any questions, need help, or want to give feedback @ us on Twitter. We are happy to help.

How to Apply Filter Effects to Video using VidEffects library on Android

Neslihan — Tue, 24 May 2022 11:41:23 GMT

Video manipulation is a complex topic on Android because there is no out-of-the-box support from the Android SDK, and using FFmpeg requires not just a very elaborate setup but having to climb a steep learning curve to learn its CLI commands.

As an aside, we have also put together how-to blogs to elaborate on other video manipulation operations like merging still images to form videos, compressing and resizing videos, or background removal.

The VidEffects library is much faster to set up than FFmpeg, and it works by applying effects to GLSurfaceView. This blog post will demonstrate how to apply Filter effects to a video in an Android app using the VidEffects library.

VidEffects does support storing videos on the disk, but it has limitations in this regard which we will discuss in a moment.

Before we begin, keep in mind that the VidEffects library differentiates between Effects and Filters. As an example, we will apply both and discuss the crucial difference between the two.

Without much further ado, let’s start coding.

Create a VidEffects Example App

Create a New Project with an Empty Activity in Android Studio. Select Kotlin as the language (or Java if you wish), and set **Minimum SDK to API 21.

You can also download the final code from GitHub.

Add Dependency

In your module-level build.gradle (app/build.gradle) file add the latest VidEffects dependency.

dependencies {
    ...

    implementation "com.github.krazykira:videffects:1.1.1"

    ...
}

Next, enable viewBinding by adding the following lines within the android{} closure.

android {
    ...
    buildFeatures {
        viewBinding true
    }
}

By using View Binding, we can avoid the findViewById() method.

Click Sync Now to sync the project with gradle files.

Add Video Asset File

Place the sample video file in app/src/main/assets/ directory. Ideally, your app will load the video file from disk – but to avoid complexity, we are placing the video in the assets directory.

Create a Layout

Create the above layout with a VideoSurfaceView, three Filter buttons, and one Reset Button.

Replace your activity_main.xml`s code with the following.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.sherazkhilji.videffects.view.VideoSurfaceView
        android:id="@+id/mVideoSurfaceView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:layout_constraintTop_toTopOf="parent" />
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/wrapper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/mVideoSurfaceView">
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/bwButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Black and White"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/grainButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Grain"
            app:layout_constraintStart_toEndOf="@id/bwButton"
            app:layout_constraintTop_toTopOf="parent" />
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/duotoneButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="DuoTone"
            app:layout_constraintStart_toEndOf="@id/grainButton"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/resetButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Reset"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/wrapper" />
</androidx.constraintlayout.widget.ConstraintLayout>

Initialize the video

Before initializing the video, set up an instance of the Binding class to use it within the Activity.

Setup View Binding

Add the following code in MainActivity.kt before calling setContentView().

If you do not wish to use View Binding and instead prefer using findViewById(), skip to the next step Initializing the Sample Video.

private lateinit var binding: ActivityMainBinding
class MainActivity : AppCompatActivity() {
		private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        ...
    }
    companion object {
        private const val TAG = "MainActivity"
    }
}

The ActivityMainBinding class is auto-generated. If it did not get auto-generated, then sync the project with the gradle file from File > Sync Project with Gradle Files.

Next, pass the root view to the setContentView().

class MainActivity : AppCompatActivity() {
    ...
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        setContentView(binding.root)
    }
}

Initializing the Sample Video

Next, declare and initialize the MediaPlayer variable.

class MainActivity : AppCompatActivity() {
    ...
    private lateinit var mMediaPlayer: MediaPlayer
        override fun onCreate(savedInstanceState: Bundle?) {
            ...
            mMediaPlayer = MediaPlayer()
    }
}

Then open the video file from our assets directory and pass it as the data source to the Media Player.

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    try {
        val afd = assets.openFd("sample.mp4")
        mMediaPlayer.setDataSource(
            afd.fileDescriptor,
            afd.startOffset, afd.length
        )
    } catch (e: Exception) {
        Log.e(TAG, e.message, e)
    }
}

Now, all that is remaining is to initialize the VideoSurfaceView.

override fun onCreate(savedInstanceState: Bundle?) {
        ...
        binding.mVideoSurfaceView.init(mMediaPlayer, NoEffectFilter())
    }

Your app should run. While the buttons still do not work, we will setOnClickListeners() next.

Apply VidEffects Effects

The VidEffects library offers multiple effects, but we will be applying three: Black and White, Grain, and Duotone.

In MainActivity’s onCreate(), copy the following code to setup all the setOnClickListeners.

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    //Black and White Effect
    binding.bwButton.setOnClickListener {
        binding.mVideoSurfaceView.shader = BlackAndWhiteEffect()
    }
    //Grain Filter
    binding.grainButton.setOnClickListener {
        val grainFilter = GrainFilter(10, 10)
        grainFilter.setIntensity(0.5f)
        binding.mVideoSurfaceView.filter = grainFilter
    }
    //Duotone Effect
    binding.duotoneButton.setOnClickListener {
        binding.mVideoSurfaceView.shader =
            DuotoneEffect(Color.BLUE, Color.YELLOW)
    }
    //Reset with AutoFixFilter
    binding.resetButton.setOnClickListener {
        binding.mVideoSurfaceView.filter = NoEffectFilter()
    }
}

Run the app.

Difference Between Effects and Filters

As mentioned before, Effects and Filters are two separate functions in the VidEffects library.

Effects are temporary, view-only overlays that cannot be stored on the disk. Filters can be viewed and stored on the disk. Unfortunately, a majority of the overlays offered by VidEffects are Effects and therefore only useful for playback only. At the time of writing this article, only three Filters are available.

Limitations

One of the biggest limitations of this library, as mentioned above, is that the majority of the effects provided by the library are just view-only.

Moreover, to save videos with filters, the app must target minSdk 23 at least or use FFmpeg.

Many of these Effects do not have an intensity parameter and therefore we cannot fine-tune these effects.

Alternative

If you are looking for an easy-to-integrate solution that overcomes these limitations, take a look at IMG.LY’s VideoEditor SDK. It provides more than 60 high-quality adjustable filters out-of-the-box. Moreover, you can easily add custom filters using LUT files. VideoEditor SDK works for Android SDK version 21 and above and thus targets more devices.

If the purpose is to apply effects during the playback, the VidEffects library is a solid and free open-source solution. While it handles all the complex video editing, developers will have to spend some time developing the layout.

PE.SDK and VE.SDK 10 for Android and 11 for iOS Release

Sascha — Wed, 04 May 2022 12:46:21 GMT

We are thrilled to announce the release of PhotoEditor SDK and VideoEditor SDK 10 for Android and 11 for iOS. This new major version is packed with features and improvements.

This release is adding:

Custom Watermarks
Background Removal for Photos
Background Removal for Stickers
Custom Sticker Libraries
Giphy Integration
And More Updates for Android and iOS

Custom Watermarks

With our new support for custom watermarks, you can add your company logo or any other image to photo and video exports. You can place your watermark in either corner or the center of your photo and video. Additionally, you can specify the size of the watermark and determine its distance from the outline if you choose to place it near a corner. Your users will not be able to remove nor modify the watermark.

For more details on Custom Watermarks, take a look at our documentation for Android or iOS.

Background Removal for Photos

You have unwaveringly requested this feature: we are excited to offer the automatic removal of backgrounds for static content! Background Removal is fully running on-device and currently specializes in images containing a person only. PE.SDK enables this feature exclusively when it detects a person in the photo.

The removed background will turn transparent if your selected output supports transparency, such as PNG. In other cases, such as JPG, your background removal will be tinted black.

This feature is available on Android and iOS 15.0 and higher only. Easily enable Background Removal for Photos with our Android guide or iOS guide.

Background Removal for Stickers

A more common use case for automatic background removal is with stickers, so we’ve also added this functionality. Select a sticker including a person and tap the Remove BG button. Simple!

This feature is available on Android and iOS 15.0 and higher only. Easily enable Background Removal for Stickers with our Android documentation or iOS documentation.

Custom Sticker Libraries

We wanted to make it easier for you to provide your users with more sticker tool content. So far, you were able to create multiple sticker categories with different stickers that could either be part of your app or stored on a server. Additionally, you could enable our personal stickers feature on iOS or Android), giving your users the option to select stickers from their camera roll.

We have now added more ways to provide your users with stickers.

Android

You can now create sticker categories that do not present our sticker selection interface, but will instead load any arbitrary Fragment. That gives you complete control over the sticker selection screen, and you can use it to load and display any content. When the user selects any of your stickers, all you have to do is pass it back to the SDK with a callback. Get started with your Custom Sticker Library with our Android documentation.

iOS

You can now create sticker categories that do not present our sticker selection interface, but will instead load any arbitrary view controller that conforms to the StickerCollection protocol. That gives you complete control over the sticker selection screen, and you can use it to load and display any content. When the user selects any of your stickers, simply pass it back to the SDK using a delegate method.
Additionally, we’ve created a new StickerProviderCategory that you can pass any object conforming to the StickerProvider protocol. This category provides most of the features required to interact with sticker content providers, such as search and pagination. You can use this category to very quickly integrate any sticker service.

Find more information on Custom Sticker Libraries in the iOS documentation.

GIPHY Integration

This online database and search engine for funny GIFs and beautiful animations is a staple in many social applications. Easily integrate GIPHY into your app:

Android

Using our new Custom Sticker Library, we’ve also created an integration for GIPHY on Android. All you have to do is head over to GIPHY, create your API key, pass it to your GiphySettings and create a GiphyStickerCategoryItem. Your users will then immediately have access to all the content GIPHY has to offer.

For more details, visit our documentation on adding GIPHY for Android.

iOS

Using the new StickerProviderCategory, we added GIPHY support on iOS. All you have to do is head over to GIPHY, create your API key, and pass this to the GIPHY sticker category. Your users will then immediately have access to all the content GIPHY has to offer.

For more details, visit our documentation here.

More Updates for Android

Additionally, we have:

Increased the minimum API level for PhotoEditor SDK from 16 (Android 4) to 21 (Android 5), which ensures support for 98% of all phones in use.
Added support for headless video exporting.
Increased video playback stability.
Fixed a number of issues with degraded audio quality in videos.
And added the ability to choose a theme at runtime.

More Updates for iOS

Additionally, we have:

Increased our deployment target from iOS 9 to iOS 13.
Migrated all usage of OpenGL to Metal.
Added a better result API.
Added support for SwiftUI.
Enhanced our video export to display a progress indicator and the option to cancel the export.

Case Study: Vapiano & PhotoEditor SDK

Felix — Thu, 24 Aug 2017 00:00:00 GMT

The German casual dining restaurant chain Vapiano facilitates and streamlines their customer’s visits with a feature-rich app that lets its users: check in at the restaurant, order beverages and desserts from their seat, pay after their visit, collect loyalty points, browse the menu, save favorite dishes, locate the nearest subsidiary and even create images for social media postings.

With 180 restaurants in 31 countries, Vapiano is one of the biggest fast-casual dining chains around. Especially at lunchtime and early evening hours each restaurant wines and dines plenty of hungry customers, with Vapiano’s current approach (ordering at the counter, receiving the meal, finding a table and after that checking out on a regular register) that sometimes resulted in long lines and consequently frustration among their guests. With the Vapiano app, that is a thing of the past as the visit can almost solely be handled by the app from check-in to check-out. As Vapiano’s target audience is very photography and social media affine, their app holds another gem for their users to play around with. When taking a picture of themselves and their food in a Vapiano restaurant, the users can directly add Vapiano stickers to their pictures and then post them online. Said feature was realized by MobiLab Solutions utilizing the PhotoEditor SDK. We sat down with Max Afflerbach and Robert Rabe of MobiLab Solutions GmbH to talk about their experiences with PhotoEditor SDK.

“Vapiano’s vision regarding the photo feature is to spread their brand, enhance brand recognition and broaden the brand’s visibility,” Max Afflerbach, Chief Customer Officer at MobiLab Solutions explains. “Basically, they wanted to provide their guests with a tool that facilitates what they’re already doing when dining at Vapiano, that is taking pictures of their food and then uploading them to Snapchat, Instagram, Facebook, you name it. And so, we came up with a built-in branding feature that uses custom stickers.”

“…on StackOverflow or Quora, PhotoEditor SDK is listed and praised as the only real alternative to Aviary”

As they were on a schedule and didn’t have the time to develop the feature themselves the folks at MobiLab started searching for a third-party solution. “We’ve been looking for an SDK that does exactly what we imagined the feature to be capable of, namely taking a picture, adding assets and then exporting it,” says Robert Rabe, iOS developer at MobiLab Solutions. “We first considered Adobe Creative SDK because it is the best-known SDK in that field. However, it lacked a crucial feature for us that PhotoEditor SDK luckily has and that is the possibility to upload custom stickers,” says Max Afflerbach. “Also,” Rabe adds, “we weren’t 100% sure whether this whole thing would work without the user having to log into the Adobe Cloud.” “When you’re searching for other image processing SDKs on StackOverflow or Quora, PhotoEditor SDK is listed and praised as the only real alternative to Aviary. And besides, there aren’t exactly a lot of SDKs out there that cover both iOS and Android. So, that wasn’t a tough decision at all,” Afflerbach explains.

From the initial decision to work with PhotoEditor SDK until the feature was finished and ready for rollout, only a short period passed as Rabe explains: “Working with the SDK is really straightforward. The implementation is fast, and it’s all well documented. The SDK is a powerful tool and holds a lot of features with a great many possibilities. Setting up the feature exactly as we wanted it to be didn’t take longer than three working days tops. And if we had any issues or questions, we had no problems whatsoever getting in touch with the folks at PhotoEditor SDK which is really nice.”

“I really like the product, it’s working very well, and especially the communication with the PhotoEditor SDK team was highly pleasant,” Robert Rabe concludes. “Working together with the team of PhotoEditor SDK was super easygoing, the few requests and inquiries we had were answered quickly, and the technical licensing was a cinch as well. We are delighted with the product, the integration was very simple, and our developers are happy, I guess you couldn’t ask for more from an agency’s perspective,” Max Afflerbach adds.

Thanks for reading! To stay in the loop, subscribe to our Newsletter.

Android App Development – IMG.LY Blog

CE.SDK v1.73 Release Notes

Own Your Mobile Editor — Not Just the Config

Migration

Starter Kit Repositories

Export Vector Designs as SVG

Changelog

CE.SDK v1.48 Release Notes

Match Your Navigation Bar With Your Design & Logic

Upcoming

CE.SDK v1.45 Release Notes

Record Reactions to Videos on Android

Improvements

Ensure Text Rendering Across Languages

Simplify Development with Complete TypeScript Support

CE.SDK v1.44 Release Notes

Simplify Your Video Editing Workflow

Get Vibrant Colors with P3/Wide Gamut Support

Tailor the Android Canvas Menu to Your Workflows

Improvements

Upcoming

CE.SDK v1.43 Release Notes

Shape Your Interface Around Your Workflow

Control How Images Fit into Blocks

Upcoming

CE.SDK v1.39 Release Notes

Capture Videos on Android

Add Backgrounds to Text

Upcoming

CE.SDK Video Editor Now Available on Android

Getting Started

Our Video Editing Backstory

Key Capabilities

Customization

Ideal for Social Media, Ecommerce, and Marketing Tech Apps

What’s Next?

Get Started

CE.SDK v1.36 Release Notes

Animate On The Web

Edit Videos on Android

Explore New Showcases

Upcoming

CE.SDK v1.33 Release Notes

Integrate a Design Editor on iOS and Android

Key Features

Use Plugins to Customize UI and Add Quick Actions

Add Voiceovers to Videos on iOS

Integrate a Photo Editor for iOS and Android

Key Features

Improvements

Elegant Event Handling in Kotlin - A Refactoring Walkthrough

What We Aim to Achieve

Step 1: The Starting Line

Step 2: Unveiling HashMaps and Payloads for Peak Performance

A Performance Boost

A Note on Payloads

Step 3: Adding Syntactic Sweetness with Infix Functions

Syntactic Sweetness and Performance

Flexibility in Syntax

Step 4: Embracing Inline Functions for Elegance

The New Syntax

Step 5: Elevating register to an Extension Function for Highlighting

Updated EventsHandler Class

Step 6: Eliminating lateinit Variables with Delegated Properties

Step 7: Multiple Event Handlers for Single Responsibility Principle

Enhanced Event Handler Registration

Final Words

CE.SDK v1.15 Release Notes

Create Accurate Cutouts and Vectors

Effortlessly Edit Across All Screen Sizes

Improved Android Video & Audio Experience

CE.SDK v1.10 Release

Android Platform Support

Library Improvements

Create, Update and Delete for Asset Libraries

Asset Libraries Generalization

Zoom Improvements

Arrange API

Time-Based Sprites for VE.SDK on iOS and Android

Time-Based Sprites

Step 5: Elevating `register` to an Extension Function for Highlighting

Updated `EventsHandler` Class

Step 6: Eliminating `lateinit` Variables with Delegated Properties