https://kotlinlang.org logo
#compose
Title
# compose
a

Asad Mukhtar

08/17/2022, 12:59 PM
Can anyone let me know which library you use for showing skeleton in Compose, and how you handle it?
s

sindrenm

08/17/2022, 1:04 PM
We use https://google.github.io/accompanist/placeholder. Something like this:
Copy code
@Composable
fun Skeleton() {
  Column {
    Text("Some heading", Modifier.placeholder(true))

    Text("Some body text", Modifier.placeholder(true))

    // In place of an image, for instance:
    Box(Modifier.clip(RoundedCornerShape(16.dp).placeholder(true))
  }
}
You may also want to add a shimmer effect, in which case you can add a highlight:
Copy code
Modifier.placeholder(true, highlight = PlaceholderHighlight.shimmer())
Note that the above come from the
.placeholder.material
package and assumes a
MaterialTheme
being set. If that's not the case, there are alternatives in the
.placeholder
package (no
.material
, which allows setting the colors and shapes and stuff manually.
This is all documented on the link above, though.
15 Views