如何降低Shimmer FrameLayout闪烁效果速度及使用该库属性

Hey there! I’ve worked with Shimmer FrameLayout quite a bit, so let’s fix that overly snappy animation and break down the handy properties you can use to tweak the effect just right.

Slow Down the Shimmer Animation #

The default shimmer speed can feel way too fast, but adjusting it is super straightforward—you just need to tweak the animation’s duration.

1. In XML Layout #

Add the app:shimmer_duration attribute to your ShimmerFrameLayout tag, setting it to a higher value (measured in milliseconds). The default is usually around 1000ms, so bumping it to 2000ms will make the animation feel much smoother:

<com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmer_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:shimmer_duration="2000" <!-- Higher value = slower animation -->
    app:shimmer_auto_start="true">

    <!-- Your content to apply shimmer to goes here -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Loading content..." />

</com.facebook.shimmer.ShimmerFrameLayout>

2. Programmatically (Kotlin/Java) #

If you need to adjust the speed dynamically at runtime, use the setDuration() method via the Shimmer builder:

val shimmerLayout = findViewById<ShimmerFrameLayout>(R.id.shimmer_layout)
val customShimmer = Shimmer.AlphaHighlightBuilder()
    .setDuration(2500) // 2.5 seconds per full animation cycle
    .build()
shimmerLayout.setShimmer(customShimmer)
shimmerLayout.startShimmer()

ShimmerFrameLayout shimmerLayout = findViewById(R.id.shimmer_layout);
Shimmer customShimmer = new Shimmer.AlphaHighlightBuilder()
    .setDuration(2500)
    .build();
shimmerLayout.setShimmer(customShimmer);
shimmerLayout.startShimmer();

Key Shimmer FrameLayout Properties #

Here are the most useful properties to customize your shimmer effect:

• shimmer_duration: Controls the length of one full animation cycle (in ms). As we covered, higher values slow down the shimmer.
• shimmer_base_alpha: The opacity of the "unhighlighted" part of your content (default is 0.2). Raise this if you want the base content to be more visible during the animation.
• shimmer_highlight_alpha: The opacity of the shimmer’s highlight (default is 1.0). Lower this for a more subtle, muted highlight.
• shimmer_direction: Sets the direction the shimmer moves in. Options include left_to_right, right_to_left, top_to_bottom, bottom_to_top.
• shimmer_auto_start: Boolean that determines if the animation starts automatically when the view attaches to the screen (default is false).
• shimmer_repeat_count: How many times the animation repeats. Use ShimmerFrameLayout.INFINITE for endless looping (the default behavior).
• shimmer_shape: Defines the shape of the shimmer gradient. Choose linear (default) for a straight horizontal/vertical highlight, or radial for a circular, spreading glow effect.

All these properties can be set either directly in XML (using the app: namespace) or programmatically via the Shimmer.Builder class, just like we did with the duration.

内容的提问来源于stack exchange，提问作者Brinda Rathod