ImageLoaderView
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 withanimationTypeproperty toImageView.CIRCLE_INto 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
animationTypeproperty, but make sure to callimageview.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.