Skip to content

New Fragment-Based UI Project

Introduction

This guide will walk you through setting up CE.SDK editor in a new Fragment based project. By the end, you will have a powerful editor running in your new Android app, capable of editing various forms of media.

CE.SDK editor running on an Android device

Pre-requisites

  • Android Studio installed on your machine
  • CE.SDK license key. Get one here

Minimum Requirements

  • Android: 7.0 (Android SDK 24)
  • Kotlin 1.9.10
  • Jetpack Compose BOM version 2023.05.01 (1.4.3)
  • Supported ABIs: arm64-v8a, armeabi-v7a, x86_64 and x86

Create the Project

In Android Studio, select File -> New -> New Project.

Under “Phone and Tablet” choose “Empty Views Activity”. Android Studio template chooser dialog

Fill in desired app details, but ensure that the minimum SDK is set to at least API 24 (Android 7.0). That is the lowest supported version by the CE.SDK editor. Android Studio new project dialog

Add Dependencies & Setup

In your new project, let’s add the required dependencies for the CE.SDK editor.

Add the IMG.LY repository to your settings.gradle:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven {
            name "IMG.LY Artifactory"
            url "https://artifactory.img.ly/artifactory/maven"
            mavenContent {
                includeGroup("ly.img")
            }
        }
    }
}

Add the CE.SDK SDK dependency to your app’s build.gradle.

implementation "ly.img:engine:1.51.0"

Add Jetpack Compose libraries as well to your app’s build.gradle.

dependencies {
    implementation(platform('androidx.compose:compose-bom:2025.04.01'))
    implementation 'androidx.activity:activity-compose'


}

Enable Compose features in your project in your app’s build.gradle file. If you are running kotlin version less than 2.0.0, also add the compose compiler version.

android {
  buildFeatures {
      compose true
  }


  // Only add this if you have Kotlin version lower than 2.0.0
  composeOptions {
      kotlinCompilerExtensionVersion = "1.5.15"
  }
  // ---------
}

Implementation

With the dependencies successfully added to the project and Jetpack Compose fully set up, you can now add the Editor to your app. Here, we will add the DesignEditor, but the process is similar for the other editors.

Create a new file where you will create EditorFragment where you will implement the editor:

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.compose.ui.platform.ComposeView
import ly.img.editor.DesignEditor
import ly.img.editor.EngineConfiguration
import ly.img.editor.rememberForDesign


class EditorFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                val engineConfiguration = EngineConfiguration.rememberForDesign(
                    license = "<your license here>",
                    userId = "<your unique user id>",
                )
                DesignEditor(engineConfiguration = engineConfiguration) {
                    // Close the editor here
                    parentFragmentManager.popBackStack()
                }
            }
        }
    }
}

Inside the setContent function, you need to create engineConfiguration, that will then be passed into the DesignEditor. Within onClose, you can handle closing the editor appropriately.

You can now open the EditorFragment fragment to launch the editor.

Common Errors

Here are some common errors you may encounter through this guide, and how to solve them.

Incompatible compose compiler

e: This version of the Compose Compiler requires Kotlin version x.x.xx but you appear to be using Kotlin version y.y.yy which is not known to be compatible.  Please fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I didn't warn you!).

Solution -> Ensure you have the proper compose compiler version for your project. Check official mappings here

Dependency not found

> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Could not find ly.img:editor:1.48.0.

Solution -> Make sure maven url is set up correctly in settings.gradle

Invalid License

Invalid license dialogMissing license dialog
Solution -> Check whether you have supplied a valid license

No Internet

No internet dialog

Solution -> Check your internet connection