Skip to content

Customize

In this example, we will show you how to customize the asset library 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.

Configuration

Asset library configuration is part of the EditorConfiguration class. Use the EditorConfiguration.getDefault helper function to make asset library configurations.

  • assetLibrary - the asset library UI definition used by the editor. It defines the content of the tabs when floating action button is clicked as well as the content of sheets when images and stickers are replaced. By default, AssetLibrary.getDefault() is used.
val editorConfiguration = EditorConfiguration.rememberForDesign(
    assetLibrary = AssetLibrary.getDefault(),
)

Custom Asset Source

To use custom asset sources in the asset library UI, the custom asset source must be first added to the engine. In addition to creating or loading a scene, registering the asset sources should be done in the onCreate callback. In this example, the EditorDefaults.onCreate default implementation is used and afterwards, the custom UnsplashAssetSource is added.

val unsplashAssetSource = remember {
    UnsplashAssetSource("<your Unsplash API host endpoint here>")
}
val engineConfiguration = EngineConfiguration.remember(
    license = "<your license here>",
    onCreate = {
        EditorDefaults.onCreate(
            engine = editorContext.engine,
            sceneUri = EngineConfiguration.defaultDesignSceneUri,
            eventHandler = editorContext.eventHandler,
        ) { _, _ ->
            editorContext.engine.asset.addSource(unsplashAssetSource)
        }
    },
)

Default Asset Library

AssetLibrary.getDefault() provides a simple API in case you want to reorder/drop predefined tabs, as well as adjust the content of the tabs. In this example, firstly, we drop the Elements tab and reorder the remaining ones and secondly, we manipulate the sections of the images tab by dropping, swapping and appending sections. Note that we append the section based on the UnsplashAssetSource shown above.

val assetLibrary = remember {
    val unsplashSection = LibraryContent.Section(
        titleRes = R.string.unsplash,
        sourceTypes = listOf(AssetSourceType(sourceId = unsplashAssetSource.sourceId)),
        assetType = AssetType.Image,
    )
    AssetLibrary.getDefault(
        tabs = listOf(
            AssetLibrary.Tab.IMAGES,
            AssetLibrary.Tab.SHAPES,
            AssetLibrary.Tab.STICKERS,
            AssetLibrary.Tab.TEXT,
        ),
        images = LibraryCategory.Images
            .replaceSection(index = 0) {
                // We replace the title: "Image Uploads" -> "Uploads"
                copy(titleRes = R.string.uploads)
            }
            .dropSection(index = 1)
            .addSection(unsplashSection),
    )
}
val editorConfiguration = EditorConfiguration.rememberForDesign(
    assetLibrary = assetLibrary,
)

Custom Asset Library

In case you want to adjust the asset library even further (i.e. create your own completely custom tabs, use different images category in FAB and replace sheets etc), you should use the constructor of the AssetLibrary instead of the helper AssetLibrary.getDefault() function. In this example, firstly, we fill the tabs with a custom My Assets tab as well as with the default images tab and secondly, we use a different images category for the replace sheet, which contains the default images + UnsplashAssetSource section.

val assetLibrary = remember {
    // We create a custom tab with title "My Assets" that contains 2 sections:
    // 1. Stickers - expanding it opens the default stickers content
    // 2. Text - expanding it opens the default text content. Note that the title is skipped.
    val myAssetsCategory = LibraryCategory(
        tabTitleRes = SmokeTestR.string.my_assets,
        tabSelectedIcon = IconPack.LibraryElements,
        tabUnselectedIcon = IconPack.LibraryElements,
        content = LibraryContent.Sections(
            titleRes = SmokeTestR.string.my_assets,
            sections = listOf(
                LibraryContent.Section(
                    titleRes = R.string.ly_img_editor_stickers,
                    sourceTypes = LibraryContent.Stickers.sourceTypes,
                    assetType = AssetType.Sticker,
                    expandContent = LibraryContent.Stickers,
                ),
                LibraryContent.Section(
                    sourceTypes = LibraryContent.Text.sourceTypes,
                    assetType = AssetType.Text,
                    expandContent = LibraryContent.Text,
                ),
            ),
        ),
    )
    AssetLibrary(
        tabs = {
            listOf(
                myAssetsCategory,
                LibraryCategory.Images,
            )
        },
        images = {
            val unsplashSection = LibraryContent.Section(
                titleRes = SmokeTestR.string.unsplash,
                sourceTypes = listOf(AssetSourceType(sourceId = unsplashAssetSource.sourceId)),
                assetType = AssetType.Image,
            )
            // See how the images is different in tabs and here
            LibraryCategory.Images.addSection(unsplashSection)
        },
    )
}
val editorConfiguration = EditorConfiguration.rememberForDesign(
    assetLibrary = assetLibrary,
)