From 77dc7f2c5a8404016cbb078745886017e0cbb55f Mon Sep 17 00:00:00 2001 From: Sean Holbert Date: Thu, 17 Nov 2016 17:20:26 -0800 Subject: [PATCH] Allow user to specify brand color for cropper - Default colors for the cropper are less aggressive (not UCrop's orange) - If cropperTintColor is passed in, this overrides status bar, toolbard, and widget UX items. --- README.md | 3 +- .../ivpusic/imagepicker/PickerModule.java | 32 ++++++++++++++++++- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 00e313a..f3f9d05 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,7 @@ ImagePicker.clean().then(() => { | height | number | Height of result image when used with `cropping` option | | multiple | bool (default false) | Enable or disable multiple image selection | | includeBase64 | bool (default false) | Enable or disable returning base64 data with image | +| cropperTintColor (android only) | string (default `"#424242"`) | When cropping image, determines the color of Toolbar and other UX elements. Uses UCrop's `setToolbarColor, setActiveWidgetColor, and setStatusBarColor` with color specified. | | maxFiles (ios only) | number (default 5) | Max number of files to select when using `multiple` option | | compressVideo (ios only) | bool (default true) | When video is selected, compress it and convert it to mp4 | | smartAlbums (ios only) | array (default ['UserLibrary', 'PhotoStream', 'Panoramas', 'Videos', 'Bursts']) | List of smart albums to choose from | @@ -108,7 +109,7 @@ react-native link react-native-image-crop-picker ##### Android - [Optional] If you want to use camera picker in your project, add following to `AndroidManifest.xml` - - `` + - `` #### Production build diff --git a/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java b/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java index 77ae78c..08fd01e 100644 --- a/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java +++ b/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java @@ -5,6 +5,7 @@ import android.content.ClipData; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.BitmapFactory; +import android.graphics.Color; import android.media.MediaMetadataRetriever; import android.net.Uri; import android.os.Build; @@ -65,6 +66,15 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi private boolean cropping = false; private boolean multiple = false; private boolean includeBase64 = false; + + //Default colors from from https://material.google.com/style/color.html# + + //Grey 800 + private final String DEFAULT_TINT = "#424242"; + private String cropperTintColor = DEFAULT_TINT; + + //Light Blue 500 + private final String DEFAULT_WIDGET_COLOR = "#03A9F4"; private int width = 200; private int height = 200; private final ReactApplicationContext mReactContext; @@ -95,6 +105,8 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi width = options.hasKey("width") ? options.getInt("width") : width; height = options.hasKey("height") ? options.getInt("height") : height; cropping = options.hasKey("cropping") ? options.getBoolean("cropping") : cropping; + cropperTintColor = options.hasKey("cropperTintColor") ? options.getString("cropperTintColor") : cropperTintColor; + } private void deleteRecursive(File fileOrDirectory) { @@ -440,9 +452,27 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi return image; } + private void configureCropperColors(UCrop.Options options) { + int color = Color.parseColor(cropperTintColor); + options.setToolbarColor(color); + options.setStatusBarColor(color); + if (cropperTintColor.equals(DEFAULT_TINT)) { + /* + Default tint is grey => use a more flashy color that stands out more as the call to action + Here we use 'Light Blue 500' from https://material.google.com/style/color.html#color-color-palette + */ + options.setActiveWidgetColor(Color.parseColor(DEFAULT_WIDGET_COLOR)); + } else { + //If they pass a custom tint color in, we use this for everything + options.setActiveWidgetColor(color); + } + + } + private void startCropping(Activity activity, Uri uri) { UCrop.Options options = new UCrop.Options(); options.setCompressionFormat(Bitmap.CompressFormat.JPEG); + configureCropperColors(options); UCrop.of(uri, Uri.fromFile(new File(this.getTmpDir(), UUID.randomUUID().toString() + ".jpg"))) .withMaxResultSize(width, height) @@ -526,7 +556,7 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi } } } - + private void croppingResult(Activity activity, final int requestCode, final int resultCode, final Intent data) { if (mPickerPromise == null) { return;