A library for creating dynamic skeleton view

Overview

Skeleton Placeholder View Maven Central platform license

Overview

A Library designed to draw a Skeleton by "skinning" the view from a provided layout. Skeleton is composed of Bone with different properties, library usage defines which bones to be drawn before the view is skinned. Usually used as a Placeholder while loading a data before it is populated to a View. By using this library, creating a skeleton view is much simpler and dynamic as developers don't need to create specific skeleton layout.xml for each view, instead use this custom view to draw the shape as the specified layout.xml.

Supports the following shapes :

RectBone CircleBone

The library is developed using Kotlin, and built for interopability with Java

NOTE: The output of this library strongly depends on how you write your layout file

Preview

SkeletonPlaceholderView

Working sample on CIAYO Comics Android App:

SkeletonPlaceholderView

Setup

Gradle

    dependencies {
         implementation 'com.github.ferrytan:skeletonplaceholderview:${latestVersion}'
         ...
     }

Replace ${latestVersion} with the latest version code. See releases.

SkeletonPlaceholderView 1.1.0 and above only supports projects that have been migrated to androidx. For more information, read Google's migration guide. Please use version 1.0.2 for projects that are still using the old support library.

Sample Usage

For a working implementation, please have a look at the Sample Project

  1. Add SkeletonPlaceholderView to your layout xml:
<com.meetferrytan.skeletonplaceholderview.SkeletonPlaceholderView
        android:id="@+id/skeletonPlaceholderView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:sk_bone_corner_radius_default="2dp"
        app:sk_background_color="#ffffff"
        app:sk_bone_color_default="#cccccc"
        app:sk_bone_height_default="48dp"
        app:sk_bone_width_default="100dp"/>

See attrs.xml for all supported attributes.

  1. Skin the view programmatically by calling the method SkeletonPlaceholderView.skinView(..)
  • Simple Usage (uses default RectBone)
// KOTLIN OR JAVA
skeletonPlaceholderView.skinView(R.layout.item_sample_2,
            R.id.imgCover,
            R.id.txtGenre,
            R.id.txtTitle,
            R.id.frmSubscribeCount)
  • Specific shapes
// KOTLIN
skeletonPlaceholderView.skinView(R.layout.item_sample_2,
            CircleBone(R.id.imgCover),
            RectBone(R.id.txtGenre),
            RectBone(R.id.txtTitle),
            RectBone(R.id.frmSubscribeCount))
// JAVA
skeletonPlaceholderView.skinView(R.layout.item_sample_2,
            new CircleBone(R.id.imgCover),
            new RectBone(R.id.txtGenre),
            new RectBone(R.id.txtTitle),
            new RectBone(R.id.frmSubscribeCount))
  • Custom Shapes using Builder Pattern
// KOTLIN
// Common builder pattern
skeletonPlaceholderView.skinView(R.layout.item_sample_2,
            CircleBone.Builder(R.id.imgCover)
            	.spacing(0)
                .build(),
            RectBone.Builder(R.id.txtGenre)
            	.cornerRadius(4f)
            	.customHeight(200)
            	.customWidth(100)
            	.horizontalSpacing(2)
            	.verticalSpacing(4)
            	.build(),
            RectBone.Builder(R.id.txtTitle)
            	.build(),
            RectBone.Builder(R.id.frmSubscribeCount)
            	.build())

// DSL
skeletonPlaceholderView.skinView(R.layout.item_sample_2,
            CircleBone.Builder(R.id.imgCover)
            	.spacing(0)
                .build(),
            RectBone.Builder(R.id.txtGenre)
                .apply {
                    cornerRadius(4f)
                    customHeight(200)
                    customWidth(100)
                    horizontalSpacing(2)
                    verticalSpacing(4)
                }.build(),
            RectBone.Builder(R.id.txtTitle)
            	.build(),
            RectBone.Builder(R.id.frmSubscribeCount)
            	.build())
// JAVA
skeletonPlaceholderView.skinView(R.layout.item_sample_2,
            new CircleBone.Builder(R.id.imgCover)
            	.spacing(0)
                .build(),
            new RectBone.Builder(R.id.txtGenre)
                .cornerRadius(4f)
                .customHeight(200)
                .color(Color.parseColor("#ff0000"))
                .customWidth(100)
                .horizontalSpacing(2)
                .verticalSpacing(4)
                .build(),
            new RectBone.Builder(R.id.txtTitle)
                .build(),
            new RectBone.Builder(R.id.frmSubscribeCount)
                .build())

See a complete usage in sample code.

Once again, the output of this library STRONGLY DEPENDS on how you write your layout file

Usage in sample app is improved by using Facebook's great library shimmer-android for a shimmering effect over the SkeletonPlaceholderView

Developed By

Ferry Irawan

[email protected]

http://meetferrytan.com/

Projects/Apps using SkeletonPlaceholderView

I'd be happy to know if you're using this library to your app, feel free to contact me and i'll add it to the list

Thanks

Special thanks to:

License

Copyright 2018 Ferry Irawan

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.
You might also like...
An android application for creating a journal for subjects you studied and also you can set timer for break.
An android application for creating a journal for subjects you studied and also you can set timer for break.

Study Journal An android application for creating a journal for subjects you studied and also you can set timer for break between two consecutive subj

Survey-service - Application for creating online surveys and polls

Survey Service Application for creating online surveys and polls Functionality A

Blinking-image-view - A variant of Android View that blinks only the source image (not the background)

Blinker View for Android What is this? Blinker View is an Android View that blinks a given drawable. Yes, it's that simple. Place it in your layout an

View
View "injection" library for Android.

Kotter Knife Deprecated: This was a terrible idea because it allocates an object for every view reference. Do not use, and do not use anything like it

A library for otp view with gradient and lines

AndroidOtpView (With gradient color in lines) Preview Otp View library for Android Getting started Add it in your root build.gradle at the end of repo

Android sliding panel that is part of the view hierarchy, not above it.
Android sliding panel that is part of the view hierarchy, not above it.

sliding-panel A ViewGroup that implements a sliding panel that is part of the view hierarchy, not above it. Difference from other libraries All other

ZoomHelper will make any view to be zoomable just like Instagram pinch-to-zoom
ZoomHelper will make any view to be zoomable just like Instagram pinch-to-zoom

ZoomHelper ZoomHelper will make any view to be zoomable just like the Instagram pinch-to-zoom. 😉 Installation ZoomHelper is available in the JCenter,

Arc Layout is a view group with which you can add a arc-shaped container in your layout.
Arc Layout is a view group with which you can add a arc-shaped container in your layout.

ArcLayout Arc Layout is a view group with which you can add a arc-shaped container in your layout. Two main variables are the direction and the curvat

A simple and easy adapter for RecyclerView. You don't have to make adapters and view holders anymore. Slush will help you.
A simple and easy adapter for RecyclerView. You don't have to make adapters and view holders anymore. Slush will help you.

한국어 No more boilerplate adapters and view holders. Slush will make using RecyclerView easy and fast. The goal of this project is to make RecyclerView,

Owner
Ferry Irawan
Ferry Irawan
Modern Calendar View Supporting Both Hijri and Gregorian Calendars but in highly dynamic way

KCalendar-View Modern calendar view supporting both Hijri and Gregorian calendar

Ahmed Ibrahim 8 Oct 29, 2022
Same as an Outlined text fields presented in Material Design page but with some dynamic changes

README SSCustomEditTextOutlineBorder Getting Started SSCustomEditTextOutLineBorder is a small kotlin library for android to support outlined (stroked)

Simform Solutions 194 Dec 30, 2022
A declarative, Kotlin-idiomatic API for writing dynamic command line applications.

A declarative, Kotlin-idiomatic API for writing dynamic command line applications.

Varabyte 349 Jan 9, 2023
Example Multi module architecture Android project using MVVM, Dynamic Features, Dagger-Hilt, Coroutines and Navigation Components

ModularDynamicFeatureHilt An Android template project following a multi module approach with clean architecture. It has been built following Clean Arc

Mbuodile Obiosio 25 Nov 23, 2022
An app to demonstrate Apple's new feature dynamic island in Android with Jetpack Compose

Jet Island Dynamic Island in Android with Jetpack Compose An app to demonstrate Apple's new feature dynamic island in Android with Jetpack Compose. Th

Cengiz TORU 101 Nov 29, 2022
Kotlin library for creating long running connections using MQTT protocol

About Courier Courier is a kotlin library for creating long running connections using MQTT protocol. Long running connection is a persistent connectio

Gojek 92 Dec 23, 2022
Carousel Recyclerview let's you create carousel layout with the power of recyclerview by creating custom layout manager.

Carousel Recyclerview Create carousel effect in recyclerview with the CarouselRecyclerview in a simple way. Including in your project Gradle Add below

Jack and phantom 514 Jan 8, 2023
An example of a test task for creating a simple currency converter application for the Android platform. The app is developed using Kotlin, MVI, Dagger Hilt, Retrofit, Jetpack Compose.

Simple Currency Converter Simple Currency Converter Android App by Isaev Semyon An example of a test task for creating a simple currency converter app

Semyon Isaev 1 Nov 8, 2021
Example mod with Mixin to help you to get started with creating a mod with mixins.

ExampleMixinMod Example mod with Mixin to help you to get started with creating a mod with mixins. For usage of mixins, see here. Also, remember to tu

null 0 Dec 16, 2021
Framework for quickly creating connected applications in Kotlin with minimal effort

Ktor is an asynchronous framework for creating microservices, web applications and more. Written in Kotlin from the ground up. import io.ktor.server.n

ktor.io 10.7k Jan 9, 2023