How to use sample data in Composable?

Question

In XML we use sample name, date etc. by using attributes like @tools:sample/first_names. Is there any way we can use sample data similar way from @tools:sample in Preview Composable ?

Answer 1

You can use the @PreviewParameter.

For example:

data class Obj(val name :String,val count:Int)

@Composable
fun ObjCard(obj:Obj) {
    Card(
        Modifier.width(100.dp).height(50.dp)){
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally)
        {
            Text("Name = " +obj.name)
            Text("Count = " +obj.count)
        }
    }
}

In this case you can implement the PreviewParameterProvider interface and create something like:

class SampleObjProvider: PreviewParameterProvider<Obj> {
    override val values = sequenceOf(
         Obj("Obj1",10),
         Obj("Obj2",70))
    override val count: Int = values.count()
}    

Finally apply the @PreviewParameter to the ObjCard composable:

@Preview(showBackground = true)
@Composable
fun ObjCard(@PreviewParameter(SampleObjProvider::class)  obj:Obj) {
    //..same code 
}