New Project Setup

This guide shows you how to integrate the CreativeEditor SDK into a new Android Fragment-based project. Learn how to:

create a new project.
add the necessary dependencies.
configure the editor.
test the integration.

Who Is This Guide For?#

This guide is for developers who:

Have experience with Android development and Kotlin
Want to create a new Android Fragment-based 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 traditional Android Views with Fragment-based architecture

What You’ll Achieve#

By following this guide, you:

Create a new Android Fragment-based 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

Explore Android Demos

View on GitHub

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

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 Fragment-Based Project#

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

Open Android Studio and select “New Project”
Choose “Empty Views Activity” template
Configure your project:
- Name: cesdk_android_fragment_app
- Package name: com.example.cesdkfragmentapp
- 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_fragment_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")

    // Required dependencies for CE.SDK (includes Compose internally)
    implementation("androidx.appcompat:appcompat:1.7.0")
    implementation("androidx.fragment:fragment-ktx:1.8.5")
    implementation("androidx.activity:activity-compose:1.9.3")
    implementation("androidx.compose.ui:ui:1.7.6")
    implementation("androidx.compose.material3:material3:1.3.1")

    // Fragment dependencies
    implementation("androidx.navigation:navigation-fragment-ktx:2.8.4")
    implementation("androidx.navigation:navigation-ui-ktx:2.8.4")

    // Other Android dependencies
    implementation("androidx.core:core-ktx:1.12.0")
    implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0")
    implementation("com.google.android.material:material:1.11.0")
}

2.3 Configure Android Settings#

Ensure your app/build.gradle.kts has the correct Android configuration:

android {
    namespace = "com.example.cesdkfragmentapp"
    compileSdk = 34

    defaultConfig {
        minSdk = 24
        targetSdk = 34
    }

    buildFeatures {
        viewBinding = true
    }

    kotlinOptions {
        jvmTarget = "17"
    }

    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#

3.1 Create Editor Fragment#

Create a new Kotlin file (for example, EditorFragment.kt) in your app module’s main source set (typically app/src/main/java/com/yourpackage/):

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
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>", // Get your license from https://img.ly/forms/free-trial
                    userId = "<your unique user id>", // A unique string to identify your user/session
                )

                DesignEditor(
                    engineConfiguration = engineConfiguration,
                    onClose = {
                        // Close the editor here
                        requireActivity().supportFragmentManager.popBackStack()
                    }
                )
            }
        }
    }
}

3.2 Update MainActivity#

Modify your existing MainActivity.kt file (located in app/src/main/java/com/yourpackage/) to host the fragment:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import com.example.cesdkfragmentapp.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.launchEditorButton.setOnClickListener {
            launchEditorFragment()
        }
    }

    private fun launchEditorFragment() {
        val editorFragment = EditorFragment()
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragmentContainer, editorFragment)
            .addToBackStack(null)
            .commit()
    }
}

3.3 Update Layout File#

Update your activity_main.xml to include a button and fragment container:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:padding="16dp">

        <Button
            android:id="@+id/launchEditorButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Launch Creative Editor SDK" />

    </LinearLayout>

    <FrameLayout
        android:id="@+id/fragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

3.4 Add Required Permissions#

Update your AndroidManifest.xml to include necessary permissions:

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

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

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

4.1 Build and Run#

Build your Android project using Gradle:

4.2 Test on Android Device#

./gradlew installInternalDebug

4.3 Verify Features#

After launching your app, verify these features work correctly:

App Launch: The main activity opens without errors
Button Interaction: The “Launch Creative Editor SDK” button responds to taps
Fragment Navigation: The editor fragment loads properly
Editor Launch: The CreativeEditor SDK opens without errors
Template Selection: You can browse and select templates
Editing Tools: All editing tools are accessible and functional
Export: You can export edited content successfully
Navigation: The editor closes properly when finished

4.4 Common Test Scenarios#

Photo Editing: Import and edit photos
Text Addition: Add and customize text elements
Template Usage: Apply and customize templates
Export Options: Test different export formats
Performance: Verify smooth operation on target devices

Step 5: Customize for Your Use Case#

5.1 Editor Configuration Options#

The CreativeEditor SDK offers different presets for common use cases:

Editor Type	Use Case	Kotlin Implementation
PhotoEditor	Photo editing and enhancement	`PhotoEditor` composable
DesignEditor	Graphic design and templates	`DesignEditor` composable
VideoEditor	Video editing and effects	`VideoEditor` composable

5.2 Custom Configuration#

You can customize the editor behavior:

class CustomEditorFragment : 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>",
                    // Add custom configuration here
                )

                DesignEditor(
                    engineConfiguration = engineConfiguration,
                    onClose = { requireActivity().supportFragmentManager.popBackStack() },
                    onExport = { result -> /* Handle export */ }
                )
            }
        }
    }
}