Search Docs
Loading...
Skip to content

Existing Project Setup

This guide shows you how to integrate the CreativeEditor SDK into your existing Android Jetpack Compose project. Follow these steps to learn how to:

  • add the necessary dependencies.
  • configure the editor.
  • test the integration.

Who Is This Guide For?#

This guide is for developers who:

  • Have an existing Android Jetpack Compose project
  • Want to add CreativeEditor SDK features to their app
  • Need to understand common integration patterns
  • Want to test available editing capabilities and workflows

What You’ll Achieve#

By following this guide, you’ll perform the following tasks:

  • Project Integration: Add CreativeEditor SDK to your existing Android project
  • Editor Implementation: Implement the editor with proper lifecycle management
  • Testing: Verify the integration works correctly
  • Customization: Learn how to customize the editor for your use case

View Android Examples

Android Documentation

Prerequisites#

Development Environment#

  • Android Studio (latest version)
  • Android SDK (API level 24 or higher)
  • Kotlin 1.9.10 or higher
  • Gradle 8.4 or later
  • Jetpack Compose BOM 2023.05.01 or higher

Platform Requirements#

  • Android: API level 24 (Android 7.0) or higher
  • Supported ABIs: arm64-v8a, armeabi-v7a, x86_64, x86

License#

  • A valid CE.SDK license key (Get a free trial), use null or an empty string to run in evaluation mode with watermark.

Verify Your Setup#

Before starting, verify your Android development environment:

Terminal window
gradle --version

This command checks your Gradle installation and reports any issues to resolve before proceeding.

Step 1: Add the CreativeEditor SDK Dependency#

Add the CreativeEditor SDK to your project by updating the build configuration:

1.1 Add IMG.LY Repository#

Update your settings.gradle.kts to include the IMG.LY repository:

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

1.2 Add Editor Dependency#

Update your app/build.gradle.kts to include the editor dependency:

dependencies {
    // This dependency makes main compose and coroutine APIs available in your project
    implementation("ly.img:editor:1.73.0")
    // Other dependencies here
}

This adds the latest version of the CreativeEditor SDK editor to your build.gradle.kts file.

1.3 Configure Android Settings#

Update your app/build.gradle.kts to ensure proper configuration:

android {
    namespace = "com.example.cesdkapp"
    compileSdk = 36


    defaultConfig {
        applicationId = "com.example.cesdkapp"
        minSdk = 24
        targetSdk = 36
        versionCode = 1
        versionName = "1.0"
        ndk {
            abiFilters += arrayOf("arm64-v8a", "armeabi-v7a", "x86_64", "x86")
        }
    }


    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION_1_8
    }


    kotlinOptions {
        jvmTarget = "1.8"
    }


    buildFeatures {
        compose = true
    }


    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.3"
    }
}

1.4 Sync Project#

After adding the dependency, sync your project to download the CreativeEditor SDK:

In Android Studio, click Sync Project with Gradle Files to download and configure all dependencies.

This downloads and installs the CreativeEditor SDK and its dependencies automatically through Gradle.

Step 2: Implement the Editor Integration#

Now let’s implement the CreativeEditor SDK editor in your Android Jetpack Compose application:

2.1 Create EditorComposable#

Create a new file EditorComposable.kt in your project:

import android.widget.Toast
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import ly.img.editor.Editor
import ly.img.editor.core.configuration.EditorConfiguration
import ly.img.editor.core.configuration.remember
import ly.img.engine.DesignBlockType


// Add this composable to your Activity, Fragment, NavHost etc.
@Composable
fun EditorComposable(onClose: (Throwable?) -> Unit) {
    val context = LocalContext.current
    Editor(
        // Get your license from https://img.ly/forms/free-trial
        // Keep this null for evaluation mode with watermark.
        // Replace it with your license key for production use.
        license = null,
        configuration = {
            EditorConfiguration.remember {
                onCreate = {
                    val scene = editorContext.engine.scene.create()
                    val page = editorContext.engine.block.create(DesignBlockType.Page)
                    editorContext.engine.block.setWidth(block = page, value = 1080F)
                    editorContext.engine.block.setHeight(block = page, value = 1080F)
                    editorContext.engine.block.appendChild(parent = scene, child = page)
                }
                onError = {
                    Toast.makeText(context, it.message, Toast.LENGTH_SHORT).show()
                }
            }
        },
        onClose = onClose,
    )
}

In this example, we create a scene with a single square page.

2.2 Include EditorComposable in your navigation system#

Update your navigation system to use the editor composable. The example below shows how to integrate it in NavHost:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            NavHost(
                navController = navController,
                startDestination = "main",
            ) {
                composable(route = "main") {
                    Box(
                        modifier = Modifier.fillMaxSize(),
                        contentAlignment = Alignment.Center,
                    ) {
                        Button(
                            onClick = { navController.navigate("editor") },
                        ) {
                            Text("Launch Creative Editor SDK")
                        }
                    }
                }
                composable(route = "editor") {
                    EditorComposable {
                        navController.popBackStack()
                    }
                }
            }
        }
    }
}

2.3 Add the Internet Permission#

Add the network permission that CE.SDK needs when it loads its default assets from the CDN:

<uses-permission android:name="android.permission.INTERNET" />

Step 3: Test Your Editor Integration#

Now let’s test your CreativeEditor SDK editor integration:

3.1 Build and Run#

Build your Android project using Gradle:

3.2 Test on Android Device#

Connect your Android device and run:

Terminal window
# Build and install the app
./gradlew installDebug


# Or run from Android Studio
# Click the "Run" button (green play icon)

3.3 Verify Features#

After launching your app, verify these features work correctly:

  • App Launch: The main activity opens without errors
  • Main Screen: A clean Android Jetpack Compose interface
  • Button Interaction: The “Launch Creative Editor SDK” button responds to taps
  • Editor Launch: The CreativeEditor SDK opens without errors
  • Canvas Interaction: The blank page can be panned and zoomed.

Step 4: Customize for Your Use Case#

Step 5: Troubleshooting#

Common Issues and Solutions#

Gradle Sync Issues#

  • Problem: Repository not found
  • Solution: Verify the IMG.LY repository URL in settings.gradle.kts

Compilation Errors#

  • Problem: Missing dependencies
  • Solution: Ensure you’ve installed all Jetpack Compose dependencies.

Runtime Errors#

  • Problem: Invalid license
  • Solution: Verify your license key is correct and valid (or pass null for evaluation mode with watermark)

Performance Issues#

  • Problem: Slow editor loading
  • Solution: Check device specifications and memory usage

Integration Issues#

  • Problem: Editor not displaying
  • Solution: Verify the composable is properly called in your activity

Step 6: Next Steps#

Advanced Features#

  • Implement custom asset sources
  • Add custom filters and effects
  • Integrate with your backend services
  • Implement user authentication

Other Integrations#

  • Explore camera integration
  • Add video editing capabilities
  • Implement batch processing
  • Add cloud storage integration

Production Considerations#

  • Optimize for performance
  • Implement proper error handling
  • Add analytics and monitoring
  • Test on different device configurations

Additional Resources#