Styling

It’s easy to customize the PhotoEditor Android SDK’s style. ​All resource and style identifier can be overwritten. They have the prefix: imgly_ e.g. Imgly. ​

Download the Default Layout as Reference

For an easy creation of a new interface design simply download our demo repository and extract the res subfolder from the default_res_files folder.

Prepare your Project

Copy and paste the downloaded files (only the files, not the folder) into the res folder of your own app module.

Open your project in Android Studio:

Change default icons

You can add your own icons:

Please make sure, that you overwrite the icon in all densities.

• Put a 48x48px icon file into the drawable-mdpi folder (1.0x baseline) for medium-density
• Put a 72x72px icon file into the drawable-hdpi folder (1.5x) for high-density
• Put a 96x96px icon file into the drawable-xhdpi folder (2.0x) for extra-high-density
• Put a 180x180px icon file into the drawable-xxhdpi folder (3.0x) for extra-extra-high-density
• Put a 192x192px icon file into the drawable-xxxhdpi folder (4.0x) for extra-extra-extra-high-density

There are two special files inside this project: imgly_icon_option_selected_color.png and imgly_icon_option_selected_color_bg.png. Both combined will create an icon which will be used for both the fore- and background colorpicking for the sticker.

The white color values from imgly_icon_option_selected_color.png replace and overlays the content from imgly_icon_option_selected_color_bg.png with the chosen color within the runtime.

Change default colors

Open the res/values/imgly_color.xml in your project and edit the specific ARGB Hex value or double tap the color rect on the left side of the line to open the color picker

Change Layout

If you want to change the order of the ActionBar Buttons, you can open the imgly_widget_actionbar.xml in the layout editor and simply change the order of the xml elements.

Warning: Do NOT change layout IDs or element types (extensions of a type are fine), otherwise the app will crash with a NullPointer or a TypeCast exception!

If you want to change the ActionBar Button Style go to the specific Element, hold down the Command Key and click on the style attribute value @style/Imgly.Editor.Header.Button.AcceptButton The Editor now jumps in the specific Style element in the imgly_style.xml file. Now you can edit all style attributes. It’s also possible to override the style attributes directly in the element node.

Declaring layout guides

For more information look at the Google Developer Guides.

See an example

You can find a finished example with a customized design in our demo repository. Just take a look at the CustomizeLayoutExample folder.