Batteries-included Tree View for Jetpack Compose supports state-aware, lazy-loaded nodes with unlimited depth, file system and JSON integration, and customizable styles. Features include expandable, selectable, and clickable nodes.
Add the desired dependencies to your module's build.gradle:
implementation "cafe.adriel.bonsai:bonsai-core:${latest-version}"
implementation "cafe.adriel.bonsai:bonsai-file-system:${latest-version}"
implementation "cafe.adriel.bonsai:bonsai-json:${latest-version}"
Current version:
Bonsai comes with a handy DSL for creating high-performance, customizable trees:
Tree<T>{}Leaf<T>() and Branch<T>()Bonsai() to render the tree@Composable
fun BonsaiExample {
tree = Tree {
Branch() {
Branch() {
Branch() {
Branch() {
Leaf(, customIcon = { EmojiIcon() })
Leaf(, customIcon = { EmojiIcon() })
}
}
Branch() {
Branch() {
Leaf(, customIcon = { EmojiIcon() })
}
Branch() {
Leaf(, customIcon = { EmojiIcon() })
}
}
}
}
}
Bonsai(tree)
}
Output:
Take a look at the sample app for working examples.
Import cafe.adriel.bonsai:bonsai-file-system module to use it.
val tree = FileSystemTree(
// Also works with java.nio.file.Path and okio.Path
rootPath = File(path),
// To show or not the root directory in the tree
selfInclude = true
)
Bonsai(
tree = tree,
// Custom style
style = FileSystemBonsaiStyle()
)
Output:
Import cafe.adriel.bonsai:bonsai-json module to use it.
val tree = JsonTree(
// Sample JSON from https://gateway.marvel.com/v1/public/characters
json = responseJson
)
Bonsai(
tree = tree,
// Custom style
style = JsonBonsaiStyle()
)
Output:
Easily control the expanded/collapsed state of your Tree:
toggleExpansion(node)collapseRoot() / expandRoot()collapseAll() / expandAll()Selected/Unselected state is also pretty simple to control:
selectedNodestoggleSelection(node)selectNode(node) / unselectNode(node)clearSelection()Its also possible to set custom click behaviors for your Tree. Control single, double and long clicks by using the expand and select APIs.
Bonsai(
tree = tree,
onClick = { node ->
tree.clearSelection()
tree.toggleExpansion(node)
},
onDoubleClick = { node -> /* ... */ },
onLongClick = { node -> /* ... */ }
)
Change your Tree appearance as you wish. Take a look at BonsaiStyle class for all available customizations.
Bonsai(
tree = tree,
style = BonsaiStyle(
toggleIconRotationDegrees = 0f,
toggleIcon = { node ->
rememberVectorPainter(
if (node is BranchNode && node.isExpanded) Icons.Outlined.UnfoldLess
else Icons.Outlined.UnfoldMore
)
},
nodeIconSize = 18.dp,
nodeShape = CutCornerShape(percent = 20),
nodeCollapsedIcon = { rememberVectorPainter(Icons.Outlined.Circle) },
nodeExpandedIcon = { rememberVectorPainter(Icons.Outlined.Adjust) },
nodeNameTextStyle = MaterialTheme.typography.overline
)
)
Output:
Need a deeper customization? You can set customIcons and customNames for each Leaf<T>() and Branch<T>() nodes.
Leaf(
content = "Wolf",
customIcon = { EmojiIcon("🐺") }
)
Output:
collapseFrom(depth) / expandUntil(depth)collapseNode(node) / expandNode(node)Surfaced from shared tags and platforms — no rankings paid for.