callout-compose

callout-compose is a Jetpack Compose library that allows you to easily display callout

Requirements

• minSdk version 27

Usage

Using callout-compose, you can display callouts anywhere you want.

Including in your project

Gradle

Add the dependency below to your module's build.gradle file:

if you use material2

dependencies {
    implementation("com.cybozu.callout.compose:callout-compose-core:0.0.2")
    implementation("com.cybozu.callout.compose:callout-compose-material2:0.0.2")
}

if you use material3

dependencies {
    implementation("com.cybozu.callout.compose:callout-compose-core:0.0.2")
    implementation("com.cybozu.callout.compose:callout-compose-material3:0.0.2")
}

How to Use

Create callout state

val calloutState = rememberCalloutState()

Call Modifier.anchoredCallout to attach a callout to any Composable.

Text(
    text = "Anchored Text",
    modifier = Modifier
        .anchoredCallout(
            state = calloutState
        )
)

Wrap the Composable you want to display with Callout Composable

Callout(
    calloutState = calloutState,
    verticalAlignment = CalloutAlignment.Vertical.Top,
    horizontalAlignment = CalloutAlignment.Horizontal.End.outer()
) {
    Text(text = "Hello, Callout!")
}

You can choose the following combinations for verticalAlignment and horizontalAlignment:

VerticalAlignment is divided into Inner and Outer:

• Inner: Top, Center, Bottom
• Outer: Top.outer(), Bottom.outer()

HorizontalAlignment is divided into Inner and Outer:

• Inner: Start, Center, End
• Outer: Start.outer(), End.outer()

The available combinations of VerticalAlignment and HorizontalAlignment is:

• Inner（Vertical） × Outer（Horizontal）
• Outer（Vertical） × Inner（Horizontal）

Complete Example

val calloutState = rememberCalloutState()

Text(
    text = "Anchored Text",
    modifier = Modifier
        .anchoredCallout(
            state = calloutState
        )
)

Callout(
    calloutState = calloutState,
    verticalAlignment = CalloutAlignment.Vertical.Top,
    horizontalAlignment = CalloutAlignment.Horizontal.End.outer()
) {
    Text(text = "Hello, Callout!")
}

Preview

	Top.outer()	Bottom.outer()
Start
Center
End

	Top	Center	Bottom
Start.outer()
End.outer()

Demo

This repository includes demonstration app.

if you use material2, open sample-app-material2 and Run it.

if you use material3, open sample-app-material3 and Run it.

License

License