Home

StyleImageView Wiki

StyleImageView can set the style of ImageView/View background/Drawable/Bitmap and also brightness & contrast. This library now supports 10 different styles, you can check them out below. You can enable animation, and choose to set Interpolators and Listeners. You can acquire the Bitmap of ImageView/View/Drawable after style is set.

If you only need to operate ImageViews, you can use the StyleImageView class. You can specify attributes from layout file. If you are already using custom ImageViews, or you want to operate on View's background, or any Drawable or Bitmap, you can use the Styler class.

Note that this library uses ColorFilter to achieve effects. If you are using ColorFilter in your project, this may cause conflicts.

Try Sample

You can go to chengdazhi.com/styleimageview to download sample APK file or scan this QR code:

Feature

StyleImageView supports 10 styles as follow. Note that you can set brightness and contrast on top of them. Example of Saturation mode is not listed, since this mode needs a saturation input.

Modes	Sea Shore	Boat and Houses
Original
Grey Scale
Invert
RGB to BGR
Sepia
Black & White
Bright
Vintage Pinhole
Kodachrome
Technicolor

Some combinations I recommend:

• Invert + (150 brightness) + (2.0F contrast)
• Sepia + (-100 brightness) + (2.0F contrast)
• Kodachrome + (-75 brightness) + (1.6F contrast)

Try out the sample to find out more!

Usage

Key Properties

• Mode: The mode you want to set, including the following options:

  1. Saturation
  2. Grey Scale
  3. Invert
  4. RGB To BGR
  5. Sepia
  6. Black & White
  7. Bright
  8. Vintage Pinhole
  9. Kodachrome
  10. Technicolor
  11. None(Default value)

• Brightness: int value, range [-255,255], no effect when set to 0, 0 by default.

• Contrast: float value, range [0, +∞), no effect when set to 1.0, 1.0 by default.

• Saturation:float value, range [0, +∞), no effect when set to 1.0, 1.0 by default.

• EnableAnimation: when set to false, animation duration is automatically set to 0. Always specify duration when turning animation on. False by default.

• AnimationDuration: 0 by default.

Note that Saturation is a mode, so you can't set saturation on other modes. When setSaturation() is called, mode will be automatically set to SATURATION. Simply setting the mode to SATURATION but not setting saturation value will have no effect. If you specify saturation in xml but mode is not saturation, things will break.

Please refer to source code for details.

StyleImageView Usage

xml attributes

• style: enum, none by default
• brightness：int, 0 by default
• contrast：float, 1.0 by default
• saturation：float, 1.0 by default
• enable_animation：boolean, false by defualt
• animation_duration：int, 0 by default, cast to long in Java code.

Note that if you set the animation_duration but didn't set enable_animation to be true, things will break.

Java usage

//sample usage
StyleImageView styleImageView = (StyleImageView) this.findViewById(R.id.image);
styleImageView.setMode(Styler.Mode.SEPIA)
        .setBrightness(50)
        .setContrast(0.8)
        .enableAnimation(500L, new LinearInterpolator()) //first param is animatonDuration, interpolator is optional
        .setAnimationLisnter(listener) //sets animation listener, type Styler.AnimationListener
        .updateStyle(); //you must call updateStyle() to update UI

/* getters */
styleImageView.getMode();
styleImageView.getBrightess();
styleImageView.getContrast();
styleImageView.getSaturation();
styleImageView.isAnimationEnabled();
styleImageView.getAnimationDuration();

//get the current bitmap. You may specify the width and height, use the drawable's or view's size when not specified
styleImageView.getBitmap([int width, int height]); 

/* setters */
//If given mode is not SATURATION, but saturation is previously set, saturation will be reset to 1.0
styleImageView.setMode(int Style.Mode.*);
styleImageView.setBrightness(int brightness);
styleImageView.setContrast(float contrast);

//Calling this method automatically set mode to SATURATION
styleImageView.setSaturation(float saturation);

//you must pass duration. You may choose to pass an interpolator.
//You need to call this when setting a new duration.
styleImageView.enableAnimation(long duration[, Interpolator interpolator]); 

//turn off animation. Will automatically set duration to 0 and interpolator to null.
styleImageView.disableAnimation(); 

styleImageView.updateStyle(); //update UI

//clears all effects. Will set mode to NONE and saturation to 1.0. Won't reset other properties like brightness.
styleImageView.clearStyle();

//sets a listener for animations. If animation is not enabled, then listener's methods will not be called.
//listener will receive callbacks when animation starts, updates or ends.
//If listener is previously set, calling this will clear the last one.
styleImageView.setAnimationListener(Styler.AnimationListener listener);

//removes animation listener, returns the listener removed.
styleImageView.removeAnimationListener();

Styler使用方式

Styler can operate on ImageViews, Views, Drawables and Bitmaps. For Bitmaps it only provides static, instant methods. For others it eventually operates on Drawables. Each Styler operates on one View or Drawable, you can't reset drawable source once it's constructed.

Sample

ImageView imageView = findViewById(R.id.image);
Styler styler = new Styler.Builder(imageView, Styler.Mode.TECHNICOLOR)
        .enableAnimation(1000L)
        .build();

styler.updateUI(); //update the image to technicolor

//set the mode and brightness then update
styler.setMode(Styler.Mode.BLACK_AND_WHITE).setBrightness(100).updateUI(); 

Initialization

Styler doesn't have a public constructor. You must use Styler.Builder class to build a Styler.

//general sample
ImageView imageView = (ImageView) this.findViewById(R.id.image);
Styler styler = new Styler.Builder(imageView, Styler.Mode.SEPIA)
        .enableAnimation(500L)
        .setContrast(1.5F)
        .build();

//Styler.Builder contructor, you can pass in ImageViews/Views/Drawables
//Please refer to source code if you want to know the specifics of how Styler operates.
//note that you can't set View|ImageView|Drawable and mode again later
Styler.Builder builder = new Styler.Builder(View|ImageView|Drawable, mode);

//setters
//turn on animation. Must pass duration, interpolator is optional.
builder.enableAnimation(long animationDuration[, Interpolator interpolator]);

//turn off animation. Automatically reset duration to 0 and interpolator to null.
builder.disableAnimation();

builder.setBrightness(int brightness);
builder.setContrast(float contrast);

//automatically sets the mode to SATURATION
builder.setSaturation(float saturation);

//sets a listener for animations. If animation is not enabled, then listener's methods will not be called.
//listener will receive callbacks when animation starts, updates or ends.
//If listener is previously set, calling this will clear the last one.
builder.setAnimationListener(Styler.AnimationListener listener);

//constructs Styler object
builder.build();

Styler methods

Styler contains all the public methods of StyleImageView listed above, another getter, and couple static methods to operate on Bitmaps.

//returns the Drawable the Styler is operating on
styler.getDrawable();

//static methods to operate on bitmaps
//brightness, contrast, saturation are optional, refer to default values stated above if you don't want to set them all.
Styler.addStyleToBitmap(Context context, Bitmap bitmap, int mode[, int brightness, float contrast, float saturation]);

Styler.AnimationListener

//three callbacks
onAnimationStart();//called when animation starts

//called when animation updates. TimeFraction refers to time progress, and progress refers to actual animation progress.
//When interpolator is not set or is LinearInterpolator, these two params are always the same.
//Progress is calculated by Interpolator based on timeFraction
onAnimationUpdate(float timeFraction, float progress);

onAnimationEnd();//called when animation ends