- Notifications
You must be signed in to change notification settings - Fork28
The easiest library to show skeleton screens in an Android app.
License
ericktijerou/koleton
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 ❤ byericktijerou.
You candownload and installKoleton withMaven Central andGradle:
// In your module's `build.gradle.kts`dependencies { implementation("com.ericktijerou.koleton:koleton:1.0.0-beta01")}
Make sure to includemavenCentral() in your repositories
repositories { mavenCentral()}To load the skeleton of aView, use theloadSkeleton extension function:
// ConstraintLayoutconstraintLayout.loadSkeleton()// TextViewtextView?.loadSkeleton(length=20)// RecyclerViewrecyclerView.loadSkeleton(R.layout.item_example)
Skeletons can be configured with an optional trailing lambda:
// ConstraintLayoutconstraintLayout.loadSkeleton { color(R.color.colorSkeleton) cornerRadius(radiusInPixel) shimmer(false) lineSpacing(spacingInPixel)}// TextViewtextView?.loadSkeleton(length=20) { color(R.color.colorSkeleton)...}// RecyclerViewrecyclerView.loadSkeleton(R.layout.item_example) { itemCount(3)...}
To hide the skeleton, use thehideSkeleton extension function:
view.hideSkeleton()
Koleton will lazily create aSkeletonLoader with the default values.If you want to set the default values, you can set a defaultSkeletonLoader instance by either:
// In your ApplicationclassMyApplication :Application(), SkeletonLoaderFactory {overridefunnewSkeletonLoader():SkeletonLoader {returnSkeletonLoader.Builder(this)... .color(R.color.colorSkeleton) .cornerRadius(radiusInPixel) .build() }}
Or callingKoleton.setSkeletonLoader
val skeletonLoader=SkeletonLoader.Builder(context)... .color(R.color.colorSkeleton) .cornerRadius(radiusInPixel) .build()Koleton.setSkeletonLoader(skeletonLoader)
The defaultSkeletonLoader can be retrieved like so:
val skeletonLoader=Koleton.skeletonLoader(context)
Koleton works well withPaging library with the help ofKoletonView.
If you want to show a skeleton when you scroll to the bottom of your list, use thegenerateSkeleton extension function:
// In your PagedListAdapteroverridefunonCreateViewHolder(parent:ViewGroup,viewType:Int):RecyclerView.ViewHolder {val view=LayoutInflater.from(parent.context).inflate(R.layout.item_sample, parent,false)returnwhen (viewType) {...TYPE_SKELETON->SkeletonViewHolder(view.generateSkeleton())... }}...classSkeletonViewHolder(valkoletonView:KoletonView) : RecyclerView.ViewHolder(koletonView) {funshowSkeleton() { koletonView.showSkeleton() }}
Koleton works with Facebook’sshimmer 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 theshimmer-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.About
The easiest library to show skeleton screens in an Android app.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.