ShimmerLayout
DEPRECATED - Memory efficient shimmering effect for Android applications by Supercharge.
Top Related Projects
An easy, flexible way to add a shimmering effect to any view in an Android app.
An Android Animation library which easily add itemanimator to RecyclerView items.
Render After Effects animations natively on Android and iOS, Web, and React Native
A library provides an easy way to show skeleton loading view like Facebook and Alipay
Quick Overview
ShimmerLayout is an Android library that provides an easy way to add a shimmering effect to any view in your Android application. This effect is commonly used to indicate a loading state, creating a subtle animation that enhances the user experience while waiting for content to load.
Pros
- Easy integration with existing Android projects
- Customizable shimmer effect (color, angle, duration, etc.)
- Lightweight and performant
- Compatible with various Android versions
Cons
- Limited to Android platform only
- May require additional setup for complex view hierarchies
- Potential performance impact on older devices if overused
- Limited documentation and examples
Code Examples
- Basic shimmer effect on a view:
val shimmerLayout = ShimmerLayout(context)
shimmerLayout.addView(yourView)
shimmerLayout.startShimmerAnimation()
- Customizing shimmer properties:
shimmerLayout.setShimmerColor(Color.GRAY)
shimmerLayout.setShimmerAngle(45)
shimmerLayout.setShimmerAnimationDuration(1500)
- Stopping the shimmer effect:
shimmerLayout.stopShimmerAnimation()
- Using ShimmerLayout in XML:
<com.supercharge.shimmerlayout.ShimmerLayout
android:id="@+id/shimmer_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Your content views here -->
</com.supercharge.shimmerlayout.ShimmerLayout>
Getting Started
- Add the dependency to your app's
build.gradle
file:
dependencies {
implementation 'com.github.team-supercharge:ShimmerLayout:2.1.0'
}
- Add the JitPack repository to your project's
build.gradle
file:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
-
Use ShimmerLayout in your layout XML or create it programmatically in your Activity or Fragment.
-
Start the shimmer animation when needed:
shimmerLayout.startShimmerAnimation()
- Stop the shimmer animation when content is loaded:
shimmerLayout.stopShimmerAnimation()
Competitor Comparisons
An easy, flexible way to add a shimmering effect to any view in an Android app.
Pros of shimmer-android
- More mature and battle-tested, being developed by Facebook
- Offers more customization options for shimmer effect
- Supports both Java and Kotlin
Cons of shimmer-android
- No longer actively maintained (archived repository)
- Slightly more complex implementation compared to ShimmerLayout
Code Comparison
ShimmerLayout:
<com.supercharge.shimmerlayout.ShimmerLayout
android:id="@+id/shimmer_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- Your layout here -->
</com.supercharge.shimmerlayout.ShimmerLayout>
shimmer-android:
<com.facebook.shimmer.ShimmerFrameLayout
android:id="@+id/shimmer_view_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:shimmer_duration="800">
<!-- Your layout here -->
</com.facebook.shimmer.ShimmerFrameLayout>
Both libraries provide a simple way to add shimmer effects to Android layouts. ShimmerLayout offers a more straightforward implementation with fewer customization options, making it easier to use for basic shimmer effects. On the other hand, shimmer-android provides more advanced features and customization options, but it's no longer actively maintained. The choice between the two depends on the specific requirements of your project and the level of customization needed for the shimmer effect.
An Android Animation library which easily add itemanimator to RecyclerView items.
Pros of recyclerview-animators
- Offers a wide variety of pre-built animations for RecyclerView items
- Supports custom animations for add, remove, and change operations
- Easy integration with existing RecyclerView implementations
Cons of recyclerview-animators
- Limited to RecyclerView animations, not applicable to other UI elements
- May require additional performance optimization for complex animations
- Less suitable for creating shimmer effects or loading placeholders
Code Comparison
ShimmerLayout:
val shimmerLayout = ShimmerLayout(context)
shimmerLayout.startShimmerAnimation()
recyclerview-animators:
val animator = SlideInLeftAnimator()
recyclerView.itemAnimator = animator
Summary
ShimmerLayout focuses on creating shimmer effects for loading placeholders, while recyclerview-animators provides a wide range of animations for RecyclerView items. ShimmerLayout is more versatile for general UI elements, whereas recyclerview-animators is specifically tailored for RecyclerView animations. The choice between the two depends on the specific animation requirements of your project.
Render After Effects animations natively on Android and iOS, Web, and React Native
Pros of Lottie-Android
- Supports complex animations with vector graphics
- Allows for easy integration of Adobe After Effects animations
- Provides a wide range of customization options
Cons of Lottie-Android
- Larger library size compared to ShimmerLayout
- Steeper learning curve for creating custom animations
- May have higher performance overhead for simple effects
Code Comparison
ShimmerLayout:
<io.supercharge.shimmerlayout.ShimmerLayout
android:id="@+id/shimmer_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- Your layout here -->
</io.supercharge.shimmerlayout.ShimmerLayout>
Lottie-Android:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_rawRes="@raw/animation"
app:lottie_autoPlay="true"
app:lottie_loop="true"/>
ShimmerLayout is more focused on creating shimmer effects for loading placeholders, while Lottie-Android offers a broader range of animation capabilities. ShimmerLayout is simpler to implement for basic shimmer effects, whereas Lottie-Android provides more flexibility for complex animations but requires more setup and resources.
A library provides an easy way to show skeleton loading view like Facebook and Alipay
Pros of Skeleton
- More comprehensive skeleton loading options, including RecyclerView support
- Easier to implement complex layouts with multiple shimmer elements
- Better customization options for shimmer effect appearance
Cons of Skeleton
- Slightly more complex setup process
- May have a higher performance overhead for simpler layouts
- Less frequently updated compared to ShimmerLayout
Code Comparison
ShimmerLayout:
<io.supercharge.shimmerlayout.ShimmerLayout
android:id="@+id/shimmer_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Your layout here -->
</io.supercharge.shimmerlayout.ShimmerLayout>
Skeleton:
<com.ethanhua.skeleton.SkeletonLayout
android:id="@+id/skeletonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:shimmer_color="#a2878787"
app:shimmer_duration="1000"
app:shimmer_angle="20">
<!-- Your layout here -->
</com.ethanhua.skeleton.SkeletonLayout>
Both libraries offer shimmer effects for loading states, but Skeleton provides more advanced features and customization options. ShimmerLayout is simpler to implement for basic use cases, while Skeleton excels in complex layouts and RecyclerView integration. Choose based on your project's specific requirements and complexity.
Pros of ShimmerRecyclerView
- Specifically designed for RecyclerView, making it easier to implement shimmering effects in list-based layouts
- Provides built-in support for different view types within the RecyclerView
- Offers more customization options for shimmer appearance, such as shimmer color and duration
Cons of ShimmerRecyclerView
- Limited to RecyclerView implementations, less flexible for other layout types
- May require more setup and configuration compared to the simpler ShimmerLayout
- Less actively maintained, with fewer recent updates and contributions
Code Comparison
ShimmerRecyclerView:
ShimmerRecyclerView shimmerRecycler = (ShimmerRecyclerView) findViewById(R.id.shimmer_recycler_view);
shimmerRecycler.showShimmerAdapter();
ShimmerLayout:
ShimmerLayout shimmerLayout = findViewById(R.id.shimmer_layout);
shimmerLayout.startShimmerAnimation();
Both libraries provide easy-to-use APIs for implementing shimmer effects, but ShimmerRecyclerView is more specialized for RecyclerView implementations, while ShimmerLayout offers a more general-purpose solution for various layout types. ShimmerLayout's simpler API may be preferable for basic use cases, while ShimmerRecyclerView provides more advanced features specific to RecyclerView scenarios.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
DEPRECATED - ShimmerLayout
Attention: This tool is now deprecated. Please switch to Shimmer for Android or any other shimmer effect solution.
ShimmerLayout
can be used to add shimmer effect (like the one used at Facebook or at LinkedIn) to your Android application. Beside memory efficiency even animating a big layout, you can customize the behaviour and look of the animation. Check out the wiki for attributes!
Download and usage
Get the latest artifact via gradle
implementation 'io.supercharge:shimmerlayout:2.1.0'
Create the layout on which you want to apply the effect and add as a child of a ShimmerLayout
<io.supercharge.shimmerlayout.ShimmerLayout
android:id="@+id/shimmer_text"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="50dp"
android:paddingLeft="30dp"
android:paddingRight="30dp"
app:shimmer_animation_duration="1200">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="ShimmerLayout"
android:textColor="@color/shimmer_background_color"
android:textSize="26sp"/>
</io.supercharge.shimmerlayout.ShimmerLayout>
Last, but not least you have to start it from your Java code
ShimmerLayout shimmerText = (ShimmerLayout) findViewById(R.id.shimmer_text);
shimmerText.startShimmerAnimation();
Further reading
- The development of ShimmerLayout - In this article you can read why we created this library and the technologies we used.
License
ShimmerLayout
is opensource, contribution and feedback are welcome!
Copyright 2017 Supercharge
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
http://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.
Author
Top Related Projects
An easy, flexible way to add a shimmering effect to any view in an Android app.
An Android Animation library which easily add itemanimator to RecyclerView items.
Render After Effects animations natively on Android and iOS, Web, and React Native
A library provides an easy way to show skeleton loading view like Facebook and Alipay
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot