Search Docs
Loading...
Skip to content

Create a Color Palette

In this example, we will show you how to make color palette configurations for the mobile editor.

Configuration#

Color palette configuration is part of the EditorConfiguration class.

  • 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.Editor
import ly.img.editor.core.configuration.EditorConfiguration
import ly.img.editor.core.configuration.remember


// Add this composable to your NavHost
@Composable
fun ColorPaletteEditorSolution(navController: NavHostController) {
    Editor(
        license = null, // pass null or empty for evaluation mode with watermark
        configuration = {
            EditorConfiguration.remember {
                colorPalette = {
                    remember {
                        listOf(
                            Color(0xFF4A67FF),
                            Color(0xFFFFD333),
                            Color(0xFFC41230),
                            Color(0xFF000000),
                            Color(0xFFFFFFFF),
                        )
                    }
                }
            }
        },
    ) {
        // You can set result here
        navController.popBackStack()
    }
}