JarCasting
JarCasting JarCasting

imageloaderview

An ImageView with cool loading effects eg: Shimmer

License

License
GroupId

GroupId

io.github.kaustubhpatange
ArtifactId

ArtifactId

imageloaderview
Last Version

Last Version

0.7-beta04
Release Date

Release Date
Type

Type

aar
Description

Description

imageloaderview
An ImageView with cool loading effects eg: Shimmer
Project URL

Project URL

https://github.com/KaustubhPatange/ImageLoaderView
Source Code Management

Source Code Management

https://github.com/KaustubhPatange/ImageLoaderView/tree/master

Download imageloaderview

Filename Size
imageloaderview-0.7-beta04.pom
imageloaderview-0.7-beta04-sources.jar 5 KB
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/io.github.kaustubhpatange/imageloaderview/ -->
<dependency>
    <groupId>io.github.kaustubhpatange</groupId>
    <artifactId>imageloaderview</artifactId>
    <version>0.7-beta04</version>
    <type>aar</type>
</dependency>
// https://jarcasting.com/artifacts/io.github.kaustubhpatange/imageloaderview/
implementation 'io.github.kaustubhpatange:imageloaderview:0.7-beta04'
// https://jarcasting.com/artifacts/io.github.kaustubhpatange/imageloaderview/
implementation ("io.github.kaustubhpatange:imageloaderview:0.7-beta04")
'io.github.kaustubhpatange:imageloaderview:aar:0.7-beta04'
<dependency org="io.github.kaustubhpatange" name="imageloaderview" rev="0.7-beta04">
  <artifact name="imageloaderview" type="aar" />
</dependency>
@Grapes(
@Grab(group='io.github.kaustubhpatange', module='imageloaderview', version='0.7-beta04')
)
libraryDependencies += "io.github.kaustubhpatange" % "imageloaderview" % "0.7-beta04"
[io.github.kaustubhpatange/imageloaderview "0.7-beta04"]

Dependencies

runtime (4)

Group / Artifact Type Version
org.jetbrains.kotlin : kotlin-stdlib jar 1.4.30
androidx.core » core-ktx jar 1.3.2
androidx.appcompat » appcompat jar 1.2.0
com.facebook.shimmer : shimmer jar 0.5.0

Project Modules

There are no modules declared in this project.

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.

Versions

Version
0.7-beta04
0.7-beta03
0.7-beta02
0.7-beta01
0.6
0.5
0.4
0.3
0.0.1