Android Jetpack Compose New Project Setup

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
  • 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 {
    implementation("ly.img:editor:1.57.0")

    // Jetpack Compose dependencies
    implementation(platform("androidx.compose:compose-bom:2025.04.01"))
    implementation("androidx.activity:activity-compose")
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-graphics")
    implementation("androidx.compose.ui:ui-tooling-preview")
    implementation("androidx.compose.material3:material3")

    // Other Android dependencies
    implementation("androidx.core:core-ktx:1.12.0")
    implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0")
    implementation("androidx.activity:activity-compose:1.8.2")
}

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 = 34

    defaultConfig {
        applicationId = "com.example.cesdkapp"
        minSdk = 24  // Required for CE.SDK
        targetSdk = 34
        versionCode = 1
        versionName = "1.0"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary = true
        }
    }

    buildTypes {
        release {
            isMinifyEnabled = false
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }

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

    kotlinOptions {
        jvmTarget = "17"
    }

    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.8"
    }

    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
        }
    }
}

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 Editor Composable#

Create a new file EditorComposable.kt in your project:

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(
        // Get your license from https://img.ly/forms/free-trial
        // pass null or empty for evaluation mode with watermark
        license = "<your license here>",
        userId = "<your unique user id>", // A unique string to identify your user/session
    )

    DesignEditor(
        engineConfiguration = engineConfiguration,
        onClose = {
            // Close the editor here
            // If using a navigation library, call pop() or navigateUp() here
        },
    )
}

3.2 Update MainActivity#

Update your MainActivity.kt to use the editor composable:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MaterialTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
            EditorComposable()
                }
            }
        }
    }
}

3.3 Add Required Permissions#

Add the necessary permissions to your AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.cesdkapp">

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

    <!-- Camera and Microphone-->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />

    <!-- Modern storage permissions -->
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

    <!-- For devices running Android 9 or lower only -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
                     android:maxSdkVersion="29" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
                     android:maxSdkVersion="29" />

    <!-- Photo Picker permission (API 34+) -->
    <uses-permission android:name="android.permission.READ_MEDIA_VISUAL_USER_SELECTED" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Material3.DayNight"
        tools:targetApi="31">

        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:theme="@style/Theme.Material3.DayNight">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

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#

When the app launches successfully, you should see:

1. Main Screen: A clean Android Jetpack Compose interface
2. Editor Launch: The CreativeEditor SDK editor should open immediately
3. Editor Features: You should be able to access:
   • photo editing tools
   • design creation tools
   • video editing capabilities
4. User Interface: The editor should have a complete UI with:
   • toolbar with editing tools
   • canvas for design work
   • panels for assets and properties

4.4 Common Test Scenarios#

Test these scenarios to ensure everything works:

• Editor Launch: Verify the editor opens properly
• Tool Access: Test that all editing tools are accessible
• Media Import: Import photos from your device gallery
• Basic Editing: Try basic editing features like:
  • filters and effects
  • text addition and styling
  • shape and graphic tools
• Save/Export: Test saving and exporting edited content
• Navigation: Ensure proper navigation within the editor

Note: The first build may take several minutes as it compiles all native dependencies. Subsequent builds are faster.

Step 5: Customize for Your Use Case#

The CreativeEditor SDK editor offers different presets for common use cases:

5.1 Editor Configuration Options#

Available Editor Types Summary#

The CreativeEditor SDK provides several editor types for different use cases:

Available Editor Types with Parameters:

Choose the appropriate editor type based on your use case:

// For photo editing
@Composable
fun PhotoEditorComposable() {
    val engineConfiguration = EngineConfiguration.rememberForPhoto(
        license = "<your license here>",
        userId = "<your unique user id>",
    )

    PhotoEditor(
        engineConfiguration = engineConfiguration,
        onClose = { /* handle close */ }
    )
}


// For video editing
@Composable
fun VideoEditorComposable() {
    val engineConfiguration = EngineConfiguration.rememberForVideo(
        license = "<your license here>",
        userId = "<your unique user id>",
    )

    VideoEditor(
        engineConfiguration = engineConfiguration,
        onClose = { /* handle close */ }
    )
}

5.2 Custom Configuration#

Note: Custom configuration features are currently limited in version 1.57.0 for new Jetpack Compose projects. Basic editor types work as expected.

You can customize the editor configuration for your specific needs:

@Composable
fun CustomEditorComposable() {
    val engineConfiguration = EngineConfiguration.rememberForDesign(
        license = "<your license here>",
        userId = "<your unique user id>",
        // Custom configuration options
        configuration = {
            // Configure editor appearance
            appearance {
                theme = Theme.DARK
                primaryColor = Color.Blue
            }

            // Configure available tools
            tools {
                // Enable/disable specific tools
                text = true
                shapes = true
                filters = true
                effects = false
            }

            // Configure asset sources
            assets {
                // Add custom asset sources
                addImageSource("my-images", "https://my-api.com/images")
            }
        }
    )

    DesignEditor(
        engineConfiguration = engineConfiguration,
        onClose = { /* handle close */ }
    )
}

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 all required permissions are 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.