Android Jetpack Compose New Project Setup

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
    }
}

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")
            }
        }
    }
}

rootProject.name = "My App"
include(":app")

plugins {
    id("com.android.application")
    id("kotlin-android")
}

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"
    }
}

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

Who Is This Guide For?#

This guide is for developers who:

• Have experience with Android development and Kotlin
• Want to create a new Android Jetpack Compose project with integrated creative editing capabilities
• Need to implement user-friendly editing interfaces
• Want to add professional-grade image editing, design creation, and video editing to their Android apps
• Prefer using Jetpack Compose for modern Android UI development

What You’ll Achieve#

By following this guide, you:

• Create a new Android Jetpack Compose project with CreativeEditor SDK integration
• Configure platform-specific requirements for Android
• Implement a functional editor that you can launch from your app
• Test and verify the integration works correctly

Prerequisites#

Before you begin, ensure you have the following requirements:

Development Environment#

• Android Studio: Latest version (Hedgehog or later)
• Kotlin: 1.9.10 or later
• Gradle: 8.4 or later
• Jetpack Compose: Latest BOM version
• Git CLI for version control

Platform Requirements#

• Android: 7.0+ (API level 24+)
• Minimum SDK: 24
• Target SDK: Latest stable version

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#

Run the following command to verify your Android development environment:

gradle --version

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

Step 1: Create a New Android Jetpack Compose Project#

First, verify your Android Studio installation and create a new project:

1. Open Android Studio and select “New Project”
2. Choose “Empty Activity” template
3. Configure your project:
   • Name: cesdk_android_app
   • Package name: com.example.cesdkapp
   • Language: Kotlin
   • Minimum SDK: API 24 (Android 7.0)
   • Build configuration language: Kotlin DSL

Project Structure#

Your new project should have this structure:

cesdk_android_app/
├── app/                    # Main application module
│   ├── src/main/
│   │   ├── java/          # Kotlin source files
│   │   ├── res/           # Resources
│   │   └── AndroidManifest.xml
│   ├── build.gradle.kts   # App-level build configuration
│   └── proguard-rules.pro # ProGuard rules
├── gradle/                 # Gradle wrapper
├── build.gradle.kts        # Project-level build configuration
├── settings.gradle.kts     # Project settings
└── gradle.properties       # Gradle properties

Step 2: Add the CreativeEditor SDK Dependency#

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

2.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")
            }
        }
    }
}

2.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.1")
    // Other dependencies here
}

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

2.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"
    }
}

2.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 3: Implement the Editor Integration#

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

3.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.

3.2 Include EditorComposable in MainActivity#

The example below shows how to integrate it in a newly created 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()
                    }
                }
            }
        }
    }
}

3.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 4: Test Your Editor Integration#

Now let’s test your CreativeEditor SDK editor integration:

4.1 Build and Run#

Build your Android project using Gradle:

4.2 Test on Android Device#

Connect your Android device and run:

# Build and install the app
./gradlew installDebug

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

4.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 5: Customize for Your Use Case#

Step 6: Troubleshooting#

If you encounter issues, here are common solutions:

6.1 Build Issues#

1. Gradle Sync Errors#

Problem: Gradle sync fails with dependency resolution errors.

Solution:

1. Check your internet connection
2. Verify the IMG.LY repository URL is correct
3. Clean and rebuild the project:

./gradlew clean
./gradlew build

2. Compilation Errors#

Problem: Kotlin compilation errors related to Compose.

Solution: Ensure your Compose compiler version matches your Kotlin version. Check the official compatibility matrix.

3. Runtime Errors#

Problem: App crashes on startup with editor-related errors.

Solution:

1. Verify your license key is valid (or pass null for evaluation mode with watermark)
2. Check that minSdk is set to 24 or higher
3. Ensure the INTERNET permission is declared in AndroidManifest.xml

6.2 Performance Issues#

1. Slow Editor Loading#

Problem: Editor takes too long to load or is sluggish.

Solution:

1. Ensure you’re running on a device with sufficient GPU capabilities
2. Check that the device has adequate memory
3. Verify the engine configuration is optimized

2. Memory Issues#

Problem: App crashes due to memory issues during editing.

Solution:

1. Implement proper memory management
2. Monitor memory usage during editing operations
3. Use appropriate image sizes and formats

6.3 Integration Issues#

1. Editor Not Displaying#

Problem: Editor doesn’t appear or display correctly.

Solution:

1. Check that the Composable is properly integrated
2. Verify the engine configuration is correct
3. Ensure proper lifecycle management

2. Tool Access Issues#

Problem: Editing tools are not accessible or don’t work.

Solution:

1. Check the editor configuration and tool permissions
2. Verify that the license includes the required features
3. Ensure proper asset loading and access

Step 7: Next Steps#

Now that you have a basic CreativeEditor SDK editor integration, you can:

7.1 Explore Advanced Features#

• Editor Configuration: Learn advanced editor customization
• Custom Tools: Implement custom editing tools
• Asset Management: Manage and organize media assets
• Performance Optimization: Optimize editor performance

7.2 Integrate with Other Components#

• Engine Integration: Add custom engine features
• Camera Integration: Capture media directly in your app
• Navigation Integration: Integrate with app navigation

7.3 Production Considerations#

• License Management: Implement proper license validation
• Error Handling: Add comprehensive error handling
• Performance Monitoring: Monitor editor performance in production
• Testing: Implement comprehensive testing for editor features

Additional Resources#

• CreativeEditor SDK Documentation
• Android Examples Repository
• Community Support

Congratulations! You’ve successfully integrated the CreativeEditor SDK editor into your Android Jetpack Compose application. Your app now has powerful creative editing capabilities that work seamlessly on Android devices.