Skip to content

Create a Color Palette

In this example, we will show you how to make color palette configurations for the mobile editor. The example is based on the Design Editor, however, it is exactly the same for all the other solutions.

Configuration

Color palette configuration is part of the EditorConfiguration class. Use the EditorConfiguration.getDefault helper function to make color palette configurations.

  • colorPalette - the color palette used for UI elements that contain predefined color options, e.g., for “Fill Color” or “Stroke Color”.
colorPalette = remember {
    listOf(
        Color(0xFF4A67FF),
        Color(0xFFFFD333),
        Color(0xFFC41230),
        Color(0xFF000000),
        Color(0xFFFFFFFF),
    )
},

Full Code

Here’s the full code:

import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import androidx.navigation.NavHostController
import ly.img.editor.DesignEditor
import ly.img.editor.EditorConfiguration
import ly.img.editor.EngineConfiguration
import ly.img.editor.rememberForDesign


// Add this composable to your NavHost
@Composable
fun ColorPaletteEditorSolution(navController: NavHostController) {
    val engineConfiguration = EngineConfiguration.rememberForDesign(
        license = "<your license here>",
    )
    val editorConfiguration = EditorConfiguration.rememberForDesign(
        colorPalette = remember {
            listOf(
                Color(0xFF4A67FF),
                Color(0xFFFFD333),
                Color(0xFFC41230),
                Color(0xFF000000),
                Color(0xFFFFFFFF),
            )
        },
    )
    DesignEditor(
        engineConfiguration = engineConfiguration,
        editorConfiguration = editorConfiguration,
    ) {
        // You can set result here
        navController.popBackStack()
    }
}