Search code examples
androidadobecreativesdk

How to customize the crop options available in the Creative SDK Image Editor

I am developing an Android app in which I want the user to crop the image in a square shape after selection image from the gallery.

I want to know how to launch the Creative SDK Image Editor (formerly the Aviary Image Editor) after image selection, so that it only shows the selected image with a square crop option and a minimum of 350px X 350px size.

Solution

  • The Adobe Creative SDK Image Editor does offer the ability to customize various things, including what crops are shown to the user (note that setting the minimum size for crops is not currently supported).

    Let's walk through customization for crops.

    Overview
    The basic concept here is that we will overwrite some default values that exist in the SDK.

    To achieve that, we will do 2 things:
    1. Find the default values in the SDK (so we can see what's there)
    2. Make a new xml file that overwrites only the values that we want to customize

    1. Finding the default values in the SDK
    The xml file we are looking for in the SDK will only appear after you have built your project in Android Studio at least once. If you haven't already, go ahead and build your project (you can do this from within Android Studio's "Build" menu).

    Now we need to find the xml file. To make it easier to find, make sure your Android Studio file browser is set to Project Files mode (by default it is set to Android mode; just click that menu to select a different option):
    enter image description here

    When the file browser is in Project Files mode, go to (you shouldn't edit this file):

    /app/build/intermediates/exploded-aar/com.adobe.creativesdk/image/4.0.0/res/values/values.xml

    Let's just look to see what default values we will override:
    - "aviary_crop_labels" (the label the user sees in the UI)
    - "aviary_crop_values" (the value that configures the crop itself)
    - "aviary_crop_selected_index" (the crop selected by default when the user opens the menu)

    2. Make a new values.xml file in your project
    You can switch your Android Studio file browser back to Android mode (the same way we switched the mode in step 1 above).

    When the file browser is in Android mode, go to: 

    /app/res/values

    In this values directory, you will probably already have strings.xml, styles.xml, and a dimens.xml directory.

    Let's make a new file in the values directory and call it values.xml (notice that this filename matches the filename we found in the SDK earlier).

    After you make the values.xml file, let's override those default SDK values we found earlier:
    - "aviary_crop_labels"
    - "aviary_crop_values"
    - "aviary_crop_selected_index"

    Add the following to values.xml:

    <resources>
    <string-array name="aviary_crop_labels">
        <item>@string/feather_square</item>
    </string-array>

    <string-array name="aviary_crop_values">
        <item>1:1</item>
    </string-array>

    <integer name="aviary_crop_selected_index">0</integer>
</resources>

    This code overrides the SDK's default values and only shows:
    - The string "Square" as the label
    - A crop with a 1:1 ratio
    - The square crop (the first item in our array) automatically selected

    Here is an example of what you will see:
    enter image description here

    You can explore the SDK's values.xml file for other potential customization options.