• Stars
    star
    1,474
  • Rank 31,891 (Top 0.7 %)
  • Language
    Kotlin
  • License
    Apache License 2.0
  • Created about 6 years ago
  • Updated 6 months ago

Reviews

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

Repository Details

๐ŸŽญ An easy and flexible way to implement loading skeletons and shimmering effects on layouts 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,749
star
2

android-developer-roadmap

๐Ÿ—บ The Android Developer Roadmap offers comprehensive learning paths to help you understand Android ecosystems.
Kotlin
7,184
star
3

Balloon

๐ŸŽˆ Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android.
Kotlin
3,675
star
4

chatgpt-android

๐Ÿ“ฒ ChatGPT Android demonstrates a Chatbot application using OpenAI's chat API on Android with Stream Chat SDK for Compose.
Kotlin
3,661
star
5

TransformationLayout

๐ŸŒ  Transform between two Views, Activities, and Fragments, or a View to a Fragment with container transform animations for Android.
Kotlin
2,341
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
2,031
star
7

ColorPickerView

๐ŸŽจ Android colorpicker for getting colors from any images by tapping on the desired color.
Java
1,569
star
8

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,507
star
9

DisneyMotions

๐Ÿฆ A Disney app using transformation motions based on MVVM (ViewModel, Coroutines, Flow, Room, Repository, Koin) architecture.
Kotlin
1,502
star
10

MarvelHeroes

โค๏ธ A sample Marvel heroes application based on MVVM (ViewModel, Coroutines, Room, Repository, Koin) architecture.
Kotlin
1,239
star
11

PowerMenu

๐Ÿ”ฅ Powerful and modernized popup menu with fully customizable animations.
Java
1,191
star
12

PowerSpinner

๐ŸŒ€ A lightweight dropdown popup spinner, fully customizable with an arrow and animations for Android.
Kotlin
1,188
star
13

Orbital

๐Ÿช Jetpack Compose Multiplatform library that allows you to implement dynamic transition animations such as shared element transitions.
Kotlin
1,097
star
14

DisneyCompose

๐Ÿงธ A demo Disney app using Jetpack Compose and Hilt based on modern Android tech stacks and MVVM architecture.
Kotlin
945
star
15

WhatIf

โ˜” Fluent syntactic sugar of Kotlin for handling single if-else statements, nullable, collections, and booleans.
Kotlin
853
star
16

ExpandableLayout

๐Ÿฆš An expandable layout that shows a two-level layout with an indicator.
Kotlin
825
star
17

ElasticViews

โœจ An easy way to implement an elastic touch effect for Android.
Kotlin
811
star
18

Cloudy

โ˜๏ธ Jetpack Compose blur effect library, which falls back onto a CPU-based implementation to support older API levels.
Kotlin
788
star
19

ProgressView

๐ŸŒŠ A polished and flexible ProgressView, fully customizable with animations.
Kotlin
783
star
20

FlexibleBottomSheet

๐Ÿฌ Advanced Compose Multiplatform bottom sheet for segmented sizing, non-modal type, and allows interaction behind the bottom sheet similar to Google Maps.
Kotlin
733
star
21

AndroidRibbon

๐ŸŽ€ A fancy and beautiful ribbon with shimmer effects for Android.
Kotlin
692
star
22

pokedex-compose

๐Ÿ—ก๏ธ Pokedex Compose demonstrates modern Android development with Jetpack Compose, Hilt, Coroutines, Flow, Jetpack (Room, ViewModel), and Material Design based on MVVM architecture.
Kotlin
660
star
23

Needs

๐ŸŒ‚ An easy way to implement modern permission instructions popup.
Kotlin
614
star
24

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
585
star
25

retrofit-adapters

๐Ÿš† Retrofit call adapters for modeling network responses using Kotlin Result, Jetpack Paging3, and Arrow Either.
Kotlin
501
star
26

TheMovies

๐ŸŽฌ A demo project for The Movie DB based on Kotlin MVVM architecture and material design & animations.
Kotlin
496
star
27

MovieCompose

๐ŸŽž A demo movie app using Jetpack Compose and Hilt based on modern Android tech stacks.
Kotlin
496
star
28

Only

๐Ÿ’ An easy way to persist and run code block only as many times as necessary on Android.
Kotlin
483
star
29

ColorPickerPreference

๐ŸŽจ A library that lets you implement ColorPicker, ColorPickerDialog, ColorPickerPreference.
Kotlin
476
star
30

TheMovies2

๐ŸŽฌ A demo project using The Movie DB based on Kotlin MVVM architecture and material design & animations.
Kotlin
476
star
31

Submarine

๐Ÿšค Floating navigation view for displaying a list of items dynamically on Android.
Kotlin
473
star
32

Orchestra

๐ŸŽบ A collection of Jetpack Compose libraries, which allows you to build tooltips, spinners, and color pickers.
Kotlin
458
star
33

colorpicker-compose

๐ŸŽจ Kotlin Multiplatform color picker library for getting colors from any images by tapping on the desired color.
Kotlin
456
star
34

Rainbow

๐ŸŒˆ Fluent syntactic sugar of Android for applying gradations, shading, and tinting.
Kotlin
450
star
35

IndicatorScrollView

๐Ÿง€ A dynamic scroll view that animates indicators according to its scroll position.
Kotlin
415
star
36

PreferenceRoom

๐Ÿšš Android processing library for managing SharedPreferences persistence efficiently and structurally.
Java
377
star
37

DoubleLift

๐Ÿฆ‹ Expands and collapses a layout horizontally and vertically sequentially.
Kotlin
360
star
38

GoldMovies

๐Ÿ‘‘ The GoldMovies is based on Kotlin, MVVM architecture, coroutines, dagger, koin, and material designs & animations.
Kotlin
356
star
39

lazybones

๐Ÿ˜ด A lazy and fluent syntactic sugar for observing Activity, Fragment, and ViewModel lifecycles with lifecycle-aware properties.
Kotlin
353
star
40

compose-performance

๐Ÿ“š Curated articles to understand Compose internals and optimize Jetpack Compose performance.
340
star
41

gemini-android

โœจ Gemini Android demonstrates Google's Generative AI on Android with Stream Chat SDK for Compose.
Kotlin
327
star
42

sealedx

๐ŸŽฒ Kotlin Symbol Processor that auto-generates extensive sealed classes and interfaces for Android and Kotlin.
Kotlin
321
star
43

Bindables

๐Ÿงฌ Android DataBinding kit for notifying data changes to UI layers with MVVM architecture.
Kotlin
310
star
44

GithubFollows

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

AndroidBottomBar

๐Ÿซ A lightweight bottom navigation view, fully customizable with an indicator and animations.
Kotlin
294
star
46

Bundler

๐ŸŽ Android Intent & Bundle extensions that insert and retrieve values elegantly.
Kotlin
263
star
47

twitch-clone-compose

๐ŸŽฎ Twitch clone project demonstrates modern Android development built with Jetpack Compose and Stream Chat/Video SDK for Compose.
Kotlin
226
star
48

snitcher

๐Ÿฆ‰ Snitcher captures global crashes, enabling easy redirection to the exception tracing screen for swift recovery.
Kotlin
223
star
49

compose-stable-marker

โœ’๏ธ Compose stable markers for KMP to tell stable/immutable guarantees to the compose compiler.
Kotlin
222
star
50

Chamber

โš–๏ธ A lightweight Android lifecycle-aware and thread-safe pipeline for communicating between components with custom scopes.
Kotlin
186
star
51

Flourish

๐ŸŽฉ Flourish implements dynamic ways to show up and dismiss layouts with animations.
Kotlin
175
star
52

BaseRecyclerViewAdapter

โšก Fast way to bind RecyclerView adapter and ViewHolder for implementing clean sections.
Kotlin
164
star
53

Multi-ColorPicker

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

All-In-One

๐Ÿ‘” Health care application for reminding health-todo lists and making healthy habits every day.
Kotlin
120
star
55

Medal

๐Ÿ…An easy way to implement medal effect for Android.
Kotlin
110
star
56

viewmodel-lifecycle

๐ŸŒณ ViewModel Lifecycle allows you to track and observe Jetpack's ViewModel lifecycle changes.
Kotlin
103
star
57

WaterDrink

๐Ÿ’ง Simple water drinking reminder application based on MVP architecture.
Kotlin
77
star
58

Awesome-Android-Persistence

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

CameleonLayout

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

SyncMarket

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

MagicLight-Controller

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

MethodScope

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

firebase-android-ktx

๐Ÿ”ฅ Kotlin & Compose-friendly Firebase extensions designed to help you focus on your business logic.
Kotlin
29
star
64

kmp-developer-roadmap

๐Ÿ—บ The Kotlin Multiplatform Developer Roadmap offers comprehensive learning paths to help you understand KMP ecosystems.
Kotlin
26
star
65

server-driven-compose

๐Ÿง™ Server Driven Compose showcases server-driven UI approaches in Jetpack Compose with Firebase.
Kotlin
24
star
66

MapEditor

You can draw your map using by this Map Editor project.
C#
21
star
67

skydoves

๐Ÿ•Š skydoves
14
star
68

seungmani

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

NityLife

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

soniaOnline

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

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