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.

2 mins
estimated time
GitHub

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#

This sample includes two supporting UI behaviors:

  • In onLoaded, it auto-selects the current page so color controls are immediately available.
  • It configures the inspector bar with a Fill & Stroke button that opens a sheet using the colorPalette values.

Here’s the full code:

import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import ly.img.editor.Editor
import ly.img.editor.core.component.InspectorBar
import ly.img.editor.core.component.remember
import ly.img.editor.core.component.rememberFillStroke
import ly.img.editor.core.configuration.EditorConfiguration
import ly.img.editor.core.configuration.remember
import ly.img.engine.DesignBlockType


// Add this composable to your NavHost
@Composable
fun ColorPaletteEditorSolution(
    license: String,
    onClose: (Throwable?) -> Unit,
) {
    Editor(
        license = license, // pass null or empty for evaluation mode with watermark
        configuration = {
            EditorConfiguration.remember {
                onLoaded = {
                    editorContext.engine.block
                        .findByType(DesignBlockType.Page)
                        .firstOrNull()
                        ?.let { editorContext.engine.block.setSelected(it, selected = true) }
                }
                colorPalette = {
                    remember {
                        listOf(
                            Color(0xFF4A67FF),
                            Color(0xFFFFD333),
                            Color(0xFFC41230),
                            Color(0xFF000000),
                            Color(0xFFFFFFFF),
                        )
                    }
                }
                inspectorBar = {
                    InspectorBar.remember {
                        listBuilder = {
                            InspectorBar.ListBuilder.remember {
                                add { InspectorBar.Button.rememberFillStroke() }
                            }
                        }
                    }
                }
            }
        },
        onClose = onClose,
    )
}