Docs
API Docs

Filters

Filters tool

Our PhotoEditor SDK features more than 60 high-quality filters and enables you to add custom filters with ease. The processing of the images is lightning fast and adding your own filters neither requires super math nor high-level coding skills.

To examine the included filters, you can download the example app from the Play Store or clone our demo repository.

The backend settings are implemented in the FilterSettings class and displayed using the FilterToolPanel. If you want to customize the appearance of this tool, take a look at the styling section.

Add or remove predefined filters

In order to change the available filters or rearrange them, start with a default SettingsList as described in the configuration section and use getSettingsModel(UiConfigFilters.class) and the setFilterList(ly.img.android.pesdk.ui.panels.item.FilterItem...) method to add your filter selection as a list of FilterItem objects:

ConfigMap<FilterAsset> filterAssetsMap = settingsList.getSettingsModel(AssetConfig.class).getAssetMap(FilterAsset.class);
filterAssetsMap.add(FilterAsset.NONE_FILER);
filterAssetsMap.add(new LutColorFilterAsset("my_own_lut_id", ImageSource.create(R.drawable.imgly_lut_ad1920_5_5_128), 5, 5, 128));
filterAssetsMap.add(new ColorFilterAssetAD1920());
filterAssetsMap.add(new ColorFilterAssetAncient());
filterAssetsMap.add(new ColorFilterAssetBleached());
filterAssetsMap.add(new ColorFilterAssetBleachedBlue());
filterAssetsMap.add(new ColorFilterAssetBlues());
filterAssetsMap.add(new ColorFilterAssetBlueShadows());
filterAssetsMap.add(new ColorFilterAssetBreeze());
filterAssetsMap.add(new ColorFilterAssetBW());
filterAssetsMap.add(new ColorFilterAssetCelsius());
filterAssetsMap.add(new ColorFilterAssetChest());
filterAssetsMap.add(new ColorFilterAssetClassic());
filterAssetsMap.add(new ColorFilterAssetColorful());
filterAssetsMap.add(new ColorFilterAssetCool());
filterAssetsMap.add(new ColorFilterAssetCottonCandy());
filterAssetsMap.add(new ColorFilterAssetCreamy());
filterAssetsMap.add(new ColorFilterAssetEighties());
filterAssetsMap.add(new ColorFilterAssetElder());
filterAssetsMap.add(new ColorFilterAssetEvening());
filterAssetsMap.add(new ColorFilterAssetFall());
filterAssetsMap.add(new ColorFilterAssetFixie());
filterAssetsMap.add(new ColorFilterAssetFood());
filterAssetsMap.add(new ColorFilterAssetFridge());
filterAssetsMap.add(new ColorFilterAssetFront());
filterAssetsMap.add(new ColorFilterAssetGlam());
filterAssetsMap.add(new ColorFilterAssetGobblin());
filterAssetsMap.add(new ColorFilterAssetHighCarb());
filterAssetsMap.add(new ColorFilterAssetHighContrast());
filterAssetsMap.add(new ColorFilterAssetK1());
filterAssetsMap.add(new ColorFilterAssetK2());
filterAssetsMap.add(new ColorFilterAssetK6());
filterAssetsMap.add(new ColorFilterAssetKDynamic());
filterAssetsMap.add(new ColorFilterAssetKeen());
filterAssetsMap.add(new ColorFilterAssetLenin());
filterAssetsMap.add(new ColorFilterAssetLitho());
filterAssetsMap.add(new ColorFilterAssetLomo());
filterAssetsMap.add(new ColorFilterAssetLomo100());
filterAssetsMap.add(new ColorFilterAssetLucid());
filterAssetsMap.add(new ColorFilterAssetMellow());
filterAssetsMap.add(new ColorFilterAssetNeat());
filterAssetsMap.add(new ColorFilterAssetNoGreen());
filterAssetsMap.add(new ColorFilterAssetOrchid());
filterAssetsMap.add(new ColorFilterAssetPale());
filterAssetsMap.add(new ColorFilterAssetPitched());
filterAssetsMap.add(new ColorFilterAssetPola669());
filterAssetsMap.add(new ColorFilterAssetPolaSx());
filterAssetsMap.add(new ColorFilterAssetPro400());
filterAssetsMap.add(new ColorFilterAssetQuozi());
filterAssetsMap.add(new ColorFilterAssetSepiahigh());
filterAssetsMap.add(new ColorFilterAssetSettled());
filterAssetsMap.add(new ColorFilterAssetSeventies());
filterAssetsMap.add(new ColorFilterAssetSin());
filterAssetsMap.add(new ColorFilterAssetSoft());
filterAssetsMap.add(new ColorFilterAssetSteel());
filterAssetsMap.add(new ColorFilterAssetSummer());
filterAssetsMap.add(new ColorFilterAssetSunset());
filterAssetsMap.add(new ColorFilterAssetTender());
filterAssetsMap.add(new ColorFilterAssetTexas());
filterAssetsMap.add(new ColorFilterAssetTwilight());
filterAssetsMap.add(new ColorFilterAssetWinter());
filterAssetsMap.add(new ColorFilterAssetX400());
settingsList.getSettingsModel(AssetConfig::class.java).apply {
    getAssetMap(FilterAsset::class.java).apply {
        add(FilterAsset.NONE_FILER)
        add(LutColorFilterAsset("my_own_lut_id", ImageSource.create(R.drawable.imgly_lut_ad1920_5_5_128), 5, 5, 128))
        add(ColorFilterAssetAD1920())
        add(ColorFilterAssetAncient())
        add(ColorFilterAssetBleached())
        add(ColorFilterAssetBleachedBlue())
        add(ColorFilterAssetBlues())
        add(ColorFilterAssetBlueShadows())
        add(ColorFilterAssetBreeze())
        add(ColorFilterAssetBW())
        add(ColorFilterAssetCelsius())
        add(ColorFilterAssetChest())
        add(ColorFilterAssetClassic())
        add(ColorFilterAssetColorful())
        add(ColorFilterAssetCool())
        add(ColorFilterAssetCottonCandy())
        add(ColorFilterAssetCreamy())
        add(ColorFilterAssetEighties())
        add(ColorFilterAssetElder())
        add(ColorFilterAssetEvening())
        add(ColorFilterAssetFall())
        add(ColorFilterAssetFixie())
        add(ColorFilterAssetFood())
        add(ColorFilterAssetFridge())
        add(ColorFilterAssetFront())
        add(ColorFilterAssetGlam())
        add(ColorFilterAssetGobblin())
        add(ColorFilterAssetHighCarb())
        add(ColorFilterAssetHighContrast())
        add(ColorFilterAssetK1())
        add(ColorFilterAssetK2())
        add(ColorFilterAssetK6())
        add(ColorFilterAssetKDynamic())
        add(ColorFilterAssetKeen())
        add(ColorFilterAssetLenin())
        add(ColorFilterAssetLitho())
        add(ColorFilterAssetLomo())
        add(ColorFilterAssetLomo100())
        add(ColorFilterAssetLucid())
        add(ColorFilterAssetMellow())
        add(ColorFilterAssetNeat())
        add(ColorFilterAssetNoGreen())
        add(ColorFilterAssetOrchid())
        add(ColorFilterAssetPale())
        add(ColorFilterAssetPitched())
        add(ColorFilterAssetPola669())
        add(ColorFilterAssetPolaSx())
        add(ColorFilterAssetPro400())
        add(ColorFilterAssetQuozi())
        add(ColorFilterAssetSepiahigh())
        add(ColorFilterAssetSettled())
        add(ColorFilterAssetSeventies())
        add(ColorFilterAssetSin())
        add(ColorFilterAssetSoft())
        add(ColorFilterAssetSteel())
        add(ColorFilterAssetSummer())
        add(ColorFilterAssetSunset())
        add(ColorFilterAssetTender())
        add(ColorFilterAssetTexas())
        add(ColorFilterAssetTwilight())
        add(ColorFilterAssetWinter())
        add(ColorFilterAssetX400())
    }
}

Response filters

We use a technology called LUTs in order to add new filters to our SDK. The main idea is that colors respond to operations that are carried out during the filtering process. We ‘record’ that very response by applying the filter to the identity image shown below.

Starting with version 4.0, we support lower resolution LUT files in order to further reduce your apps deployment size and speed up live filters and filter previews. The supported formats are:

  • 512x512 LUT with 8 columns and 8 rows (default) (download )
  • 256x256 LUT with 7 columns and 7 rows (download )
  • 256x256 LUT with 6 columns and 6 rows (download )
  • 128x128 LUT with 5 columns and 5 rows (download )

Using a smaller LUT file may lead to issues when applying your filter, as our processing engine needs to interpolate missing values. We recommend starting with the smallest possible LUT file and falling back to larger files if you notice that your filter can’t be fully reproduced:

Identity 512x512 8x8 LUT Identity 256x256 7x7 LUT Identity 256x256 6x6 LUT Identity 128x128 5x5 LUT

The black borders are required in order to optimize performance and the number of rows translates to the resolution for the green channel, the number of columns translates to the resolution of the red channel and the number of tiles translates to the blue channels resolution. And larger LUTs naturally guarantee a larger resolution across all channels.

The resulting image can be used within our SDK and the recorded changes can then be applied to any image by looking up the transformed colors in the modified LUT.

If you want to create a new filter, you’ll need to download one of the identity LUTs shown above, load it into an image editing software of your choice, apply your operations, save it and add it to your app. Please note that not all operations can be translated into a response filter. Typically those operations use surrounding the pixels to determine the color of the pixel, such as blur.

WARNING: As any compression artifacts in the edited LUT could lead to distorted results when applying the filter, you need to save your LUT as a PNG file.

The last step is to add the filter to the list of available filters by creating a LutColorFilterAsset object just as described above. The object takes the following three parameters:

  1. String resource identifier of the filters name, which will not be displayed in the default layout, but is used for Accessibility.
  2. Preview image resource for the CameraPreviewActivity. This image is replaced with a filtered version of the current image within the editor.
  3. Drawable-nodpi or Raw resource identifier of the PNG LUT.

WARNING: Be sure to put the LUT PNG file in the ‘res/drawable-nodpi’ folder. Otherwise, the LUT will be scaled by the Android system.

Adding the custom filter to the available filters then looks like this:

DataSourceIdItemList<FilterItem> filterInUiList = settingsList.getSettingsModel(UiConfigFilter.class).getFilterList();
filterInUiList.clear();
filterInUiList.add(new FilterItem("my_own_lut_id", "My Filter"));
filterInUiList.add(new FilterItem(FilterAsset.NONE_FILTER_ID, R.string.pesdk_filter_asset_none));
filterInUiList.add(new FilterItem(ColorFilterAssetAD1920.ID, R.string.pesdk_filter_asset_ad1920));
filterInUiList.add(new FilterItem(ColorFilterAssetAncient.ID, R.string.pesdk_filter_asset_ancient));
filterInUiList.add(new FilterItem(ColorFilterAssetBleached.ID, R.string.pesdk_filter_asset_bleached));
filterInUiList.add(new FilterItem(ColorFilterAssetBleachedBlue.ID, R.string.pesdk_filter_asset_bBlue));
filterInUiList.add(new FilterItem(ColorFilterAssetBlues.ID, R.string.pesdk_filter_asset_blues));
filterInUiList.add(new FilterItem(ColorFilterAssetBlueShadows.ID, R.string.pesdk_filter_asset_blueShade));
filterInUiList.add(new FilterItem(ColorFilterAssetBreeze.ID, R.string.pesdk_filter_asset_breeze));
filterInUiList.add(new FilterItem(ColorFilterAssetBW.ID, R.string.pesdk_filter_asset_bw));
filterInUiList.add(new FilterItem(ColorFilterAssetCelsius.ID, R.string.pesdk_filter_asset_celsius));
filterInUiList.add(new FilterItem(ColorFilterAssetChest.ID, R.string.pesdk_filter_asset_chest));
filterInUiList.add(new FilterItem(ColorFilterAssetClassic.ID, R.string.pesdk_filter_asset_classic));
filterInUiList.add(new FilterItem(ColorFilterAssetColorful.ID, R.string.pesdk_filter_asset_colorful));
filterInUiList.add(new FilterItem(ColorFilterAssetCool.ID, R.string.pesdk_filter_asset_cool));
filterInUiList.add(new FilterItem(ColorFilterAssetCottonCandy.ID, R.string.pesdk_filter_asset_candy));
filterInUiList.add(new FilterItem(ColorFilterAssetCreamy.ID, R.string.pesdk_filter_asset_creamy));
filterInUiList.add(new FilterItem(ColorFilterAssetEighties.ID, R.string.pesdk_filter_asset_80s));
filterInUiList.add(new FilterItem(ColorFilterAssetElder.ID, R.string.pesdk_filter_asset_elder));
filterInUiList.add(new FilterItem(ColorFilterAssetEvening.ID, R.string.pesdk_filter_asset_evening));
filterInUiList.add(new FilterItem(ColorFilterAssetFall.ID, R.string.pesdk_filter_asset_fall));
filterInUiList.add(new FilterItem(ColorFilterAssetFixie.ID, R.string.pesdk_filter_asset_fixie));
filterInUiList.add(new FilterItem(ColorFilterAssetFood.ID, R.string.pesdk_filter_asset_food));
filterInUiList.add(new FilterItem(ColorFilterAssetFridge.ID, R.string.pesdk_filter_asset_fridge));
filterInUiList.add(new FilterItem(ColorFilterAssetFront.ID, R.string.pesdk_filter_asset_front));
filterInUiList.add(new FilterItem(ColorFilterAssetGlam.ID, R.string.pesdk_filter_asset_glam));
filterInUiList.add(new FilterItem(ColorFilterAssetGobblin.ID, R.string.pesdk_filter_asset_goblin));
filterInUiList.add(new FilterItem(ColorFilterAssetHighCarb.ID, R.string.pesdk_filter_asset_carb));
filterInUiList.add(new FilterItem(ColorFilterAssetHighContrast.ID, R.string.pesdk_filter_asset_hicon));
filterInUiList.add(new FilterItem(ColorFilterAssetK1.ID, R.string.pesdk_filter_asset_k1));
filterInUiList.add(new FilterItem(ColorFilterAssetK2.ID, R.string.pesdk_filter_asset_k2));
filterInUiList.add(new FilterItem(ColorFilterAssetK6.ID, R.string.pesdk_filter_asset_k6));
filterInUiList.add(new FilterItem(ColorFilterAssetKDynamic.ID, R.string.pesdk_filter_asset_dynamic));
filterInUiList.add(new FilterItem(ColorFilterAssetKeen.ID, R.string.pesdk_filter_asset_keen));
filterInUiList.add(new FilterItem(ColorFilterAssetLenin.ID, R.string.pesdk_filter_asset_lenin));
filterInUiList.add(new FilterItem(ColorFilterAssetLitho.ID, R.string.pesdk_filter_asset_litho));
filterInUiList.add(new FilterItem(ColorFilterAssetLomo.ID, R.string.pesdk_filter_asset_lomo));
filterInUiList.add(new FilterItem(ColorFilterAssetLomo100.ID, R.string.pesdk_filter_asset_lomo100));
filterInUiList.add(new FilterItem(ColorFilterAssetLucid.ID, R.string.pesdk_filter_asset_lucid));
filterInUiList.add(new FilterItem(ColorFilterAssetMellow.ID, R.string.pesdk_filter_asset_mellow));
filterInUiList.add(new FilterItem(ColorFilterAssetNeat.ID, R.string.pesdk_filter_asset_neat));
filterInUiList.add(new FilterItem(ColorFilterAssetNoGreen.ID, R.string.pesdk_filter_asset_noGreen));
filterInUiList.add(new FilterItem(ColorFilterAssetOrchid.ID, R.string.pesdk_filter_asset_orchid));
filterInUiList.add(new FilterItem(ColorFilterAssetPale.ID, R.string.pesdk_filter_asset_pale));
filterInUiList.add(new FilterItem(ColorFilterAssetPitched.ID, R.string.pesdk_filter_asset_pitched));
filterInUiList.add(new FilterItem(ColorFilterAssetPola669.ID, R.string.pesdk_filter_asset_669));
filterInUiList.add(new FilterItem(ColorFilterAssetPolaSx.ID, R.string.pesdk_filter_asset_sx));
filterInUiList.add(new FilterItem(ColorFilterAssetPro400.ID, R.string.pesdk_filter_asset_pro400));
filterInUiList.add(new FilterItem(ColorFilterAssetQuozi.ID, R.string.pesdk_filter_asset_quozi));
filterInUiList.add(new FilterItem(ColorFilterAssetSepiahigh.ID, R.string.pesdk_filter_asset_sepiaHigh));
filterInUiList.add(new FilterItem(ColorFilterAssetSettled.ID, R.string.pesdk_filter_asset_settled));
filterInUiList.add(new FilterItem(ColorFilterAssetSeventies.ID, R.string.pesdk_filter_asset_70s));
filterInUiList.add(new FilterItem(ColorFilterAssetSin.ID, R.string.pesdk_filter_asset_sin));
filterInUiList.add(new FilterItem(ColorFilterAssetSoft.ID, R.string.pesdk_filter_asset_soft));
filterInUiList.add(new FilterItem(ColorFilterAssetSteel.ID, R.string.pesdk_filter_asset_steel));
filterInUiList.add(new FilterItem(ColorFilterAssetSummer.ID, R.string.pesdk_filter_asset_summer));
filterInUiList.add(new FilterItem(ColorFilterAssetSunset.ID, R.string.pesdk_filter_asset_sunset));
filterInUiList.add(new FilterItem(ColorFilterAssetTender.ID, R.string.pesdk_filter_asset_tender));
filterInUiList.add(new FilterItem(ColorFilterAssetTexas.ID, R.string.pesdk_filter_asset_texas));
filterInUiList.add(new FilterItem(ColorFilterAssetTwilight.ID, R.string.pesdk_filter_asset_twilight));
filterInUiList.add(new FilterItem(ColorFilterAssetWinter.ID, R.string.pesdk_filter_asset_winter));
filterInUiList.add(new FilterItem(ColorFilterAssetX400.ID, R.string.pesdk_filter_asset_x400));
settingsList.getSettingsModel(UiConfigFilter::class.java)!!.filterList.apply {
    clear()
    add(FilterItem("my_own_lut_id", "My Filter"))
    add(FilterItem(FilterAsset.NONE_FILTER_ID, R.string.pesdk_filter_asset_none))
    add(FilterItem(ColorFilterAssetAD1920.ID, R.string.pesdk_filter_asset_ad1920))
    add(FilterItem(ColorFilterAssetAncient.ID, R.string.pesdk_filter_asset_ancient))
    add(FilterItem(ColorFilterAssetBleached.ID, R.string.pesdk_filter_asset_bleached))
    add(FilterItem(ColorFilterAssetBleachedBlue.ID, R.string.pesdk_filter_asset_bBlue))
    add(FilterItem(ColorFilterAssetBlues.ID, R.string.pesdk_filter_asset_blues))
    add(FilterItem(ColorFilterAssetBlueShadows.ID, R.string.pesdk_filter_asset_blueShade))
    add(FilterItem(ColorFilterAssetBreeze.ID, R.string.pesdk_filter_asset_breeze))
    add(FilterItem(ColorFilterAssetBW.ID, R.string.pesdk_filter_asset_bw))
    add(FilterItem(ColorFilterAssetCelsius.ID, R.string.pesdk_filter_asset_celsius))
    add(FilterItem(ColorFilterAssetChest.ID, R.string.pesdk_filter_asset_chest))
    add(FilterItem(ColorFilterAssetClassic.ID, R.string.pesdk_filter_asset_classic))
    add(FilterItem(ColorFilterAssetColorful.ID, R.string.pesdk_filter_asset_colorful))
    add(FilterItem(ColorFilterAssetCool.ID, R.string.pesdk_filter_asset_cool))
    add(FilterItem(ColorFilterAssetCottonCandy.ID, R.string.pesdk_filter_asset_candy))
    add(FilterItem(ColorFilterAssetCreamy.ID, R.string.pesdk_filter_asset_creamy))
    add(FilterItem(ColorFilterAssetEighties.ID, R.string.pesdk_filter_asset_80s))
    add(FilterItem(ColorFilterAssetElder.ID, R.string.pesdk_filter_asset_elder))
    add(FilterItem(ColorFilterAssetEvening.ID, R.string.pesdk_filter_asset_evening))
    add(FilterItem(ColorFilterAssetFall.ID, R.string.pesdk_filter_asset_fall))
    add(FilterItem(ColorFilterAssetFixie.ID, R.string.pesdk_filter_asset_fixie))
    add(FilterItem(ColorFilterAssetFood.ID, R.string.pesdk_filter_asset_food))
    add(FilterItem(ColorFilterAssetFridge.ID, R.string.pesdk_filter_asset_fridge))
    add(FilterItem(ColorFilterAssetFront.ID, R.string.pesdk_filter_asset_front))
    add(FilterItem(ColorFilterAssetGlam.ID, R.string.pesdk_filter_asset_glam))
    add(FilterItem(ColorFilterAssetGobblin.ID, R.string.pesdk_filter_asset_goblin))
    add(FilterItem(ColorFilterAssetHighCarb.ID, R.string.pesdk_filter_asset_carb))
    add(FilterItem(ColorFilterAssetHighContrast.ID, R.string.pesdk_filter_asset_hicon))
    add(FilterItem(ColorFilterAssetK1.ID, R.string.pesdk_filter_asset_k1))
    add(FilterItem(ColorFilterAssetK2.ID, R.string.pesdk_filter_asset_k2))
    add(FilterItem(ColorFilterAssetK6.ID, R.string.pesdk_filter_asset_k6))
    add(FilterItem(ColorFilterAssetKDynamic.ID, R.string.pesdk_filter_asset_dynamic))
    add(FilterItem(ColorFilterAssetKeen.ID, R.string.pesdk_filter_asset_keen))
    add(FilterItem(ColorFilterAssetLenin.ID, R.string.pesdk_filter_asset_lenin))
    add(FilterItem(ColorFilterAssetLitho.ID, R.string.pesdk_filter_asset_litho))
    add(FilterItem(ColorFilterAssetLomo.ID, R.string.pesdk_filter_asset_lomo))
    add(FilterItem(ColorFilterAssetLomo100.ID, R.string.pesdk_filter_asset_lomo100))
    add(FilterItem(ColorFilterAssetLucid.ID, R.string.pesdk_filter_asset_lucid))
    add(FilterItem(ColorFilterAssetMellow.ID, R.string.pesdk_filter_asset_mellow))
    add(FilterItem(ColorFilterAssetNeat.ID, R.string.pesdk_filter_asset_neat))
    add(FilterItem(ColorFilterAssetNoGreen.ID, R.string.pesdk_filter_asset_noGreen))
    add(FilterItem(ColorFilterAssetOrchid.ID, R.string.pesdk_filter_asset_orchid))
    add(FilterItem(ColorFilterAssetPale.ID, R.string.pesdk_filter_asset_pale))
    add(FilterItem(ColorFilterAssetPitched.ID, R.string.pesdk_filter_asset_pitched))
    add(FilterItem(ColorFilterAssetPola669.ID, R.string.pesdk_filter_asset_669))
    add(FilterItem(ColorFilterAssetPolaSx.ID, R.string.pesdk_filter_asset_sx))
    add(FilterItem(ColorFilterAssetPro400.ID, R.string.pesdk_filter_asset_pro400))
    add(FilterItem(ColorFilterAssetQuozi.ID, R.string.pesdk_filter_asset_quozi))
    add(FilterItem(ColorFilterAssetSepiahigh.ID, R.string.pesdk_filter_asset_sepiaHigh))
    add(FilterItem(ColorFilterAssetSettled.ID, R.string.pesdk_filter_asset_settled))
    add(FilterItem(ColorFilterAssetSeventies.ID, R.string.pesdk_filter_asset_70s))
    add(FilterItem(ColorFilterAssetSin.ID, R.string.pesdk_filter_asset_sin))
    add(FilterItem(ColorFilterAssetSoft.ID, R.string.pesdk_filter_asset_soft))
    add(FilterItem(ColorFilterAssetSteel.ID, R.string.pesdk_filter_asset_steel))
    add(FilterItem(ColorFilterAssetSummer.ID, R.string.pesdk_filter_asset_summer))
    add(FilterItem(ColorFilterAssetSunset.ID, R.string.pesdk_filter_asset_sunset))
    add(FilterItem(ColorFilterAssetTender.ID, R.string.pesdk_filter_asset_tender))
    add(FilterItem(ColorFilterAssetTexas.ID, R.string.pesdk_filter_asset_texas))
    add(FilterItem(ColorFilterAssetTwilight.ID, R.string.pesdk_filter_asset_twilight))
    add(FilterItem(ColorFilterAssetWinter.ID, R.string.pesdk_filter_asset_winter))
    add(FilterItem(ColorFilterAssetX400.ID, R.string.pesdk_filter_asset_x400))
}