Koleton
The easiest library to show skeleton screens in an Android app.
An Android library that provides an easy way to show skeleton of any view.
Koleton is an acronym for: Kotlin skeleton.
Made with
Installation
You can download and install Koleton with Maven Central and Gradle:
// In your module's `build.gradle.kts`
dependencies {
implementation("com.ericktijerou.koleton:koleton:1.0.0-beta01")
}Make sure to include mavenCentral() in your repositories
repositories {
mavenCentral()
}Quick Start
To load the skeleton of a View, use the loadSkeleton extension function:
// ConstraintLayout
constraintLayout.loadSkeleton()
// TextView
textView?.loadSkeleton(length = 20)
// RecyclerView
recyclerView.loadSkeleton(R.layout.item_example)Skeletons can be configured with an optional trailing lambda:
// ConstraintLayout
constraintLayout.loadSkeleton {
color(R.color.colorSkeleton)
cornerRadius(radiusInPixel)
shimmer(false)
lineSpacing(spacingInPixel)
}
// TextView
textView?.loadSkeleton(length = 20) {
color(R.color.colorSkeleton)
...
}
// RecyclerView
recyclerView.loadSkeleton(R.layout.item_example) {
itemCount(3)
...
}To hide the skeleton, use the hideSkeleton extension function:
view.hideSkeleton()SkeletonLoader
Koleton will lazily create a SkeletonLoader with the default values.
If you want to set the default values, you can set a default SkeletonLoader instance by either:
// In your Application
class MyApplication : Application(), SkeletonLoaderFactory {
override fun newSkeletonLoader(): SkeletonLoader {
return SkeletonLoader.Builder(this)
...
.color(R.color.colorSkeleton)
.cornerRadius(radiusInPixel)
.build()
}
}Or calling Koleton.setSkeletonLoader
val skeletonLoader = SkeletonLoader.Builder(context)
...
.color(R.color.colorSkeleton)
.cornerRadius(radiusInPixel)
.build()
Koleton.setSkeletonLoader(skeletonLoader)The default SkeletonLoader can be retrieved like so:
val skeletonLoader = Koleton.skeletonLoader(context)Paging
Koleton works well with Paging library with the help of KoletonView.
If you want to show a skeleton when you scroll to the bottom of your list, use the generateSkeleton extension function:
// In your PagedListAdapter
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.item_sample, parent, false)
return when (viewType) {
...
TYPE_SKELETON -> SkeletonViewHolder(view.generateSkeleton())
...
}
}
...
class SkeletonViewHolder(val koletonView: KoletonView) : RecyclerView.ViewHolder(koletonView) {
fun showSkeleton() {
koletonView.showSkeleton()
}
}Shimmer effect
Koleton works with Facebook’s shimmer library. If you want to create a custom shimmer effect, you need to include in your dependencies:
// In your module's `build.gradle.kts`
dependencies {
implementation("com.facebook.shimmer:shimmer:0.5.0")
}And set the custom shimmer in the lambda expression:
constraintLayout.loadSkeleton {
val customShimmer = Shimmer.AlphaHighlightBuilder()
.setDirection(Shimmer.Direction.TOP_TO_BOTTOM)
...
.build()
shimmer(customShimmer)
}
You can find more information about Facebook's shimmer effect on the shimmer-android page.
License
Copyright 2020 ericktijerou
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.