• Stars
    star
    1,384
  • Rank 32,635 (Top 0.7 %)
  • Language
    Kotlin
  • License
    Apache License 2.0
  • Created over 5 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

Gradle

Add the codes below to your root build.gradle file (not your module build.gradle file):

allprojects {
    repositories {
        mavenCentral()
    }
}

And add the dependency below to your module's build.gradle file:

dependencies {
    implementation "com.github.skydoves:androidveil:1.1.3"
}

Usage

First, add following XML namespace inside your XML layout file:

xmlns:app="http://schemas.android.com/apk/res-auto"

VeilLayout in layout

<com.skydoves.androidveil.VeilLayout
      android:id="@+id/veilLayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:veilLayout_veiled="true" // shows veils initially
      app:veilLayout_shimmerEnable="true" // sets shimmer enable
      app:veilLayout_baseColor="@android:color/holo_green_dark" // sets shimmer base color
      app:veilLayout_highlightColor="@android:color/holo_green_light" // sets shimmer highlight color
      app:veilLayout_baseAlpha="0.6" // sets shimmer base alpha value
      app:veilLayout_highlightAlpha="1.0" // sets shimmer highlight alpha value
      app:veilLayout_dropOff="0.5"// sets how quickly the shimmer`s gradient drops-off
      app:veilLayout_radius="6dp" // sets a corner radius of the whole veiled items >

      <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="And now here is my secret, a very simple secret"
         android:textColor="@android:color/white"
         android:textSize="22sp"/>

      <!-- Skip -->    

</com.skydoves.androidveil.VeilLayout>

Veil and UnVeil

We can implement veiled skeletons using below methods.

veilLayout.veil()
veilLayout.unVeil()

Implement veils using layout resource

We can implement veiled skeletons using the layout resource.

veilLayout.layout = R.layout.layout_item_test

VeilRecyclerFrameView

VeilRecyclerFrameView implements veiled skeletons for RecyclerView with the shimmer effect.

VeilRecyclerFrameView in layout

<com.skydoves.androidveil.VeilRecyclerFrameView
        android:id="@+id/veilRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:veilFrame_layout="@layout/item_profile" // sets to make veiling target layout
        app:veilFrame_veiled="true" // shows veils initially
        app:veilFrame_shimmerEnable="true" // sets shimmer enable
        app:veilFrame_baseColor="@android:color/holo_green_dark" // sets shimmer base color
        app:veilFrame_highlightColor="@android:color/holo_green_light" // sets shimmer highlight color
        app:veilFrame_baseAlpha="0.6" // sets shimmer base alpha value
        app:veilFrame_highlightAlpha="1.0" // sets shimmer highlight alpha value
        app:veilFrame_radius="8dp" // sets a corner radius of the whole veiled items 
        app:veilFrame_isItemWrapContentHeight="true"  // sets height of list item wrap_content
        app:veilFrame_isItemWrapContentWidth="true"   // sets width of list item wrap_content />

And we should attach our own adapter and LayoutManager.

veilRecyclerView.setAdapter(adapter) // sets your own adapter
veilRecyclerView.setLayoutManager(LinearLayoutManager(this)) // sets LayoutManager
veilRecyclerView.addVeiledItems(15) // add veiled 15 items

Veil and UnVeil

We can implement veiled skeletons using below methods.

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.

veilRecyclerView.getRecyclerView() // veilRecyclerView.getRecyclerView().setHasFixedSize(true)
veilRecyclerView.getVeiledRecyclerView()

Shimmer

This library using shimmer-android by Facebook.
Here are the detail shimmer-instruction about shimmer or you can reference below examples.

create using Builder

This is how to create Shimmer's instance using Shimmer.Builder class.

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.

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? ❤️

Support it by joining stargazers for this repository. ⭐
Also follow me for my next creations! 🤩

License

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.

More Repositories

1

Pokedex

🗡️ Pokedex demonstrates modern Android development with Hilt, Material Motion, Coroutines, Flow, Jetpack (Room, ViewModel) based on MVVM architecture.
Kotlin
7,496
star
2

android-developer-roadmap

🗺 The Android Developer Roadmap offers comprehensive learning paths to help you understand Android ecosystems.
Kotlin
6,880
star
3

Balloon

🎈 Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android.
Kotlin
3,535
star
4

chatgpt-android

📲 ChatGPT Android demonstrates OpenAI's ChatGPT on Android with Stream Chat SDK for Compose.
Kotlin
3,460
star
5

TransformationLayout

🌠 Transform between two Views, Activities, and Fragments, or a View to a Fragment with container transform animations for Android.
Kotlin
2,279
star
6

landscapist

🌻 A pluggable, highly optimized Jetpack Compose and Kotlin Multiplatform image loading library that fetches and displays network images with Glide, Coil, and Fresco.
Kotlin
1,876
star
7

ColorPickerView

🎨 Android colorpicker for getting colors from any images by tapping on the desired color.
Java
1,503
star
8

DisneyMotions

🦁 A Disney app using transformation motions based on MVVM (ViewModel, Coroutines, Flow, Room, Repository, Koin) architecture.
Kotlin
1,482
star
9

sandwich

🥪 Sandwich is an adaptable and lightweight sealed API library designed for handling API responses and exceptions in Kotlin for Retrofit, Ktor, and Kotlin Multiplatform.
Kotlin
1,403
star
10

MarvelHeroes

❤️ A sample Marvel heroes application based on MVVM (ViewModel, Coroutines, Room, Repository, Koin) architecture.
Kotlin
1,224
star
11

PowerMenu

🔥 Powerful and modernized popup menu with fully customizable animations.
Java
1,163
star
12

PowerSpinner

🌀 A lightweight dropdown popup spinner, fully customizable with an arrow and animations for Android.
Kotlin
1,105
star
13

Orbital

🪐 Jetpack Compose Multiplatform library that allows you to implement dynamic transition animations such as shared element transitions.
Kotlin
989
star
14

DisneyCompose

🧸 A demo Disney app using Jetpack Compose and Hilt based on modern Android tech stacks and MVVM architecture.
Kotlin
929
star
15

WhatIf

☔ Fluent syntactic sugar of Kotlin for handling single if-else statements, nullable, collections, and booleans.
Kotlin
835
star
16

ExpandableLayout

🦚 An expandable layout that shows a two-level layout with an indicator.
Kotlin
809
star
17

ElasticViews

✨ An easy way to implement an elastic touch effect for Android.
Kotlin
784
star
18

ProgressView

🌊 A polished and flexible ProgressView, fully customizable with animations.
Kotlin
755
star
19

AndroidRibbon

🎀 A fancy and beautiful ribbon with shimmer effects for Android.
Kotlin
684
star
20

Cloudy

☁️ Jetpack Compose blur effect library, which falls back onto a CPU-based implementation to support older API levels.
Kotlin
639
star
21

Needs

🌂 An easy way to implement modern permission instructions popup.
Kotlin
616
star
22

Pokedex-AR

🦄 Pokedex-AR demonstrates ARCore, Sceneform, and modern Android tech stacks — such as Hilt, Coroutines, Flow, Jetpack (Room, ViewModel, LiveData) based on MVVM architecture.
Kotlin
582
star
23

FlexibleBottomSheet

🐬 Advanced Compose Multiplatform bottom sheet for segmented sizing and non-modal type, similar to Google Maps.
Kotlin
541
star
24

Only

💐 An easy way to persist and run code block only as many times as necessary on Android.
Kotlin
485
star
25

TheMovies

🎬 A demo project for The Movie DB based on Kotlin MVVM architecture and material design & animations.
Kotlin
484
star
26

MovieCompose

🎞 A demo movie app using Jetpack Compose and Hilt based on modern Android tech stacks.
Kotlin
475
star
27

ColorPickerPreference

🎨 A library that lets you implement ColorPicker, ColorPickerDialog, ColorPickerPreference.
Kotlin
474
star
28

TheMovies2

🎬 A demo project using The Movie DB based on Kotlin MVVM architecture and material design & animations.
Kotlin
474
star
29

Submarine

🚤 Floating navigation view for displaying a list of items dynamically on Android.
Kotlin
471
star
30

retrofit-adapters

🚆 Retrofit call adapters for modeling network responses using Kotlin Result, Jetpack Paging3, and Arrow Either.
Kotlin
462
star
31

Rainbow

🌈 Fluent syntactic sugar of Android for applying gradations, shading, and tinting.
Kotlin
451
star
32

Orchestra

🎺 A collection of Jetpack Compose libraries, which allows you to build tooltips, spinners, and color pickers.
Kotlin
447
star
33

IndicatorScrollView

🧀 A dynamic scroll view that animates indicators according to its scroll position.
Kotlin
415
star
34

PreferenceRoom

🚚 Android processing library for managing SharedPreferences persistence efficiently and structurally.
Java
378
star
35

colorpicker-compose

🎨 Jetpack Compose color picker library for getting colors from any images by tapping on the desired color.
Kotlin
370
star
36

DoubleLift

🦋 Expands and collapses a layout horizontally and vertically sequentially.
Kotlin
360
star
37

GoldMovies

👑 The GoldMovies is based on Kotlin, MVVM architecture, coroutines, dagger, koin, and material designs & animations.
Kotlin
354
star
38

lazybones

😴 A lazy and fluent syntactic sugar for observing Activity, Fragment, and ViewModel lifecycles with lifecycle-aware properties.
Kotlin
351
star
39

sealedx

🎲 Kotlin Symbol Processor that auto-generates extensive sealed classes and interfaces for Android and Kotlin.
Kotlin
316
star
40

Bindables

🧬 Android DataBinding kit for notifying data changes to UI layers with MVVM architecture.
Kotlin
304
star
41

AndroidBottomBar

🍫 A lightweight bottom navigation view, fully customizable with an indicator and animations.
Kotlin
297
star
42

GithubFollows

:octocat: A demo project based on MVVM architecture and material design & animations.
Kotlin
293
star
43

Bundler

🎁 Android Intent & Bundle extensions that insert and retrieve values elegantly.
Kotlin
262
star
44

gemini-android

✨ Gemini Android demonstrates Google's Generative AI on Android with Stream Chat SDK for Compose.
Kotlin
262
star
45

snitcher

🦉 Snitcher captures global crashes, enabling easy redirection to the exception tracing screen for swift recovery.
Kotlin
216
star
46

Chamber

⚖️ A lightweight Android lifecycle-aware and thread-safe pipeline for communicating between components with custom scopes.
Kotlin
185
star
47

twitch-clone-compose

🎮 Twitch clone project demonstrates modern Android development built with Jetpack Compose and Stream Chat/Video SDK for Compose.
Kotlin
180
star
48

Flourish

🎩 Flourish implements dynamic ways to show up and dismiss layouts with animations.
Kotlin
174
star
49

compose-stable-marker

✒️ Compose stable markers for KMP to tell stable/immutable guarantees to the compose compiler.
Kotlin
169
star
50

BaseRecyclerViewAdapter

⚡ Fast way to bind RecyclerView adapter and ViewHolder for implementing clean sections.
Kotlin
163
star
51

Multi-ColorPicker

Android multi colorpicker for getting colors from any images by tapping on the desired color.
Kotlin
125
star
52

All-In-One

👔 Health care application for reminding health-todo lists and making healthy habits every day.
Kotlin
118
star
53

Medal

🏅An easy way to implement medal effect for Android.
Kotlin
111
star
54

viewmodel-lifecycle

🌳 ViewModel Lifecycle allows you to track and observe Jetpack's ViewModel lifecycle changes.
Kotlin
104
star
55

WaterDrink

💧 Simple water drinking reminder application based on MVP architecture.
Kotlin
75
star
56

CameleonLayout

A library that let you implement double-layer-layout changing with slide animation.
Kotlin
71
star
57

Awesome-Android-Persistence

A curated list of awesome android persistence libraries about SQLite, ORM, Mobile Database, SharedPreferences, etc.
70
star
58

SyncMarket

Let managing your application version update more simply.
Java
41
star
59

MagicLight-Controller

This simple demo application is controlling MagicLight's smart bulbs by bluetooth-le
Java
35
star
60

MethodScope

Reduce repetitive inheritance works in OOP world using @MethodScope.
Java
33
star
61

MapEditor

You can draw your map using by this Map Editor project.
C#
22
star
62

skydoves

🕊 skydoves
14
star
63

seungmani

This simple project is cocos-2dx c++ multi-patform(win32, android, ios, linux) game in Jan 2015.
C++
8
star
64

soniaOnline

XNA C# win 32/64 patform MMO game in Jan 2016.
C#
5
star
65

NityLife

This simple project is cocos-2dx c++ multi-patform(win32, android, ios, linux) game in 2014.
C++
5
star
66

Rurimo-Camera

You can take some screenshots or save images at clipboard so easily like just one click on Windows with this application.
C#
1
star