Convert Figma logo to code with AI

facebookarchive logoShimmer

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

9,350
1,113
9,350
21

Top Related Projects

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

A curated list of awesome Android UI/UX libraries

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

DEPRECATED

Android loading animations

Bind Android views and callbacks to fields and methods.

Quick Overview

Shimmer 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, providing a subtle animation that enhances the user experience while waiting for content to load.

Pros

  • Easy to implement and integrate into existing Android projects
  • Highly customizable, allowing developers to adjust various parameters of the shimmer effect
  • Lightweight and efficient, with minimal impact on app performance
  • Enhances user experience by providing visual feedback during loading states

Cons

  • Limited to Android platform, not available for iOS or web applications
  • Requires additional setup and configuration for complex layouts
  • May not be suitable for all types of applications or design styles
  • The project is archived and no longer actively maintained by Facebook

Code Examples

  1. Basic implementation of Shimmer:
ShimmerFrameLayout container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.startShimmer();

This code initializes a ShimmerFrameLayout and starts the shimmer animation.

  1. Customizing shimmer properties:
Shimmer shimmer = new Shimmer.AlphaHighlightBuilder()
        .setDuration(1800)
        .setBaseAlpha(0.7f)
        .setHighlightAlpha(0.6f)
        .setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
        .setAutoStart(true)
        .build();

ShimmerFrameLayout container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.setShimmer(shimmer);

This example demonstrates how to create a custom Shimmer object with specific properties and apply it to a ShimmerFrameLayout.

  1. Stopping and restarting the shimmer effect:
ShimmerFrameLayout container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.stopShimmer();
// ... perform some operations
container.startShimmer();

This code shows how to stop and restart the shimmer animation, which can be useful when content has finished loading.

Getting Started

To use Shimmer in your Android project, follow these steps:

  1. Add the 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:
ShimmerFrameLayout container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.startShimmer();

Competitor Comparisons

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

Pros of shimmer-android

  • Specifically designed for Android, offering better integration with Android UI components
  • More recent updates and active maintenance compared to Shimmer
  • Includes additional features like shape customization and start/stop animations

Cons of shimmer-android

  • Limited to Android platform, while Shimmer supports iOS
  • Slightly more complex implementation due to additional features
  • May require more setup and configuration compared to the simpler Shimmer library

Code Comparison

Shimmer (iOS):

FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:self.view.bounds];
shimmeringView.shimmering = YES;
[self.view addSubview:shimmeringView];

shimmer-android:

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

Both libraries aim to create a shimmering effect, but shimmer-android offers more customization options and is tailored for Android development. Shimmer provides a simpler implementation for iOS, while shimmer-android requires more setup but offers greater flexibility for Android applications.

A curated list of awesome Android UI/UX libraries

Pros of awesome-android-ui

  • Comprehensive collection of UI libraries and components
  • Regularly updated with new contributions from the community
  • Covers a wide range of UI elements and design patterns

Cons of awesome-android-ui

  • Not a standalone library, requires integration of multiple dependencies
  • May lead to inconsistencies in design and implementation across projects
  • Potential for outdated or unmaintained libraries in the collection

Code comparison

Shimmer example:

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

awesome-android-ui doesn't provide direct code examples, as it's a curated list of libraries. However, it might include links to repositories with code like:

MaterialCalendarView calendarView = (MaterialCalendarView) findViewById(R.id.calendarView);
calendarView.setSelectedDate(Calendar.getInstance());

Summary

Shimmer is a specific animation library for creating shimmering effects, while awesome-android-ui is a curated list of various UI libraries and components. Shimmer offers a focused solution for a particular visual effect, whereas awesome-android-ui provides a broader range of UI options but requires more effort to integrate and maintain consistency across a project.

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

Pros of Lottie-Android

  • Supports complex animations with vector graphics and keyframes
  • Allows for easy integration of Adobe After Effects animations
  • Provides a wide range of customization options and dynamic properties

Cons of Lottie-Android

  • Larger file size and potentially higher memory usage
  • Steeper learning curve for creating and implementing animations
  • May require additional design tools and expertise

Code Comparison

Shimmer implementation:

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

Lottie-Android implementation:

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

Summary

Shimmer focuses on creating simple, lightweight shimmer effects for loading states, while Lottie-Android offers more complex and versatile animations. Shimmer is easier to implement and has a smaller footprint, but Lottie-Android provides greater flexibility and support for intricate animations. The choice between the two depends on the specific animation requirements and complexity of the project.

DEPRECATED

Pros of AVLoadingIndicatorView

  • Offers a wide variety of loading indicator styles (over 30)
  • Easy to customize colors and sizes
  • Lightweight and simple to implement

Cons of AVLoadingIndicatorView

  • Limited to loading indicators only, not suitable for content placeholder animations
  • May require more setup for complex animations
  • Less flexible for creating custom shimmer effects

Code Comparison

AVLoadingIndicatorView:

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

Shimmer:

Shimmer shimmer = new Shimmer.AlphaHighlightBuilder()
    .setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
    .setDuration(1500)
    .build();
ShimmerFrameLayout container = findViewById(R.id.shimmer_view_container);
container.setShimmer(shimmer);

AVLoadingIndicatorView is more straightforward for implementing predefined loading indicators, while Shimmer offers more flexibility for creating custom shimmer effects on content placeholders.

Android loading animations

Pros of Android-SpinKit

  • Offers a wider variety of loading animations (12 different styles)
  • Easier to customize and create new loading animations
  • More actively maintained and updated

Cons of Android-SpinKit

  • Limited to loading animations, while Shimmer can be used for other effects
  • May have a slightly higher performance impact due to more complex animations
  • Less integration with other Facebook libraries

Code Comparison

Android-SpinKit:

SpinKitView spinKitView = findViewById(R.id.spin_kit);
Sprite doubleBounce = new DoubleBounce();
spinKitView.setIndeterminateDrawable(doubleBounce);

Shimmer:

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

Both libraries provide simple ways to implement their respective effects, but Android-SpinKit offers more variety in animation styles. Shimmer's implementation is more focused on the shimmer effect and integrates well with other Facebook libraries. Android-SpinKit is better suited for projects requiring diverse loading animations, while Shimmer excels in creating subtle, shimmering effects for placeholders or highlighting elements.

Bind Android views and callbacks to fields and methods.

Pros of Butterknife

  • Simplifies view binding in Android applications, reducing boilerplate code
  • Supports binding of resources, including strings and drawables
  • Offers annotation-based approach for easy integration

Cons of Butterknife

  • Requires additional build-time processing, which may increase compilation time
  • Limited to view binding and doesn't offer animation capabilities like Shimmer
  • No longer actively maintained, with official recommendation to migrate to View Binding

Code Comparison

Butterknife:

class ExampleActivity extends Activity {
  @BindView(R.id.title) TextView title;
  @BindView(R.id.subtitle) TextView subtitle;

  @Override public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.simple_activity);
    ButterKnife.bind(this);
  }
}

Shimmer:

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

While Butterknife focuses on view binding and resource injection, Shimmer provides a specialized animation effect for loading states. Butterknife offers a more comprehensive solution for reducing boilerplate in Android development, but Shimmer excels in creating visually appealing loading animations with minimal code.

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 is an easy way to add a shimmering effect to any view in your app. It's useful as an unobtrusive loading indicator.

Shimmer was originally developed to show loading status in Paper.

Shimmer

Usage

To use Shimmer, create a FBShimmeringView or FBShimmeringLayer and add your content. To start shimmering, set the shimmering property to YES.

An example of making a label shimmer:

FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:shimmeringView];

UILabel *loadingLabel = [[UILabel alloc] initWithFrame:shimmeringView.bounds];
loadingLabel.textAlignment = NSTextAlignmentCenter;
loadingLabel.text = NSLocalizedString(@"Shimmer", nil);
shimmeringView.contentView = loadingLabel;

// Start shimmering.
shimmeringView.shimmering = YES;

There's also an example project. In the example, you can swipe horizontally and vertically to try various shimmering parameters, or tap to start or stop shimmering. (To build the example locally, you'll need to open FBShimmering.xcworkpace rather than the .xcodeproj.)

Installation

There are two options:

  1. Shimmer is available as Shimmer in Cocoapods.
  2. Manually add the files into your Xcode project. Slightly simpler, but updates are also manual.

Shimmer requires iOS 6 or later.

How it works

Shimmer uses the -[CALayer mask] property to enable shimmering, similar to what's described in John Harper's 2009 WWDC talk (unfortunately no longer online). Shimmer uses CoreAnimation's timing features to smoothly transition "on-beat" when starting and stopping the shimmer.

Other Platforms

We have a version of Shimmer for Android, too! It's also available on GitHub.

Contributing

See the CONTRIBUTING file for how to help out.

License

Shimmer is BSD-licensed.