Skip to content

KaustubhPatange/ImageLoaderView

Repository files navigation

ImageLoaderView

build Maven Central

An ImageView with cool loading effects eg: Shimmer. The library is backwards compatible till API 19.

I had to built something similar for my client, this one is the complete version of the prototype.

Why you need this?

Having an effect (shown in gif) requires multiple views to be laid out. For eg: to achieve the Shimmer effect with this library, you can wrap your ImageView inside the ShimmerFrameLayout (which it provides) & also the overlay ImageView (with circular data-usage icon), you already took 3 layout passes to draw the same thing. In places like RecyclerView where each draw calls are expensive we must optimize it.

This view solves the problem & also manage the animation states which would unnecessarily increase boilerplate if done manually.

Usage

The repository contains the sample project which is basically the above demo (gif) in action.

<com.kpstv.imageloaderview.ImageLoaderView
    android:id="@+id/imageloaderview"
    android:layout_width="..."
    android:layout_height="..." />
  • Create a shimmer load effect

<com.kpstv.imageloaderview.ImageLoaderView
   ...
   app:shimmering="true"
   app:corner_radius="10dp"
   app:overlay_drawable="@drawable/..."
   app:overlay_drawable_tint="?attr/colorControlNormal" />
  • Create overlay tinting effect

<com.kpstv.imageloaderview.ImageLoaderView
   ...
   app:overlay_tinting="true"
   app:backgroundColor="@color/..."
   app:corner_radius="10dp"
   app:overlay_drawable="@drawable/..."
   app:overlay_drawable_tint="@color/fromcolor"
   app:overlay_drawable_secondary_tint="@color/tocolor" />
  • Once your image is loaded call any of the setImage** methods with animationType property to ImageView.CIRCLE_IN to get the above shown effect, (see example here).

  • If you don't want a load effect & just directly want to set image onto the view then don't set animationType property, but make sure to call imageview.stopAllSideEffects() which will make sure to draw your image on top, (example here.)

Following are the parameters you can optionally specify when inflating this class through XML. All this attributes have their equivalent property methods (Java beans) which can be called programmatically.

Attributes Type
app:backgroundColor color Sets the background color of the view, default Color.Gray. Do not use android:background as it messes with corner radius.
app:anim_duration long Defines how long the animation should run, default 1200L.
app:corner_radius dimension Sets the corner radius of the view.
app:overlay_drawable reference, color Sets the overlay drawable display on top of the view.
app:overlay_drawable_padding dimension Sets the padding for the overlay drawable.
app:overlay_drawable_tint color Sets the tint for the overlay drawable.
app:overlay_drawable_secondary_tint color Sets the secondary tint for overlay drawable. This is basically used for overlayTintAnimation.
app:overlay_tinting_duration long Sets the duration for how long the tint animation to be played.
app:overlay_tinting bool Sets whether the view should start tinting animation immediately after laid out.
app:ripple_color color Sets the ripple when the view is clickable.
app:selectable bool Sets whether the view should receieve touch events like click.
app:shimmering bool Sets whether the view should start shimmering immediately after laid out.

Download

Library is available at MavenCentral().

implementation 'io.github.kaustubhpatange:imageloaderview:<version>'

License

Copyright 2020 Kaustubh Patange

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

An ImageView with cool loading effects eg: Shimmer

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published