Skip to content

Home

Jump to bottom
Dazhi Cheng edited this page Nov 8, 2017 · 12 revisions

gif_sample

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:

qr

In the sample project, the style_image_view_test module shows how to use StyleImageViews. The styler_test module shows how to use Stylers to change ImageViews. It's similar to the way Stylers work with Views and Drawables. If you want to operate on Bitmaps, please refer to the Usage part below.

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 sea_original boat_original
Grey Scale sea_grey_scale boat_grey_scale
Invert sea_invert boat_invert
RGB to BGR sea_rgb_to_bgr boat_rgb_to_bgr
Sepia sea_sepia boat_sepia
Black & White sea_black_and_white boat_black_and_white
Bright sea_bright boat_bright
Vintage Pinhole sea_vintage_pinhole boat_vintage_pinhole
Kodachrome sea_kodachrome boat_kodachrome
Technicolor sea_technicolor boat_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, you will get an IllegalStateException.

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, you will get an IllegalStateException.

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();
styleImageView.getAnimationListener();

//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 Usage

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();

Methods of Styler.Builder

//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.
//if mode is not SATURATION, and saturation != 1.0, because saturation is an individual mode, you will get an IllegalArgumentException.
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
Clone this wiki locally