Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skydoves/AndroidVeil
:performing_arts: An easy and flexible way to implement loading skeletons and shimmering effects on layouts for Android.
https://github.com/skydoves/AndroidVeil
android android-library android-ui androidveil recyclerview shimmer skeleton skydoves
Last synced: about 1 month ago
JSON representation
:performing_arts: An easy and flexible way to implement loading skeletons and shimmering effects on layouts for Android.
- Host: GitHub
- URL: https://github.com/skydoves/AndroidVeil
- Owner: skydoves
- License: apache-2.0
- Created: 2018-10-31T06:08:30.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-06-26T11:44:44.000Z (2 months ago)
- Last Synced: 2024-06-27T12:15:01.591Z (2 months ago)
- Topics: android, android-library, android-ui, androidveil, recyclerview, shimmer, skeleton, skydoves
- Language: Kotlin
- Homepage:
- Size: 4.78 MB
- Stars: 1,447
- Watchers: 16
- Forks: 99
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-kotlin - AndroidVeil - :performing_arts: An easy, flexible way to implement veil skeletons and shimmering effect for Android. (Libraries)
- awesome-list - skydoves/AndroidVeil - :performing_arts: An easy and flexible way to implement loading skeletons and shimmering effects on layouts for Android. (Kotlin)
README
AndroidVeil
An easy, flexible way to implement veil skeletons and shimmering effect for Android.
## Download
[](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.
```