{"id":19208248,"url":"https://github.com/mttankkeo/compose_appbar","last_synced_at":"2026-01-05T04:04:38.370Z","repository":{"id":225596472,"uuid":"766123677","full_name":"MTtankkeo/compose_appbar","owner":"MTtankkeo","description":"This package allows easy and light implementation of app bar in jetpack compose environment.","archived":false,"fork":false,"pushed_at":"2024-07-21T00:23:27.000Z","size":51,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T13:33:05.945Z","etag":null,"topics":["appbar","client-side","frontend","jetpack-compose","material"],"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/MTtankkeo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2024-03-02T12:04:30.000Z","updated_at":"2024-07-21T00:23:30.000Z","dependencies_parsed_at":"2024-07-21T01:30:17.870Z","dependency_job_id":null,"html_url":"https://github.com/MTtankkeo/compose_appbar","commit_stats":null,"previous_names":["mttankkeo/jetpack_appbar","mttankkeo/compose_appbar"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fcompose_appbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fcompose_appbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fcompose_appbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MTtankkeo%2Fcompose_appbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MTtankkeo","download_url":"https://codeload.github.com/MTtankkeo/compose_appbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244627880,"owners_count":20483894,"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","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":["appbar","client-side","frontend","jetpack-compose","material"],"created_at":"2024-11-09T13:25:06.189Z","updated_at":"2026-01-05T04:04:38.364Z","avatar_url":"https://github.com/MTtankkeo.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://jetc.dev/issues/266.html\"\u003e\u003cimg src=\"https://github.com/user-attachments/assets/5f22db99-e836-451a-92dd-24a06a750c57\"\u003e\u003c/a\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n  \u003cimg src=\"https://github.com/user-attachments/assets/68792aec-916f-44ab-89a6-38296fb1fa68\"\u003e\u003c/img\u003e\r\n  \u003ch1\u003eJetpack Compose AppBar\u003c/h1\u003e\r\n  \u003ctable\u003e\r\n    \u003cthead\u003e\r\n      \u003ctr\u003e\r\n        \u003cth\u003eVersion\u003c/th\u003e\r\n        \u003cth\u003ev1.1.0\u003c/th\u003e\r\n      \u003c/tr\u003e\r\n    \u003c/tbody\u003e\r\n  \u003c/table\u003e\r\n\u003c/div\u003e\r\n\r\nThis package allows easy and light implementation of appbar in jetpack compose environment.\r\n\r\n\u003e Designed to implement flexible appbar behavior by utilizing only fundamental underlying behaviors and excluding unnecessary features.\r\n\r\n## How to make it dependent?\r\nThis example for Gradle about Groovy \u0026 Kotlin DSL.\r\n\r\n```kts\r\nimplementation(\"dev.ttangkong:compose_appbar:1.1.0\")\r\n```\r\n\r\n## How to make appbar?\r\nPlease refer to the code below!\r\n\r\n\u003e See also, this code is the simplest example in this package.\r\n\r\n```kotlin\r\nAppBarConnection(\r\n  AppBar(behavior = MaterialAppBarBehavior()) {\r\n    // ... child\r\n  }\r\n  SizedAppBar(minExtent = 50, maxExtent = 100) {\r\n    // ... child\r\n  }\r\n) {\r\n  // Only scrollable component of vertical direction are available.\r\n  // And, can wrapping to parent.\r\n  LazyColumn {\r\n    // ... items\r\n  }\r\n}\r\n```\r\n\r\n### How to apply effects according to appbar position?\r\nPlease refer to the code below!\r\n\r\n\u003e See also, this code is an example of implementing transparency effect.\r\n\r\n#### A good example\r\nThis example is one of the ideal and simple or basic examples.\r\n\r\n```kotlin\r\n// Based on oneself.\r\nAppBarConnection {\r\n  AppBar {\r\n    Box(modifier = Modifier.graphicsLayer {\r\n      alpha = it.expandedPercent()\r\n    }) {\r\n      // ... child\r\n    }\r\n  }\r\n}\r\n\r\n// Based on others.\r\n// See also, the second appbar depends on the state of the first appbar.\r\nAppBarConnection {\r\n  val first = rememberAppBarState()\r\n\r\n  AppBar(state = first) {\r\n    // ... skip\r\n  }\r\n  AppBar {\r\n    Box(modifier = Modifier.graphicsLayer {\r\n      alpha = first.shrinkedPercent()\r\n    }) {\r\n      // ... child\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n#### A bad example\r\nThis example is also one of the bad development habits that causes performance degradation.\r\n\r\n```kotlin\r\nAppBarConnection {\r\n  AppBar {\r\n    // This reduces performance, because re-composition when scrolled appbar.\r\n    Box(modifier = Modifier.alpha(it.expandedPercent())) {\r\n      // ... child\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n## How to customize appbar alignment?\r\nTry applying the `AppBarAlignment` that is a providing standard enumeration in this package.\r\n\r\n\u003e This alignment constants for only the hide-able appbar.\r\n\r\n```kotlin\r\nAppBarConnection(\r\n  AppBar(alignment = AppBarAlignment.Center) {}\r\n)\r\n```\r\n\r\n### properties of AppBarAlignment\r\n| Properie | Description\r\n| ------ | ------ |\r\n| Scroll | Display the same as the scroll item. (is Default Value)\r\n| Center | Based on the size of the appbar, the center is located at the center of the size of the appbar.\r\n| Absolute | Even if the appbar is reduced and expanded, the absolute position of the appbar does not change.\r\n\r\n## How to customize appbar?\r\nTry using the `MaterialAppBarBehavior` that is a providing standard feature in this package.\r\n\r\n```kotlin\r\nAppBarConnection {\r\n  AppBar(behavior = MaterialAppBarBehavior(floating = false, dragOnlyExpanding = true)) {}\r\n}\r\n```\r\n\r\n### properties of MaterialAppBarBehavior\r\n\u003e When the value of floating is true, the value of dragOnlyExpanding must be false.\r\n\r\n| Properie | Description | Default value | Type\r\n| ------ | ------ | ------ | ------\r\n| floating | Whether possible with the app bar expands or shrinks even if a user do not scroll to the highest upper (when scroll offset 0). | true | Boolean\r\n| dragOnlyExpanding | Whether only possible with drag when the user needs to start extending the appbar. | false | Boolean\r\n| alignment | Enables automatic alignment of the app bar after scrolling ends, snapping it to fully expanded or fully collapsed state. | true | Boolean\r\n| alignmentDuration | The duration of the automatic alignment animation in milliseconds. | 500 | Int\r\n| alignmentEasing | The easing curve applied to the automatic alignment animation. | Ease | Easing\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmttankkeo%2Fcompose_appbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmttankkeo%2Fcompose_appbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmttankkeo%2Fcompose_appbar/lists"}