Shimmer android facebook example

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 that was originally developed for Facebook Home.

Shimmer for Android is implemented as a layout, which means that you can simply nest any view inside a ShimmerFrameLayout tag, and call to start the animation from your code. That’s all that is required. The layout will use the values you specify either on the tag (using custom attributes) or programmatically in your code, and generate an animation on the fly. See the API reference for further details.

Here’s an example of a composite view, consisting of an image and some text below it, that shows the effect in action:

To include Shimmer in your project, add the following dependency:

Note that you cannot use the custom attributes on the tag if you use the Jar file. You can instead download the AAR file and reference that locally in your project.

You can use the included Gradle wrapper to build the Shimmer library and sample application locally as well. Check out the code at github.com/facebook/shimmer-android.

The following snippet shows how you can use ShimmerFrameLayout

And thats it! If you specify `auto-start` to be false, then you can start the animation in code:

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

Clip to Children Whether to clip the shimmering effect to the children, or to opaquely draw the shimmer on top of the children. Use this if your overall layout contains transparency. Colored Whether you want the shimmer to affect just the alpha or draw colors on-top of the children. Base Color If colored is specified, the base color of the content. Highlight Color If colored is specified, the shimmer’s highlight color. Base Alpha If colored is not specified, the alpha used to render the base view i.e. the unhighlighted view over which the highlight is drawn. Highlight Alpha If colored is not specified, the alpha of the shimmer highlight. Auto Start Whether to automatically start the animation when the view is shown, or not. 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. Direction The travel direction of the shimmer highlight: left to right, top to bottom, right to left or bottom to top. Dropoff Controls the size of the fading edge of the highlight. Intensity Controls the brightness of the highlight at the center Shape Shape of the highlight mask, either with a linear or a circular gradient. 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 Width, Height ratio Size of the highlight mask, relative to the layout it is applied to.

Join the discussion over at our Facebook Group to report bugs, request features or show off your project.

Open an issue on Github if you are using this component in production and would like to be added to this list.

Slingshot
Slingshot uses Shimmer for Android to indicate loading status.

Home
Facebook Home uses the Shimmer effect to indicate status while loading the news feed, notifications and wallpaper settings.

For Shimmer software

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.

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.

Источник

how can i change the colour of the shimmer light #17

Comments

kency2015 commented Jun 14, 2016

i want to create a view which has a bright-white light over the whole view , but when i used this library , the color of the shimmer light always depends on the color of the view’s background ,for example , when a view’background is yellow ,the shimmer light is yellow too , but what i want is that the colour of the shimmer light is brght white. how can i make this?

The text was updated successfully, but these errors were encountered:

ninovanhooff commented Jul 4, 2016

I would also like to set the color/alpha of the shimmer. To arrive at less than pure white, I currently have reduce the alpha of the whole view, which is not efficient

zhangyun136731 commented Oct 8, 2016

I also have this problem

stevenchans commented May 24, 2017

xiphirx commented Feb 27, 2018

mecoFarid commented Mar 8, 2019

This issue should be reopened, I guess, or I’m missing out something. Trying to have a shimmer highlight with a different color rather than highlight with alpha.

Setting both app:shimmer_colored=»true» and app:shimmer_highlight_color=»@color/colorAccent» removes shimmer effect from children (shimmer applied to parent only).

nishanthvasu commented Jan 17, 2020

Was this issue resolved ? If so please say me how it got fixed ?

yanayhollander commented May 5, 2020

using app:shimmer_highlight_alpha=»0″ resolved the issue for me.

dinopriyano commented Jul 23, 2021 •

using app:shimmer_highlight_alpha=»0″ resolved the issue for me.

Источник

RecyclerView Loading With Facebook Shimmer Effect Android Example

As an Android user and developer, I am always attracted to great apps with nice and meaningful animations. To me, such apps not only deliver great features to make their user life easier but also their experience to the next level from the team behind them. I often really like those animation and also try to make those great features in my own application. One of those apps is Facebook which offers a great Shimmer effect.

Shimmer effect was created by Facebook to show loading status instead of showing ProgressBar. In this article, I’m going to take you through my journey of replacing the ProgressBar with Shimmer effect.

App Intro

To replicate the Facebook Shimmer animation, I built a simple app where we’re gonna execute movies fetching network request. We’re gonna hit an URL and download Json data and show in a GridView. While application fetching movies instead of showing ProgressBar, we’re gonna show the Shimmering effect and in successful or in error case stop the effect.

Gradle Stuff

Facebook Shimmer effect requires us to add some more stuff to our application modules build.gradle file. We start by adding the following dependencies right after the android section:

I’m not going to try to explain the inner working of an application in this post, but instead, show you a simple way of how to use Facebook Shimmer. So, enough of this intro let’s start the example by seeing the activity_main.xml file.

Below is an explanation of the above code.

We need to use the ShimmerFrameLayout class which extends from Android FrameLayout , and we can nest our own layout controls inside the layout to achieve the shimmer effect. The duration property is for to set the interval of the animation in milliseconds.
In this LinearLayout , we need to include blank layouts so that the when our application executing the network request the ShimmerFrameLayout performs shimmering on these blank layouts. The blank layouts need to be single_item_view of the list.
The RecyclerView is responsible for showing the list of movies when the application successfully download the json content from the TheMovieDb

Single Movie ItemView

Every single entry in a list has a movie image and two texts line. The following shows the single_item_view.xml file.

The only thing I need to point out in the above xml is background color in FrameLayout and in TextView . You see if we did not set the background color then we’re not able to see the shimmering effect because of the View default background color is white. For the above application, the background color is #dddddd . By adding the background color the single movie view looks like this:

MainActivity

Now the only thing we require is to do, to execute the network request. While the request is being executed start the shimmer effect and when the response came, stop the shimmering effect. Below is the MainActivity class.

In order to start the shimmering effect, you need to call startShimmerAnimation method. You see we’re starting the shimmering animation before executing the network request and stop the effect when the response came. In order to stop the effect call the stopShimmerAnimation method. To download the Json movies content I have added Retrofit Client.

The complete source code of the above application is on GitHub.

Alright, guy’s, this was my demonstration of how we can use Facebook Shimmer effect in our Android application. If you ❤️ like please share it with the Android Community and for suggestions and reviews do comment below.

Thank you for being here and keep reading…

Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, we will receive an affiliate commission. Regardless, we only recommend products or services we use personally and believe will add value to our readers.

Источник

Shimmer android facebook example

Copy raw contents

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:

For shimmer-android software

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 Facebook nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

Источник

Shimmer android facebook example

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:

For shimmer-android software

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.

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

About

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

Источник