Convert Figma logo to code with AI

facebookarchive logoshimmer-android

An easy, flexible way to add a shimmering effect to any view in an Android app.

5,313
698
5,313
28

Top Related Projects

9,345

An easy way to add a simple, shimmering effect to any view in an iOS 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

DEPRECATED

Android loading animations

Cute view animation collection.

Quick Overview

Shimmer for Android is an open-source library developed by Facebook that provides an easy way to add a shimmering effect to views in Android applications. This effect is commonly used to indicate a loading state, providing a visually appealing alternative to traditional progress indicators.

Pros

  • Easy to implement and integrate into existing Android projects
  • Highly customizable, allowing developers to adjust various aspects of the shimmer effect
  • Lightweight and efficient, with minimal impact on app performance
  • Well-documented and maintained by Facebook

Cons

  • Limited to Android platform, not available for iOS or web applications
  • May not be suitable for all types of loading indicators or design preferences
  • Requires additional setup and configuration compared to built-in Android progress indicators
  • No longer actively maintained by Facebook (archived repository)

Code Examples

  1. Basic implementation of Shimmer:
val shimmerFrameLayout = findViewById<ShimmerFrameLayout>(R.id.shimmer_view_container)
shimmerFrameLayout.startShimmer()
  1. Customizing Shimmer properties:
val shimmer = Shimmer.AlphaHighlightBuilder()
    .setDuration(1800)
    .setBaseAlpha(0.7f)
    .setHighlightAlpha(0.6f)
    .setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
    .setAutoStart(true)
    .build()

val shimmerFrameLayout = findViewById<ShimmerFrameLayout>(R.id.shimmer_view_container)
shimmerFrameLayout.setShimmer(shimmer)
  1. Stopping and starting Shimmer programmatically:
val shimmerFrameLayout = findViewById<ShimmerFrameLayout>(R.id.shimmer_view_container)

// Start shimmer
shimmerFrameLayout.startShimmer()

// Stop shimmer
shimmerFrameLayout.stopShimmer()

// Check if shimmer is running
val isShimmerRunning = shimmerFrameLayout.isShimmerStarted

Getting Started

  1. Add the Shimmer dependency to your app's build.gradle file:
dependencies {
    implementation 'com.facebook.shimmer:shimmer:0.5.0'
}
  1. Add a ShimmerFrameLayout to your layout XML:
<com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmer_view_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <!-- Add the views you want to shimmer here -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <!-- Your shimmer placeholder layout -->
    </LinearLayout>

</com.facebook.shimmer.ShimmerFrameLayout>
  1. Start the shimmer effect in your Activity or Fragment:
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val shimmerFrameLayout = findViewById<ShimmerFrameLayout>(R.id.shimmer_view_container)
    shimmerFrameLayout.startShimmer()
}

Competitor Comparisons

9,345

An easy way to add a simple, shimmering effect to any view in an iOS app.

Pros of Shimmer

  • Cross-platform support for iOS and web applications
  • More flexible animation options and customization
  • Easier integration with React Native projects

Cons of Shimmer

  • Less optimized for Android-specific performance
  • Fewer Android-specific features and customizations
  • May require additional setup for Android projects

Code Comparison

Shimmer (JavaScript):

<ShimmerPlaceHolder
  width={200}
  height={100}
  shimmerColors={['#ebebeb', '#c5c5c5', '#ebebeb']}
/>

shimmer-android (Java):

Shimmer shimmer = new Shimmer.AlphaHighlightBuilder()
        .setDuration(1800)
        .setBaseAlpha(0.7f)
        .setHighlightAlpha(0.6f)
        .setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
        .setAutoStart(true)
        .build();
shimmerFrameLayout.setShimmer(shimmer);

The Shimmer repository offers a more versatile solution for cross-platform development, particularly for React Native projects. It provides more animation options and easier customization. However, shimmer-android is specifically optimized for Android performance and offers more Android-specific features. The code comparison shows the difference in implementation, with Shimmer using a more declarative approach in JavaScript, while shimmer-android uses a builder pattern in Java for more granular control over the shimmer effect.

An Android Animation library which easily add itemanimator to RecyclerView items.

Pros of recyclerview-animators

  • Offers a wide variety of animation options for RecyclerView items
  • Supports custom animations for adding, removing, and moving items
  • Actively maintained with regular updates and improvements

Cons of recyclerview-animators

  • Limited to RecyclerView animations, while Shimmer can be applied to any view
  • May require more setup and configuration for complex animations
  • Potentially higher performance impact for large lists with many animations

Code Comparison

recyclerview-animators:

val animator = SlideInLeftAnimator()
animator.addDuration = 300
recyclerView.itemAnimator = animator

Shimmer:

val shimmerFrameLayout = ShimmerFrameLayout(this)
shimmerFrameLayout.startShimmer()

Summary

recyclerview-animators focuses on providing a wide range of animations specifically for RecyclerView items, offering developers more control over item transitions. Shimmer, on the other hand, provides a simpler shimmer effect that can be applied to any view, making it more versatile but less specialized. recyclerview-animators is actively maintained, while Shimmer is archived, which may impact long-term support and updates. The choice between the two depends on the specific animation needs of the project and whether the focus is on RecyclerView animations or general shimmer effects.

Render After Effects animations natively on Android and iOS, Web, and React Native

Pros of Lottie-Android

  • Supports complex animations with vector graphics, allowing for scalable and high-quality animations
  • Offers a wide range of animation types, including keyframe animations, shape morphing, and path animations
  • Integrates seamlessly with Adobe After Effects, enabling designers to create animations directly

Cons of Lottie-Android

  • Larger library size compared to Shimmer-Android, which may impact app size
  • Steeper learning curve for developers and designers unfamiliar with After Effects
  • May require more processing power for complex animations, potentially affecting performance on lower-end devices

Code Comparison

Shimmer-Android:

ShimmerFrameLayout container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.startShimmer();

Lottie-Android:

LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.setAnimation(R.raw.animation);
animationView.playAnimation();

Both libraries offer simple implementation, but Lottie-Android provides more flexibility in animation types and complexity. Shimmer-Android is focused specifically on shimmer effects, making it more lightweight and easier to use for that particular animation style. Lottie-Android, on the other hand, offers a broader range of animation possibilities at the cost of a larger library size and potentially more complex setup.

DEPRECATED

Pros of AVLoadingIndicatorView

  • Offers a wide variety of loading indicator styles (29 different types)
  • Easy to customize colors and sizes of indicators
  • Lightweight and simple to implement

Cons of AVLoadingIndicatorView

  • Limited to loading indicators only, while Shimmer-android provides a more versatile shimmer effect
  • Less actively maintained compared to Shimmer-android
  • May require more setup for complex loading scenarios

Code Comparison

AVLoadingIndicatorView:

AVLoadingIndicatorView avi = findViewById(R.id.avi);
avi.setIndicator("BallPulseIndicator");
avi.show();

Shimmer-android:

ShimmerFrameLayout container = findViewById(R.id.shimmer_view_container);
container.setDuration(1000);
container.startShimmer();

AVLoadingIndicatorView provides a simple way to implement various loading indicators, while Shimmer-android focuses on creating a shimmer effect for content placeholders. AVLoadingIndicatorView is more suitable for traditional loading screens, whereas Shimmer-android is better for creating skeleton UI effects during content loading.

Both libraries are easy to implement, but Shimmer-android offers more flexibility in terms of applying the effect to different UI elements. AVLoadingIndicatorView is more specialized for loading indicators, making it simpler to use for that specific purpose.

Android loading animations

Pros of Android-SpinKit

  • Offers a wider variety of loading animations (8 different styles with multiple variations)
  • Provides more customization options for each animation type
  • Easier to implement with a simple XML declaration or programmatic creation

Cons of Android-SpinKit

  • Larger library size due to the variety of animations
  • May require more processing power for complex animations
  • Less suitable for subtle, shimmer-like effects

Code Comparison

Android-SpinKit:

<com.github.ybq.android.spinkit.SpinKitView
    android:id="@+id/spin_kit"
    style="@style/SpinKitView.Large.Circle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" />

Shimmer-Android:

<com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmer_view_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <!-- Add the view you want to shimmer here -->
</com.facebook.shimmer.ShimmerFrameLayout>

Both libraries offer easy-to-use loading animations for Android applications. Android-SpinKit provides a wider range of animation styles and is more suitable for traditional loading indicators. Shimmer-Android, on the other hand, specializes in creating subtle shimmer effects, which are often used for content placeholders. The choice between the two depends on the specific design requirements and the type of loading animation desired in the application.

Cute view animation collection.

Pros of AndroidViewAnimations

  • Offers a wider variety of animation types, including attention, bounce, fade, flip, rotate, slide, and zoom animations
  • Provides a simple and intuitive API for chaining multiple animations together
  • Supports custom ease functions for more control over animation timing

Cons of AndroidViewAnimations

  • Less specialized than Shimmer-android, which focuses specifically on shimmer effects
  • May have a larger footprint in terms of code size due to its broader feature set
  • Potentially more complex to use for simple shimmer-like effects

Code Comparison

AndroidViewAnimations:

YoYo.with(Techniques.FadeIn)
    .duration(1000)
    .repeat(2)
    .playOn(findViewById(R.id.textView));

Shimmer-android:

Shimmer shimmer = new Shimmer.AlphaHighlightBuilder()
    .setDuration(1000)
    .setRepeatCount(2)
    .build();
shimmer.start(findViewById(R.id.shimmer_view));

Both libraries provide easy-to-use APIs for applying animations to Android views. AndroidViewAnimations offers a more diverse set of animations and greater flexibility, while Shimmer-android specializes in creating shimmer effects with a simpler, more focused API. The choice between the two depends on the specific animation requirements of your project.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Shimmer
Shimmer for Android

Shimmer is an Android library that provides an easy way to add a shimmer effect to any view in your Android app.

It is useful as an unobtrusive loading indicator, and was originally developed for Facebook Home.

Find more examples and usage instructions over at:

facebook.github.io/shimmer-android

License

BSD License

For Shimmer-android software

Copyright (c) Meta Platforms, Inc. and affiliates. All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  • Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

  • Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

  • Neither the name Meta nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.