Custom Views

VideoEditor SDK supports using your custom views in the editor. Using custom views gives you more control over the layout and allows you to dynamically react to events, and read values from ImglySettings or ImglyState subclasses.

Extending from IMG.LY views#

Extending from views provided by the VideoEditor SDK reduces the amount of boilerplate code required for accessing settings or subscribing/unsubscribing to events.

Here, we extend from an ImgLyUIRelativeContainer and modify the visibility of the view depending upon whether the main menu is being shown or not.

Custom views#

In situations where it is not possible to extend from the views provided by the VideoEditor SDK, you can create your views and manually add the boilerplate code for accessing settings or subscribing/unsubscribing to events.

Here, we extend from a RelativeLayout and modify the visibility of the view depending upon whether the main menu is being shown or not.

To see the usage of custom views, refer to the next section.


/**
 * A custom view showcasing how to subscribe to IMG.LY events and access [ImglyState] or [ImglySettings] classes.
 * IMG.LY SDKs provides multiple views ([ImgLyUIFrameContainer], [ImgLyUILinearContainer], [ImgLyUIRelativeContainer])
 * that you can extend from.
 *
 * Extending from ImgLyUI* views  has the following advantages -
 *   1. The view will automatically subscribe to events. Simply use the [OnEvent] annotation to listen to any event.
 *   2. Use `val name: ModelClass by stateHandlerResolve()` to resolve any [ImglyState] or [ImglySettings] class.
 *
 * If you cannot extend from an ImgLyUI* view, see [RawCustomView] for achieving the same in other custom views.
 *
 */
class ImglyCustomView constructor(
    context: Context, attrs: AttributeSet? = null
) : ImgLyUIRelativeContainer(context, attrs) {

    private val menuState: UiStateMenu by stateHandlerResolve()

    init {
        inflate(context, R.layout.custom_view, this)
    }

    @Suppress("ProtectedInFinal")
    @MainThread
    @OnEvent(value = [UiStateMenu.Event.TOOL_STACK_CHANGED], ignoreReverts = true)
    protected fun onToolStackChanged() {
        if (menuState.currentPanelData.id == MenuToolPanel.TOOL_ID) {
            this.visibility = View.VISIBLE
        } else {
            this.visibility = View.INVISIBLE
        }
    }
}