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 ❤ by ericktijerou.
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()
}
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()
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)
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()
}
}
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.
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.