Custom Theme

VideoEditor SDK supports using a custom theme for the editor. This enables developers to customize the editor's appearance as per their requirements by specifying their colors or styles.

You can access all the available VideoEditor SDK theme attributes along with other resources from our demo repository inside the res subfolder from the default_res_files folder for the SDK version you are using. The overall idea is that you can look at the default implementation and choose to override the attributes that you need to be different for your use case.

Create theme#

For the sake of this example, we create a custom theme extending from Theme.Imgly. Doing this ensures that all the colors and styles are inherited from it and we only have to override a few.

Custom colors#

Here, we override the theme attributes for setting the background color of the editor and the highlight border color for selected items.

Custom styles#

Here, we override the theme attribute for the style of the quick option item and provide our custom style.

Set theme#

Once we have created our custom theme, we set it by configuring UiConfigTheme.


<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="CustomSmallOptionItem" parent="Imgly.PESDK.Editor.Panel.SmallOptionItem">
        <item name="android:layout_width">24dp</item>
        <item name="android:layout_height">24dp</item>
    </style>

    <style name="CustomImglyTheme" parent="Theme.Imgly">
        <!-- Colors -->
        <item name="imgly_icon_border_color_active">@color/teal_200</item>
        <item name="imgly_background_color">@color/teal_200</item>

        <!-- Styles -->
        <item name="Imgly.PESDK.Editor.Panel.SmallOptionItem">@style/CustomSmallOptionItem</item>
    </style>
</resources>