{"id":19521780,"url":"https://github.com/smarttoolfactory/compose-bubble","last_synced_at":"2025-08-29T21:32:10.231Z","repository":{"id":63000473,"uuid":"447932132","full_name":"SmartToolFactory/Compose-Bubble","owner":"SmartToolFactory","description":"🚀💬🫧 Speech/Chat bubble written with Jetpack Compose and canvas with various properties such as arrow width, height, background color, shadow to create similar bubbles whatsapp, telegram or others have.","archived":false,"fork":false,"pushed_at":"2024-02-28T12:27:42.000Z","size":2157,"stargazers_count":87,"open_issues_count":4,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-26T09:35:08.476Z","etag":null,"topics":["canvas","chat","chat-bubble","contraints","jetpack-compose","jetpack-compose-canvas","layout","modifier","speech-bubble"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SmartToolFactory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-01-14T10:43:28.000Z","updated_at":"2025-04-18T01:25:54.000Z","dependencies_parsed_at":"2023-01-24T21:45:19.129Z","dependency_job_id":"2861fd64-e5ea-44dc-996e-8e87339f4fce","html_url":"https://github.com/SmartToolFactory/Compose-Bubble","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/SmartToolFactory/Compose-Bubble","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Bubble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Bubble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Bubble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Bubble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SmartToolFactory","download_url":"https://codeload.github.com/SmartToolFactory/Compose-Bubble/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Bubble/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272766529,"owners_count":24989404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","chat","chat-bubble","contraints","jetpack-compose","jetpack-compose-canvas","layout","modifier","speech-bubble"],"created_at":"2024-11-11T00:34:53.666Z","updated_at":"2025-08-29T21:32:10.210Z","avatar_url":"https://github.com/SmartToolFactory.png","language":"Kotlin","readme":"### Jetpack Compose Speech Chat Bubble\n\n[![](https://jitpack.io/v/SmartToolFactory/Compose-Bubble.svg)](https://jitpack.io/#SmartToolFactory/Compose-Bubble)\n\n\nChat/Speech bubble width different arrow, background, shadow properties to create chat bubbles\nlike whatsapp, telegram or other messaging apps have or arrows with arrow at bottom to create\ninfo bubble.\n\n## Gradle Setup\n\nTo get a Git project into your build:\n\n* Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end\n  of repositories:\n\n```\nallprojects {\n  repositories {\n      ...\n      maven { url 'https://jitpack.io' }\n  }\n}\n```\n\n* Step 2. Add the dependency\n\n```\ndependencies {\n\t  implementation 'com.github.SmartToolFactory:Compose-Bubble:Tag'\n}\n```\n\n`Modifier.bubble`, or createBubbleShape function to create this as `Shape` or `BubbleLayout` as in demo such as\n\n```kotlin\n@Composable\nfun BubbleLayout(\n    modifier: Modifier = Modifier,\n    bubbleState: BubbleState,\n    backgroundColor: Color = Color.White,\n    shadow: BubbleShadow? = null,\n    borderStroke: BorderStroke? = null,\n    content: @Composable () -\u003e Unit\n) {\n    Column(\n        modifier.bubble(\n            bubbleState = bubbleState,\n            color = backgroundColor,\n            shadow = shadow,\n            borderStroke = borderStroke\n        )\n    ) {\n        content()\n    }\n}\n\n```\n\n\nhttps://github.com/SmartToolFactory/Compose-Bubble/assets/35650605/f6bdd5fe-bb4f-4725-bd22-2696d29079bc\n\n\nThere are 4 demos to test **bubbles**.\n* `DemoFullChat` is small chatting sample which displays arrow on first message from sender or user\n* `DemoDynamicSize` is for changing bubbles dynamically to observe changes in real time. You can add your custom bubbles to test dynamic changes.\n* `DemoBubbles` displays some sample bubbles\n* `DemoSimpleLayout` is for demonstrating `Constraints.offset(x,y)` and `Contrainsts.constrainWidth` on `Layout` and `Placeable`\n\n| Full Chat                           z    | Dynamic Size                                | Bubble Samples                              |\n|------------------------------------------|---------------------------------------------|---------------------------------------------|\n| \u003cimg src=\"./screenshots/demo_chat.gif\"/\u003e | \u003cimg src=\"./screenshots/demo_dynamic.gif\"/\u003e | \u003cimg src=\"./screenshots/demo_bubbles.png\"/\u003e |\n\n\n## BubbleState\n```\nclass BubbleState internal constructor(\n    var backgroundColor: Color = DefaultBubbleColor,\n    var cornerRadius: BubbleCornerRadius = BubbleCornerRadius(\n        topLeft = 8.dp,\n        topRight = 8.dp,\n        bottomLeft = 8.dp,\n        bottomRight = 8.dp,\n    ),\n    var alignment: ArrowAlignment = ArrowAlignment.NONE,\n    var arrowShape: ArrowShape = ArrowShape.TRIANGLE_RIGHT,\n    var arrowOffsetX: Dp = 0.dp,\n    var arrowOffsetY: Dp = 0.dp,\n    var arrowWidth: Dp = 14.dp,\n    var arrowHeight: Dp = 14.dp,\n    var arrowRadius: Dp = 0.dp,\n    var drawArrow: Boolean = true,\n    var shadow: BubbleShadow? = null,\n) \n```\n\nto create a BubbleState to modify bubble to be drawn use one of the overloads of remember functions\n```\nfun rememberBubbleState(\nbackgroundColor: Color = DefaultBubbleColor,\ncornerRadius: Dp = 8.dp,\nalignment: ArrowAlignment = ArrowAlignment.NONE,\narrowShape: ArrowShape = ArrowShape.TRIANGLE_RIGHT,\narrowOffsetX: Dp = 0.dp,\narrowOffsetY: Dp = 0.dp,\narrowWidth: Dp = 14.dp,\narrowHeight: Dp = 14.dp,\narrowRadius: Dp = 0.dp,\ndrawArrow: Boolean = true,\nshadow: BubbleShadow? = null,\n)\n```\n### Properties\n* **backgroundColor**: color of Bubble\n* **cornerRadius**: Constructs a Radius for each side of bubble rectangle\n* **alignment**: Arrow alignment determines in which side of the bubble this arrow should be drawn. When ArrowAlignment.NONE is selected no arrow is drawn.\n* **arrowShape**: Shape of the arrow, It can be right or isosceles triangle or curved shape\n* **arrowOffsetX**: Vertical offset for arrow that is positioned on top or at the bottom of the bubble. Positive values move arrow right while negative values move left. Arrow position is limited between left of content and  content right minus arrow width.\n* **arrowOffsetY**: Vertical offset for arrow that is positioned on left or right side of the bubble. Positive values move arrow bottom while negative values move up. Arrow position  is limited between top of content and  content bottom minus arrow height.\n* **arrowWidth**: width of the arrow\n* **arrowHeight**: height of the arrow\n* **arrowRadius**: radius of the arrow curves the tip of the arrow\n* **drawArrow**: whether we should draw arrow or only have rectangle shape bubble\n* **shadow**: of the arrow contains elevation, dx, dy, radius and color to draw shadow below bubble\n\n### Usage\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmarttoolfactory%2Fcompose-bubble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmarttoolfactory%2Fcompose-bubble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmarttoolfactory%2Fcompose-bubble/lists"}