Facebook's Shimmer Library



  • Intoduction

    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. You can easily implement Facebook Shimmer to let the users know your app is performing some tasks, could be loading data or any other actions that might take a while to complet so there the view should be interactive.
    

    Implementation

    You can easily add the shimmer jar file to your app (Java) from this link or in this case for Android you can add the dependency:

    // Gradle dependency on Shimmer for Android

    dependencies {
      compile 'com.facebook.shimmer:shimmer:[email protected]'
    }
    

    After the library has been imported you can go ahead and add the custom layout to your views. By wrapping the view with ShimmerFrameLayout, its as easy as that to make any view be accessible by Shimmer. Example below..

    <com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmer_view_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

             <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view_data"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"/>
    

    </com.facebook.shimmer.ShimmerFrameLayout>

    Here we wrap our RecyclerView in the ShimmerFrameLayout tag and that is all. We can then go ahead and set the shimmer loader proerties by enabling and dissabling it after our data is fetched and views populated.

    Fetching data................>>>>

    In your code, you can then start the animation:

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

    Data Fetched.......>

    container.stopShimmerAnimation();

    While the loader is active the view looks like the example image below:

    http://facebook.github.io/shimmer-android/images/shimmer-small.gif

    Other Attributes

    You can control the look and pace of the effect using a number of custom attributes on the ShimmerFrameLayout tag. Alternatively, you can set these values on the layout object itself. For a comprehensive list, check out the API reference

    Auto Start
    Whether to automatically start the animation when the view is shown, or not.
    Base Alpha
    Alpha used to render the base view i.e. the unhighlighted view over which the highlight is drawn.
    Duration
    Time it takes for the highlight to move from one end of the layout to the other.
    Repeat Count
    Number of times of the current animation will repeat.
    Repeat Delay
    Delay after which the current animation will repeat.
    Repeat Mode
    What the animation should do after reaching the end, either restart from the beginning or reverse back towards it.
    Mask Shape
    Shape of the highlight mask, either with a linear or a circular gradient.
    Angle
    Angle at which the highlight mask is animated, from left-to-right, top-to-bottom etc.
    Dropoff
    Controls the size of the fading edge of the highlight.
    Intensity
    Controls the brightness of the highlight at the center
    Tilt
    Angle at which the highlight is tilted, measured in degrees
    Fixed Width, Height
    Fixed sized highlight mask, if set, overrides the relative size value
    Relative Width, Height
    Size of the highlight mask, relative to the layout it is applied to.

    For exmple project using Shimmer please refere here
    There are times when loading dialog isnt just right design wise and on this occurence shimmer might be perfect for your app design. Just like every other loader you can implement it when you are fetching apps from the Api and populating your views while lookign good at the same time. More infos can be find here
    Nguồn: Viblo



Có vẻ như bạn đã mất kết nối tới LaptrinhX, vui lòng đợi một lúc để chúng tôi thử kết nối lại.