Platform

Android

Language

Kotlin

Configure Inspector Bar

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

Explore a full code sample on GitHub.

View on GitHub

Inspector Bar Architecture#

InspectorBar is a list of items placed horizontally at the bottom of the editor. It is visible when a design block is selected and its items provide different editing capabilities to the selected design block. It has type InspectorBar : EditorComponent and every item in the inspector bar has type InspectorBar.Item : EditorComponent. InspectorBar.Item is an abstract class that currently has two implementations: InspectorBar.Button and InspectorBar.Custom. InspectorBar.Button is an editor component that has an icon and a text positioned in a column, while InspectorBar.Custom is a fully custom editor component that allows drawing arbitrary content. Prefer using InspectorBar.Custom for rendering custom content in the inspector bar over inheriting from InspectorBar.Item.

InspectorBar Configuration#

InspectorBar is part of the EditorConfiguration, therefore, in order to configure the inspector bar we need to configure the EditorConfiguration. Below you can find the list of available configurations of the inspector bar. To demonstrate the default values, all parameters are assigned to their default values.

scope - the scope of this component. Every new value will trigger recomposition of all the lambda parameters below. If you need to access EditorScope to construct the scope, use LocalEditorScope. Consider using Compose State objects in the lambda parameters below for granular recompositions over updating the scope, since scope change triggers full recomposition of the inspector bar. Prefer updating individual InspectorBar.Items over updating the whole inspector bar. Ideally, scope should be updated when the parent scope (scope of the parent component) is updated and when you want to observe changes from the Engine. By default the scope is updated when the parent scope (accessed via LocalEditorScope) is updated, when selection is changed to a different design block (or unselected) and when the parent of the currently selected design block is changed to a different design block.

listBuilder - a builder that registers the list of InspectorBar.Items that should be part of the inspector bar. Note that registering does not mean displaying. The items will be displayed if InspectorBar.Item.visible is true for them. By default InspectorBar.ListBuilder.remember is used. For more details, see ListBuilder Configuration section.

horizontalArrangement - the horizontal arrangement that should be used to render the items in the inspector bar horizontally. Default value is Arrangement.Start.

itemsRowEnterTransition - separate transition of the items' row only when enterTransition is running. Default value is a right to left horizontal transition.

itemsRowExitTransition - separate transition of the items' row only when exitTransition is running. Default value is always no exit transition.

visible - whether the inspector bar should be visible. By default the value is true when a design block is selected in the editor, false otherwise.

enterTransition - transition of the inspector bar when it enters the parent composable. Default value is a bottom to top vertical transition.

exitTransition - transition of the inspector bar when it exits the parent composable. Default value is a top to bottom vertical transition.

decoration - decoration of the inspector bar. Useful when you want to add custom background, foreground, shadow, paddings etc. By default decoration adds background color, applies paddings and adds a close button to the inspector bar.

itemDecoration - decoration of the items in the inspector bar. Useful when you want to add custom background, foreground, shadow, paddings etc to the items. Prefer using this decoration when you want to apply the same decoration to all the items, otherwise set decoration to individual items. Default value is always no decoration.

InspectorBar.ListBuilder Configuration#

There are two main ways to create an instance of InspectorBar.ListBuilder. First way is to call modify on an existing builder, and the second way is to create the builder from scratch. Currently, there is a single available builder, accessible via InspectorBar.ListBuilder.remember. It provides a single general order of items in the inspector bar. There is a visibility information next to each item that mentions for which design blocks/fill types the item is going to be visible.

Modifying an Existing Builder#

In this example, we will modify the only available builder: InspectorBar.ListBuilder.remember. Modifying builders can be used, when you do not want to touch the default general order of the items in the builder, but rather add additional items and replace/hide some of the default items. To achieve that, there are multiple available functions in the scope of modify lambda:

addFirst - prepends a new InspectorBar.Item in the list.

addLast - appends a new InspectorBar.Item in the list.

addAfter - adds a new InspectorBar.Item right after the item with provided id. An exception will be thrown if no item exists with provided id in the default builder.

addBefore - adds a new InspectorBar.Item right before the item with provided id. An exception will be thrown if no item exists with provided id in the default builder.

replace - replaces the InspectorBar.Item with provided id. An exception will be thrown if no item exists with provided id in the default builder. Also note that the new item does not need to have the same id.

remove - removes the InspectorBar.Item with provided id. An exception will be thrown if no item exists with provided id in the default builder.

Warning#

Note that the order of items may change between editor versions, therefore ListBuilder.modify must be used with care. Consider creating a new builder if you want to have strict ordering between different editor versions.

Creating a New Builder#

In this example, we will create a builder from scratch that will be used in the InspectorBar of DesignEditor solution. Creating a new builder is recommended, when you do not want to use the default order of items provided by IMG.LY. This example mimics reordering the default order of items in InspectorBar.ListBuilder.remember builder. In addition, some items are removed and a new custom item is prepended.

InspectorBar.Item Configuration#

As mentioned in the InspectorBar Architecture section, InspectorBar.Item is an EditorComponent and it has two subtypes: InspectorBar.Button and InspectorBar.Custom.

InspectorBar.Button Configuration#

In order to create an inspector bar button, use InspectorBar.Button.remember composable function. Below you can find the list of available configurations when creating an InspectorBar.Button. To demonstrate the default values, all parameters are assigned to their default values whenever possible.

id - the id of the button. Note that it is highly recommended that every unique EditorComponent has a unique id. Parameter does not have a default value.

scope - the scope of this component. Every new value will trigger recomposition of all the lambda parameters below. If you need to access EditorScope to construct the scope, use LocalEditorScope. Consider using Compose State objects in the lambda parameters below for granular recompositions over updating the scope, since scope change triggers full recomposition of the button. Ideally, scope should be updated when the parent scope (scope of the parent component InspectorBar - InspectorBar.Scope) is updated and when you want to observe changes from the Engine. By default the scope is updated only when the parent component scope (InspectorBar.scope, accessed via LocalEditorScope) is updated.

onClick - the callback that is invoked when the button is clicked. Parameter does not have a default value.

icon - the icon content of the button. If null, it will not be rendered. Default value is null.

text - the text content of the button. If null, it will not be rendered. Default value is null.

enabled - whether the button is enabled. Default value is always true.

visible - whether the button should be visible. Default value is always true.

enterTransition - transition of the button when it enters the parent composable. Default value is always no enter transition.

exitTransition - transition of the button when it exits the parent composable. Default value is always no exit transition.

decoration - decoration of the button. Useful when you want to add custom background, foreground, shadow, paddings etc. Default value is always no decoration.

Other than the main InspectorBar.Button.remember function, there is one more convenience overload that has two differences:

icon is replaced with vectorIcon lambda, that returns VectorIcon instead of drawing the icon content.
text is replaced with text lambda, that returns String instead of drawing the text content.

InspectorBar.Custom Configuration#

In order to create a custom inspector bar item, use InspectorBar.Custom.remember composable function. Below you can find the list of available configurations when creating a InspectorBar.Custom item. To demonstrate the default values, all parameters are assigned to their default values whenever possible.

id - the id of the custom item. Note that it is highly recommended that every unique EditorComponent has a unique id. Parameter does not have a default value.

scope - the scope of this component. Every new value will trigger recomposition of all the lambda parameters below. If you need to access EditorScope to construct the scope, use LocalEditorScope. Consider using Compose State objects in the lambda parameters below for granular recompositions over updating the scope, since scope change triggers full recomposition of the custom item. Ideally, scope should be updated when the parent scope (scope of the parent component InspectorBar - InspectorBar.Scope) is updated and when you want to observe changes from the Engine. Parameter does not have a default value.

visible - whether the custom item should be visible. Default value is always true.

enterTransition - transition of the custom item when it enters the parent composable. Default value is always no enter transition.

exitTransition - transition of the custom item when it exits the parent composable. Default value is always no exit transition.

content - the content of the custom item. You are responsible for drawing it, handling clicks etc. Parameter does not have a default value.


import androidx.compose.animation.ExitTransition
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.animation.core.tween
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import ly.img.editor.DesignEditor
import ly.img.editor.EditorConfiguration
import ly.img.editor.EngineConfiguration
import ly.img.editor.core.component.InspectorBar
import ly.img.editor.rememberForDesign

// Add this composable to your NavHost
@Composable
fun SimpleInspectorBarSolution(navController: NavHostController) {
    val engineConfiguration =
        EngineConfiguration.rememberForDesign(
            license = "<your license here>",
        )

    val editorConfiguration =
        EditorConfiguration.rememberForDesign(
            inspectorBar = {
                InspectorBar.remember(
                    // Implementation is too large, check the implementation of InspectorBar.defaultScope
                    scope = InspectorBar.defaultScope,
                    listBuilder = InspectorBar.ListBuilder.remember(),
                    horizontalArrangement = { Arrangement.Start },
                    // Also available via InspectorBar.defaultItemsRowEnterTransition
                    itemsRowEnterTransition = {
                        remember {
                            slideInHorizontally(
                                animationSpec = tween(400, easing = CubicBezierEasing(0.05F, 0.7F, 0.1F, 1F)),
                                initialOffsetX = { it / 3 },
                            )
                        }
                    },
                    // Also available via InspectorBar.defaultItemsRowExitTransition
                    itemsRowExitTransition = { ExitTransition.None },
                    visible = { editorContext.safeSelection != null },
                    // Also available via InspectorBar.defaultEnterTransition
                    enterTransition = {
                        remember {
                            slideInVertically(
                                animationSpec =
                                    tween(
                                        durationMillis = 400,
                                        easing = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f),
                                    ),
                                initialOffsetY = { it },
                            )
                        }
                    },
                    // Also available via InspectorBar.defaultExitTransition
                    exitTransition = {
                        remember {
                            slideOutVertically(
                                animationSpec =
                                    tween(
                                        durationMillis = 150,
                                        easing = CubicBezierEasing(0.3f, 0f, 0.8f, 0.15f),
                                    ),
                                targetOffsetY = { it },
                            )
                        }
                    },
                    // Implementation is too large, check the implementation of InspectorBar.defaultDecoration
                    decoration = { InspectorBar.defaultDecoration },
                    // default value is { it() }
                    itemDecoration = {
                        Box(modifier = Modifier.padding(2.dp)) {
                            it()
                        }
                    },
                )
            },
        )
    DesignEditor(
        engineConfiguration = engineConfiguration,
        editorConfiguration = editorConfiguration,
    ) {
        // You can set result here
        navController.popBackStack()
    }
}

List of Available InspectorBar.Buttons#

As you often saw in the previous sections, there are composable functions that look like this: InspectorBar.Button.remember{name}. All these functions return an InspectorBar.Button, they are public and can be used in your application. Note that all the parameters of these functions have default values, therefore, you do not need to provide any values, however, if you want to modify any of the parameters, it is exactly the same as described in InspectorBar.Button Configuration section.

Button	Id	Description	Renders For
Button `InspectorBar.Button.rememberReplace`	Id `InspectorBar.Button.Id.Replace`	Description Opens a library sheet via `EditorEvent.Sheet.Open`. By default `DesignBlockType`, `FillType` and kind of the selected design block are used to find the library in the Asset Library. Selected asset will replace the content of the currently selected design block.	Renders For Video, Image, Sticker, Audio
Button `InspectorBar.Button.rememberEditText`	Id `InspectorBar.Button.Id.EditText`	Description Enters text editing mode for the selected design block.	Renders For Text
Button `InspectorBar.Button.rememberFormatText`	Id `InspectorBar.Button.Id.FormatText`	Description Opens format text sheet via `EditorEvent.Sheet.Open`.	Renders For Text
Button `InspectorBar.Button.rememberFillStroke`	Id `InspectorBar.Button.Id.FillStroke`	Description Opens fill & stroke sheet via `EditorEvent.Sheet.Open`.	Renders For Page, Video, Image, Shape, Text
Button `InspectorBar.Button.rememberVolume`	Id `InspectorBar.Button.Id.Volume`	Description Opens volume sheet via `EditorEvent.Sheet.Open`.	Renders For Video, Audio
Button `InspectorBar.Button.rememberCrop`	Id `InspectorBar.Button.Id.Crop`	Description Opens crop sheet via `EditorEvent.Sheet.Open`.	Renders For Video, Image
Button `InspectorBar.Button.rememberAdjustments`	Id `InspectorBar.Button.Id.Adjustments`	Description Opens adjustments sheet via `EditorEvent.Sheet.Open`.	Renders For Video, Image
Button `InspectorBar.Button.rememberFilter`	Id `InspectorBar.Button.Id.Filter`	Description Opens filter sheet via `EditorEvent.Sheet.Open`.	Renders For Video, Image
Button `InspectorBar.Button.rememberEffect`	Id `InspectorBar.Button.Id.Effect`	Description Opens effect sheet via `EditorEvent.Sheet.Open`.	Renders For Video, Image
Button `InspectorBar.Button.rememberBlur`	Id `InspectorBar.Button.Id.Blur`	Description Opens blur sheet via `EditorEvent.Sheet.Open`.	Renders For Video, Image
Button `InspectorBar.Button.rememberShape`	Id `InspectorBar.Button.Id.Shape`	Description Opens shape sheet via `EditorEvent.Sheet.Open`.	Renders For Video, Image, Shape
Button `InspectorBar.Button.rememberSelectGroup`	Id `InspectorBar.Button.Id.SelectGroup`	Description Selects the group design block that contains the currently selected design block via `EditorEvent.Selection.SelectGroup`.	Renders For Video, Image, Sticker, Shape, Text
Button `InspectorBar.Button.rememberEnterGroup`	Id `InspectorBar.Button.Id.EnterGroup`	Description Changes selection from the selected group design block to a design block within that group via `EditorEvent.Selection.EnterGroup`.	Renders For Group
Button `InspectorBar.Button.rememberLayer`	Id `InspectorBar.Button.Id.Layer`	Description Opens layer sheet via `EditorEvent.Sheet.Open`.	Renders For Video, Image, Sticker, Shape, Text
Button `InspectorBar.Button.rememberSplit`	Id `InspectorBar.Button.Id.Split`	Description Splits currently selected design block via `EditorEvent.Selection.Split` in a video scene.	Renders For Video, Image, Sticker, Shape, Text, Audio
Button `InspectorBar.Button.rememberMoveAsClip`	Id `InspectorBar.Button.Id.MoveAsClip`	Description Moves currently selected design block into the background track as clip via `EditorEvent.Selection.MoveAsClip`	Renders For Video, Image, Sticker, Shape, Text
Button `InspectorBar.Button.rememberMoveAsOverlay`	Id `InspectorBar.Button.Id.MoveAsOverlay`	Description Moves currently selected design block from the background track to an overlay via `EditorEvent.Selection.MoveAsOverlay`	Renders For Video, Image, Sticker, Shape, Text
Button `InspectorBar.Button.rememberReorder`	Id `InspectorBar.Button.Id.Reorder`	Description Opens reorder sheet via `EditorEvent.Sheet.Open`.	Renders For Video, Image, Sticker, Shape, Text
Button `InspectorBar.Button.rememberDuplicate`	Id `InspectorBar.Button.Id.Duplicate`	Description Duplicates currently selected design block via `EditorEvent.Selection.Duplicate`.	Renders For Video, Image, Sticker, Shape, Text, Audio
Button `InspectorBar.Button.rememberDelete`	Id `InspectorBar.Button.Id.Delete`	Description Deletes currently selected design block via `EditorEvent.Selection.Delete`.	Renders For Video, Image, Sticker, Shape, Text, Audio