Skip to content

New JetPack Compose Project

Introduction

This guide will walk you through setting up CE.SDK editor in a new Jetpack Compose 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-v8aarmeabi-v7ax86_64 and x86

Create the Project

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

Under “Phone and Tablet” choose “Empty 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

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"

Implementation

With the dependencies successfully added to the project, 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 add a new Composable called EditorComposable.

import androidx.compose.runtime.Composable
import ly.img.editor.DesignEditor
import ly.img.editor.EngineConfiguration
import ly.img.editor.rememberForDesign
@Composable
fun EditorComposable() {
val engineConfiguration = EngineConfiguration.rememberForDesign(
license = "<your license here>",
userId = "<your unique user id>",
)
DesignEditor(
engineConfiguration = engineConfiguration,
onClose = {
// Close the editor here
// If using a navigation library, call pop() here
}
)
}

Inside your new EditorComposable, 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 call EditorComposable in MainActivity.kt.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
EditorComposable()
}
}
}

Common Errors

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

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