Looking for
or
?
We've rebranded!
API Docs

Configuration

Configuration tool

The SettingsList provides a lot of functions for customizing the Editor. To modify this configuration you need to generate a new SettingsList object and configurate the different models. Afterwards, you add the modified SettingsList to the CameraPreviewBuilder or the PhotoEditorBuilder.

class KEditorDemoActivity : Activity(), PermissionRequest.Response {

    companion object {
        const val PESDK_RESULT = 1
        const val GALLERY_RESULT = 2
    }

    // Important permission request for Android 6.0 and above, don't forget to add this!
    override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<String>, grantResults: IntArray) {
        PermissionRequest.onRequestPermissionsResult(requestCode, permissions, grantResults)
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
    }

    override fun permissionGranted() {}

    override fun permissionDenied() {
        /* TODO: The Permission was rejected by the user. The Editor was not opened,
         * Show a hint to the user and try again. */
    }

    // Create a empty new SettingsList and apply the changes on this referance.
    // If you include our asset Packs and use our UI you also need to add them to the UI,
    // otherwise they are only available for the backend (like Serialisation)
    // See the specific feature sections of our guides if you want to know how to add our own Assets.
    private fun createPESDKSettingsList() =
      PhotoEditorSettingsList()
        .configure<UiConfigFilter> {
            it.setFilterList(FilterPackBasic.getFilterPack())
        }
        .configure<UiConfigText> {
            it.setFontList(FontPackBasic.getFontPack())
        }
        .configure<UiConfigFrame> {
            it.setFrameList(FramePackBasic.getFramePack())
        }
        .configure<UiConfigOverlay> {
            it.setOverlayList(OverlayPackBasic.getOverlayPack())
        }
        .configure<UiConfigSticker> {
          it.setStickerLists(
            StickerPackEmoticons.getStickerCategory(),
            StickerPackShapes.getStickerCategory()
          )
        }
        .configure<PhotoEditorSaveSettings> {
            it.setOutputToGallery(Environment.DIRECTORY_DCIM)
        }


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        openSystemGalleryToSelectAnImage()
    }

    fun openSystemGalleryToSelectAnImage() {
        val intent = Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI)
        if (intent.resolveActivity(packageManager) != null) {
            startActivityForResult(intent, GALLERY_RESULT)
        } else {
            Toast.makeText(
              this,
              "No Gallery APP installed",
              Toast.LENGTH_LONG
            ).show()
        }
    }

    fun openEditor(inputImage: Uri?) {
        val settingsList = createPESDKSettingsList()

        settingsList.configure<LoadSettings> {
            it.source = inputImage
        }

        settingsList[LoadSettings::class].source = inputImage

        PhotoEditorBuilder(this)
          .setSettingsList(settingsList)
          .startActivityForResult(this, PESDK_RESULT)
    }


    override fun onActivityResult(requestCode: Int, resultCode: Int, intent: Intent) {
        super.onActivityResult(requestCode, resultCode, intent)

        if (resultCode == RESULT_OK && requestCode == GALLERY_RESULT) {
            // Open Editor with some uri in this case with an image selected from the system gallery.
            openEditor(intent.data)

        } else if (resultCode == RESULT_OK && requestCode == PESDK_RESULT) {
            // Editor has saved an Image.
            val data = EditorSDKResult(intent)

            Log.i("PESDK", "Source image is located here ${data.sourceUri}")
            Log.i("PESDK", "Result image is located here ${data.resultUri}")

            // TODO: Do something with the result image

            // OPTIONAL: read the latest state to save it as a serialisation
            val lastState = data.settingsList
            try {
                IMGLYFileWriter(lastState).writeJson(File(
                  Environment.getExternalStorageDirectory(),
                  "serialisationReadyToReadWithPESDKFileReader.json"
                ))
            } catch (e: IOException) {
                e.printStackTrace()
            }

        } else if (resultCode == RESULT_CANCELED && requestCode == PESDK_RESULT) {
            // Editor was canceled
            val data = EditorSDKResult(intent)

            val sourceURI = data.sourceUri
            // TODO: Do something with the source...
        }
    }

    private lateinit var videoUri1: Uri // Example code dummy
    private lateinit var videoUri2: Uri // Example code dummy

    @RequiresApi(Build.VERSION_CODES.JELLY_BEAN_MR2)
    private fun openVideoComposition() {
        thread {
            val settingsList = ExampleConfigUtility.createInitialVESDKSettingsList()
            settingsList.configure<VideoCompositionSettings> {
                // Add a video
                it.addCompositionPart(
                    VideoCompositionSettings.VideoPart(videoUri1)
                )
                // Add another video, which is already trimmed from 3 until 10 seconds
                it.addCompositionPart(
                    VideoCompositionSettings.VideoPart(
                        videoUri2,
                        trimStartInNanoseconds = 3.convert(TimeUnit.SECONDS, TimeUnit.NANOSECONDS),
                        trimEndInNanoseconds = 10.convert(TimeUnit.SECONDS, TimeUnit.NANOSECONDS)
                    )
                )
            }
            // ATTENTION: You need to set a loading source the size and fps is taken from!
            settingsList.configure<LoadSettings> {
                // You could use a video or a empty composition source which is recommended.
                it.source = LoadSettings.compositionSource(
                    width = 1024, height = 1920,
                    framesPerSecond = 60
                )
            }

            // OPTIONAL: Set the entry point to VideoCompositionToolPanel
            settingsList.configure<UiConfigMainMenu> {
                it.setInitialTool(VideoCompositionToolPanel.TOOL_ID)

            }
        }
    }
}
public class EditorDemoActivity extends Activity implements PermissionRequest.Response {

    // Important permission request for Android 6.0 and above, don't forget to add this!
    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        PermissionRequest.onRequestPermissionsResult(requestCode, permissions, grantResults);
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    }

    @Override
    public void permissionGranted() {}

    @Override
    public void permissionDenied() {
        /* TODO: The Permission was rejected by the user. The Editor was not opened,
         * Show a hint to the user and try again. */
    }

    public static int PESDK_RESULT = 1;
    public static int GALLERY_RESULT = 2;

    private SettingsList createPesdkSettingsList() {

        // Create a empty new SettingsList and apply the changes on this referance.
        PhotoEditorSettingsList settingsList = new PhotoEditorSettingsList();

        // If you include our asset Packs and you use our UI you also need to add them to the UI,
        // otherwise they are only available for the backend
        // See the specific feature sections of our guides if you want to know how to add our own Assets.

        settingsList.getSettingsModel(UiConfigFilter.class).setFilterList(
            FilterPackBasic.getFilterPack()
        );

        settingsList.getSettingsModel(UiConfigText.class).setFontList(
          FontPackBasic.getFontPack()
        );

        settingsList.getSettingsModel(UiConfigFrame.class).setFrameList(
          FramePackBasic.getFramePack()
        );

        settingsList.getSettingsModel(UiConfigOverlay.class).setOverlayList(
          OverlayPackBasic.getOverlayPack()
        );

        settingsList.getSettingsModel(UiConfigSticker.class).setStickerLists(
          StickerPackEmoticons.getStickerCategory(),
          StickerPackShapes.getStickerCategory()
        );

        return settingsList;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        openSystemGalleryToSelectAnImage();
    }

    private void openSystemGalleryToSelectAnImage() {
        Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        if (intent.resolveActivity(getPackageManager()) != null) {
            startActivityForResult(intent, GALLERY_RESULT);
        } else {
            Toast.makeText(
              this,
              "No Gallery APP installed",
              Toast.LENGTH_LONG
            ).show();
        }
    }

    private void openEditor(Uri inputImage) {
        SettingsList settingsList = createPesdkSettingsList();

        // Set input image
        settingsList.getSettingsModel(LoadSettings.class).setSource(inputImage);

        settingsList.getSettingsModel(PhotoEditorSaveSettings.class).setOutputToGallery(Environment.DIRECTORY_DCIM);

        new EditorBuilder(this)
          .setSettingsList(settingsList)
          .startActivityForResult(this, PESDK_RESULT);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
        super.onActivityResult(requestCode, resultCode, intent);

        if (resultCode == RESULT_OK && requestCode == GALLERY_RESULT) {
            // Open Editor with some uri in this case with an image selected from the system gallery.
            Uri selectedImage = intent.getData();
            openEditor(selectedImage);

        } else if (resultCode == RESULT_OK && requestCode == PESDK_RESULT) {
            // Editor has saved an Image.
            EditorSDKResult data = new EditorSDKResult(intent);

            // This adds the result and source image to Android's gallery
            data.notifyGallery(EditorSDKResult.UPDATE_RESULT & EditorSDKResult.UPDATE_SOURCE);

            Log.i("PESDK", "Source image is located here " + data.getSourceUri());
            Log.i("PESDK", "Result image is located here " + data.getResultUri());

            // TODO: Do something with the result image

            // OPTIONAL: read the latest state to save it as a serialisation
            SettingsList lastState = data.getSettingsList();
            try {
                new IMGLYFileWriter(lastState).writeJson(new File(
                  Environment.getExternalStorageDirectory(),
                  "serialisationReadyToReadWithPESDKFileReader.json"
                ));
            } catch (IOException e) { e.printStackTrace(); }

        } else if (resultCode == RESULT_CANCELED && requestCode == PESDK_RESULT) {
            // Editor was canceled
            EditorSDKResult data = new EditorSDKResult(intent);

            Uri sourceURI = data.getSourceUri();
            // TODO: Do something with the source...
        }
    }
}

Toolset configuration

Editor Tools

In order to change the tools or rearrange them, use the setToolList method of the UiConfigMainMenu object. Before this, you can use the getTools() method to get an ArrayList containing the default tools. You can use the clear() method to clear the list and refill it with your selection of tools in the preferred order or update it directly. You can also add custom tools by extending the AbstractToolPanel class.

A single ToolItem object takes three parameters:

  1. ID of the tool panel
  2. The tool name
  3. ImageSource of the icon
// Obtain the config
settingsList.configure<UiConfigMainMenu> {
    // Set the tools you want keep sure you licence is cover the feature and do not forget to include the correct modules in your build.gradle
    it.setToolList(
        // Composition tool (needs 'ui:video-composition')
        ToolItem(
            "imgly_tool_composition",
            R.string.vesdk_video_composition_title_name,
            ImageSource.create(R.drawable.imgly_icon_tool_video_composition)
        ),
        // Trim tool (Is redundant together with the composition tool, needs 'ui:video-trim')
        ToolItem("imgly_tool_trim", R.string.vesdk_video_trim_title_name, ImageSource.create(R.drawable.imgly_icon_tool_trim)),
        // Audio Overlay tool (needs 'ui:audio-composition')
        ToolItem(
            "imgly_tool_audio_overlay_options",
            R.string.vesdk_audio_composition_title_name,
            ImageSource.create(R.drawable.imgly_icon_tool_audio)
        ),
        // Transformation tool (needs 'ui:transform')
        ToolItem(
            "imgly_tool_transform",
            R.string.pesdk_transform_title_name,
            ImageSource.create(R.drawable.imgly_icon_tool_transform)
        ),
        // Filter tool (needs 'ui:filter')
        ToolItem("imgly_tool_filter", R.string.pesdk_filter_title_name, ImageSource.create(R.drawable.imgly_icon_tool_filters)),
        // Adjustment tool (needs 'ui:adjustment')
        ToolItem(
            "imgly_tool_adjustment",
            R.string.pesdk_adjustments_title_name,
            ImageSource.create(R.drawable.imgly_icon_tool_adjust)
        ),
        // Sticker tool (needs 'ui:sticker')
        ToolItem(
            "imgly_tool_sticker_selection",
            R.string.pesdk_sticker_title_name,
            ImageSource.create(R.drawable.imgly_icon_tool_sticker)
        ),
        // Text Design tool (needs 'ui:text-design')
        ToolItem(
            "imgly_tool_text_design",
            R.string.pesdk_textDesign_title_name,
            ImageSource.create(R.drawable.imgly_icon_tool_text_design)
        ),
        // Text tool (needs 'ui:text')
        ToolItem("imgly_tool_text", R.string.pesdk_text_title_name, ImageSource.create(R.drawable.imgly_icon_tool_text)),
        // Overlay tool (needs 'ui:overlay')
        ToolItem("imgly_tool_overlay", R.string.pesdk_overlay_title_name, ImageSource.create(R.drawable.imgly_icon_tool_overlay)),
        // Frame tool (needs 'ui:frame')
        ToolItem("imgly_tool_frame", R.string.pesdk_frame_title_name, ImageSource.create(R.drawable.imgly_icon_tool_frame)),
        // Brush tool (needs 'ui:brush')
        ToolItem("imgly_tool_brush", R.string.pesdk_brush_title_name, ImageSource.create(R.drawable.imgly_icon_tool_brush)),
        // Focus tool (needs 'ui:focus')
        ToolItem("imgly_tool_focus", R.string.pesdk_focus_title_name, ImageSource.create(R.drawable.imgly_icon_tool_focus))
    )
}
// Obtain the config
UiConfigMainMenu uiConfigMainMenu = settingsList.getSettingsModel(UiConfigMainMenu.class);
// Set the tools you want keep sure you licence is cover the feature and do not forget to include the correct modules in your build.gradle
uiConfigMainMenu.setToolList(
  // Composition tool (needs 'ui:video-composition')
  new ToolItem("imgly_tool_composition", R.string.vesdk_video_composition_title_name, ImageSource.create(R.drawable.imgly_icon_tool_video_composition)),
  // Trim tool (Is redundant together with the composition tool, needs 'ui:video-trim')
  new ToolItem("imgly_tool_trim", R.string.vesdk_video_trim_title_name, ImageSource.create(R.drawable.imgly_icon_tool_trim)),
  // Audio Overlay tool (needs 'ui:audio-composition')
  new ToolItem("imgly_tool_audio_overlay_options", R.string.vesdk_audio_composition_title_name, ImageSource.create(R.drawable.imgly_icon_tool_audio)),
  // Transformation tool (needs 'ui:transform')
  new ToolItem("imgly_tool_transform", R.string.pesdk_transform_title_name, ImageSource.create(R.drawable.imgly_icon_tool_transform)),
  // Filter tool (needs 'ui:filter')
  new ToolItem("imgly_tool_filter", R.string.pesdk_filter_title_name, ImageSource.create(R.drawable.imgly_icon_tool_filters)),
  // Adjustment tool (needs 'ui:adjustment')
  new ToolItem("imgly_tool_adjustment", R.string.pesdk_adjustments_title_name, ImageSource.create(R.drawable.imgly_icon_tool_adjust)),
  // Sticker tool (needs 'ui:sticker')
  new ToolItem("imgly_tool_sticker_selection", R.string.pesdk_sticker_title_name, ImageSource.create(R.drawable.imgly_icon_tool_sticker)),
  // Text Design tool (needs 'ui:text-design')
  new ToolItem("imgly_tool_text_design", R.string.pesdk_textDesign_title_name, ImageSource.create(R.drawable.imgly_icon_tool_text_design)),
  // Text tool (needs 'ui:text')
  new ToolItem("imgly_tool_text", R.string.pesdk_text_title_name, ImageSource.create(R.drawable.imgly_icon_tool_text)),
  // Overlay tool (needs 'ui:overlay')
  new ToolItem("imgly_tool_overlay", R.string.pesdk_overlay_title_name, ImageSource.create(R.drawable.imgly_icon_tool_overlay)),
  // Frame tool (needs 'ui:frame')
  new ToolItem("imgly_tool_frame", R.string.pesdk_frame_title_name, ImageSource.create(R.drawable.imgly_icon_tool_frame)),
  // Brush tool (needs 'ui:brush')
  new ToolItem("imgly_tool_brush", R.string.pesdk_brush_title_name, ImageSource.create(R.drawable.imgly_icon_tool_brush)),
  // Focus tool (needs 'ui:focus')
  new ToolItem("imgly_tool_focus", R.string.pesdk_focus_title_name, ImageSource.create(R.drawable.imgly_icon_tool_focus))
);

Select available crop ratios

Check out our transform documentation.

Configuring available fonts

Take a look at the text documentation.

Adding or removing stickers

Take a look at the stickers documentation.

Adding or removing filters

Take a look at the filters documentation.