What is Jetpack Layouts?

JetpackLayouts is an Android library providing a collection of custom layouts built with Jetpack Compose. This library aims to simplify the creation of complex layouts by offering reusable composable functions. Currently, it includes a Circular layout, with more layouts to be added in the future.

Setup

Current available versions:

• Stable: NONE
• Unstable: 0.1.0-alpha4

Step 1. Add it in your root build.gradle at the end of repositories:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

Step 2. Add the dependency

implementation 'com.github.TurKurT656:JetpackLayouts:0.1.0-alpha4'

Implementation

Circular layout

For basic usage you can use the below code:

Circular(
    center = {
        YourCenterCircle()
    }
) {
    for (user in users) {
        YourChildCircle(user)
    }
}

Attributes	Type	Description
overrideRadius	() -> Dp	Distance from the layout center to the children's center.
startAngle	() -> Float	Specifies the starting angle for the first child.
center	@Composable () -> Unit	Center element of the circular layout.
content	@Composable () -> Unit	Children to be placed in the circular layout.

Since overrideRadius and startAngle are lambda functions you can animate them without performance loss:

var isExpanded by remember { mutableStateOf(false) }

val radius by animateDpAsState(
    targetValue = if (isExpanded) 120.dp else 80.dp,
    animationSpec = spring(),
)

val startAngle by animateFloatAsState(
    targetValue = if (isExpanded) 30f else 0f,
    animationSpec = spring(),
)

Circular(
    overrideRadius = { radius },
    startAngle = { startAngle },
    center = {
        YourCenterCircle(
            onClick = {
                isExpanded = !isExpanded
            }
        )
    }
) {
    for (user in users) {
        YourChildCircle(user)
    }
}

If you want one of the children to have an extra radius or an exact angle, you can use extraRadius and exactAngle modifier functions that are available in CircularScope:

Circular(
    center = {
        YourCenterCircle()
    }
) { // CircularScope
    YourChildCircle(
        modifier = Modifier.exactAngle(30f),
        user = users[0],
    )
    YourChildCircle(
        modifier = Modifier.extraRadius(16.dp),
        user = users[1],
    )
}

Community 💬

Contributions are welcome! Please fork the repository and submit a pull request. For major changes, please open an issue first to discuss what you would like to change.