skydoves / AndroidVeil

:performing_arts: An easy and flexible way to implement loading skeletons and shimmering effects on layouts for Android.
Apache License 2.0
1.49k stars 103 forks source link
android android-library android-ui androidveil recyclerview shimmer skeleton skydoves

AndroidVeil


An easy, flexible way to implement veil skeletons and shimmering effect for Android.


License API Build Status Android Weekly Medium Android Weekly


## Download [![Maven Central](https://img.shields.io/maven-central/v/com.github.skydoves/androidveil.svg?label=Maven%20Central)](https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22androidveil%22) ### Gradle Add the dependency below to your **module**'s `build.gradle` file: ```gradle dependencies { implementation("com.github.skydoves:androidveil:1.1.4") } ``` ## Usage First, add following XML namespace inside your XML layout file: ```gradle xmlns:app="http://schemas.android.com/apk/res-auto" ``` #### VeilLayout in layout ```gradle ``` #### Veil and UnVeil We can implement veiled skeletons using below methods. ```java veilLayout.veil() veilLayout.unVeil() ``` #### Implement veils using layout resource We can implement veiled skeletons using the layout resource. ```java veilLayout.layout = R.layout.layout_item_test ``` ## VeilRecyclerFrameView `VeilRecyclerFrameView` implements veiled skeletons for RecyclerView with the shimmer effect. #### VeilRecyclerFrameView in layout ```gradle ``` And we should attach our own adapter and LayoutManager. ```java veilRecyclerView.setAdapter(adapter) // sets your own adapter veilRecyclerView.setLayoutManager(LinearLayoutManager(this)) // sets LayoutManager veilRecyclerView.addVeiledItems(15) // add veiled 15 items ``` #### VeilRecyclerFrameView with a horizontal carousel Automatically masking a horizontal layout is **not supported yet**. Horizontal (carousel) layouts **can** be used if you specify their shimmer layout yourself in advance (and tell the view to use this prepared layout by setting `isPrepared = true`). See `CarouselActivity` for an example ```kotlin veilRecyclerView.setVeilLayout( layout = R.layout.item_prepared_shimmer_carousel, isPrepared = true ) veilRecyclerView.setAdapter(adapter) veilRecyclerView.setLayoutManager(LinearLayoutManager(this, RecyclerView.HORIZONTAL, false)) addVeiledItems(15) ``` #### Veil and UnVeil We can implement veiled skeletons using below methods. ```java veilRecyclerView.veil() // shows veil skeletons veilRecyclerView.unVeil() // disappear veils and shows your own recyclerView ``` #### RecyclerView We can access our Recyclerview and veiledRecyclerView using the below methods. ```java veilRecyclerView.getRecyclerView() // veilRecyclerView.getRecyclerView().setHasFixedSize(true) veilRecyclerView.getVeiledRecyclerView() ``` ## Shimmer This library using [shimmer-android](https://github.com/facebook/shimmer-android) by Facebook.
Here are the detail [shimmer-instruction](http://facebook.github.io/shimmer-android/) about shimmer or you can reference below examples. ### create using Builder This is how to create `Shimmer`'s instance using `Shimmer.Builder` class. ```kotlin val shimmer = Shimmer.ColorHighlightBuilder() .setBaseColor(ContextCompat.getColor(context, R.color.shimmerBase0)) .setHighlightColor(ContextCompat.getColor(context, R.color.shimmerHighlight0)) .setBaseAlpha(1f) .setHighlightAlpha(1f) .build() veilLayout.shimmer = shimmer // sets shimmer to VeilLayout veilRecyclerView.shimmer = shimmer // sets shimmer to VeilRecyclerView ``` ### create using kotlin dsl This is how to create `Shimmer`'s instance using kotlin dsl. ```kotlin val shimmer_alpha = alphaShimmer { setBaseAlpha(1.0f) setHighlightAlpha(0.5f) } val shimmer_color = colorShimmer { setBaseAlpha(1.0f) setHighlightAlpha(0.5f) setBaseColor(ContextCompat.getColor(context, R.color.colorPrimary)) setHighlightColor(ContextCompat.getColor(context, R.color.colorPrimaryDark)) } ``` ## AndroidVeil Attributes Attributes | Type | Default | Description --- | --- | --- | --- veiled | Boolean | false | shows veils initially. layout | Int | -1 | implement veils using the layout resource. radius | dimension | 8dp | sets corner radius to the veil items. drawable | Drawable | null | sets background drawable to the veil items. shimmerEnable | Boolean | true | sets shimmer enable. baseColor | ColorInt | Color.LTGRAY | sets shimmer base color. highlightColor | ColorInt | Color.DKGRAY | sets shimmer highlight color. baseAlpha | Float | 1.0f | sets shimmer base alpha value. highlightAlpha | Float | 1.0f | sets shimmer highlight alpha value. dropOff | Float | 0.5f | sets how quickly the shimmer's gradient drops-off. defaultChildVisible | Boolean | false | sets the child view's visibility when called veil and unveil. isItemWrapContentHeight | Boolean | false | sets height of veiled list item wrap_content isItemWrapContentWidth | Boolean | false | sets width of veiled list item wrap_content ## Find this repository useful? :heart: Support it by joining __[stargazers](https://github.com/skydoves/androidveil/stargazers)__ for this repository. :star:
Also __[follow](https://github.com/skydoves)__ me for my next creations! 🤩 # License ```xml Copyright 2018 skydoves Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ```