{"id":21898500,"url":"https://github.com/canopas/compose-recyclerview","last_synced_at":"2025-04-04T15:09:24.038Z","repository":{"id":213650654,"uuid":"734605413","full_name":"canopas/compose-recyclerview","owner":"canopas","description":"Android - A jetpack compose list view that is backed by our all time favourite RecyclerView.","archived":false,"fork":false,"pushed_at":"2024-12-26T09:00:57.000Z","size":573,"stargazers_count":192,"open_issues_count":0,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T14:08:00.431Z","etag":null,"topics":["andriod","android-library","compose-ui","composer-library","drag-and-drop","draggable","jetpack-compose","jetpack-compose-tutorial","kotlin","kotlin-library","lazylist","recyclerview","recyclerview-adapter"],"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/canopas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2023-12-22T05:51:52.000Z","updated_at":"2025-01-18T16:03:32.000Z","dependencies_parsed_at":"2024-01-17T06:46:55.023Z","dependency_job_id":"b14a93ef-261c-4fe9-bcb2-2f41f8987e78","html_url":"https://github.com/canopas/compose-recyclerview","commit_stats":{"total_commits":34,"total_committers":3,"mean_commits":"11.333333333333334","dds":0.05882352941176472,"last_synced_commit":"f5f11e1f123f25399fbcbbdc578f737bcef8b8f7"},"previous_names":["cp-megh-l/compose-recyclerview"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Fcompose-recyclerview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Fcompose-recyclerview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Fcompose-recyclerview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canopas%2Fcompose-recyclerview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/canopas","download_url":"https://codeload.github.com/canopas/compose-recyclerview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198461,"owners_count":20900080,"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":["andriod","android-library","compose-ui","composer-library","drag-and-drop","draggable","jetpack-compose","jetpack-compose-tutorial","kotlin","kotlin-library","lazylist","recyclerview","recyclerview-adapter"],"created_at":"2024-11-28T14:32:53.643Z","updated_at":"2025-04-04T15:09:24.020Z","avatar_url":"https://github.com/canopas.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e \u003ca href=\"https://canopas.com/contact\"\u003e\u003cimg src=\"./cta/cta_banner.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n# ComposeRecyclerView\n\n**ComposeRecyclerView** enables seamless integration of Jetpack Compose composables within traditional RecyclerView. \nThis library addresses performance concerns and resolves issues commonly faced in Compose LazyList implementations. \nIt comes with built-in support for drag-and-drop functionality, making it a versatile solution for dynamic UIs.\n\n![ComposeRecyclerView](https://github.com/canopas/compose-recyclerview/assets/98312779/5d34dce0-dc5d-44ee-86fe-e0540bdbe753)\n\n\n\n## Benefits\n\n- **Improved Performance:** ComposeRecyclerView optimizes the rendering of Jetpack Compose items within a RecyclerView, providing better performance compared to LazyList implementations.\n\n- **Drag-and-Drop Support:** Built-in support for drag-and-drop functionality makes it easy to implement interactive and dynamic user interfaces.\n\n- **Flexible Configuration:** Customize the layout, item creation, and callbacks to fit your specific UI requirements.\n\n- **Multi-Item Type Support:** Easily handle multiple item types within the same RecyclerView, enhancing the versatility of your UI.\n\n\n## How to add in your project\n\nAdd the dependency ([Latest-Version](https://github.com/canopas/compose-recyclerview/releases/latest))\n\n```gradle\n implementation 'com.canopas:compose_recyclerview:\u003clatest-version\u003e'\n```\n\n\n## Sample Usage\n\nIntegrating **ComposeRecyclerView** into your Android app is a breeze! Follow these simple\nsteps to get started:\n\n\n**Implement ComposeRecyclerView:**\n\nUse the ComposeRecyclerView composable to create a RecyclerView with dynamically generated Compose items.\n```\nComposeRecyclerView(\n    modifier = Modifier.fillMaxSize(),\n    items = yourTotalItems, // Combination of lists in case of multiple items\n    itemBuilder = { index -\u003e\n        // Compose content for each item at the specified index\n        // Similar to Flutter's ListView.builder() widget\n        // Customize this block based on your UI requirements\n    },\n    onScrollEnd = {\n        // Callback triggered when the user reaches the end of the list during scrolling\n        // Add your logic to handle the end of the list, such as loading more data\n    },\n    itemTouchHelperConfig = {\n        nonDraggableItemTypes = setOf(yourHeaderItemType)\n        onMove = { recyclerView, viewHolder, target -\u003e\n            // Handle item move\n        }\n        onSwiped = { viewHolder, direction -\u003e\n            // Handle item swipe\n        }\n        dragDirs = UP or DOWN or START or END // Specify drag directions here\n        swipeDirs = LEFT or RIGHT // Specify swipe directions here\n        // Add more customization options as needed\n    }\n)\n```\n\n**Customize as Needed:**\n\nCustomize the layout, handle item types, and add drag-and-drop functionality based on your project requirements.\n\n```\nitemTypeBuilder = object : ComposeRecyclerViewAdapter.ItemTypeBuilder {\n    override fun getItemType(position: Int): Int {\n        // Determine the item type based on the position\n        // Customize this logic based on your requirements\n        return yourItemType\n    }\n}\n\nonItemMove = { fromPosition, toPosition, itemType -\u003e\n    // Update your data structure when an item is moved\n    // Customize this block based on your data structure\n}\n\nonDragCompleted = { position -\u003e\n    // Handle item drag completion (e.g., update the UI or perform an API call)\n    // Customize this block based on your requirements\n}\n```\n\n**Note:** To enable drag-and-drop functionality, passing a non-null `itemTypeBuilder` is mandatory.\n\n**Customize Layout (Optional):**\n\nYou can customize the layout of your RecyclerView as needed.\n```\nrecyclerView.layoutManager = LinearLayoutManager(context, RecyclerView.VERTICAL, false)\n// OR\nrecyclerView.layoutManager = GridLayoutManager(context, yourSpanCount)\n\n```\n\n## ComposeRecyclerView in Action: Creating Complex UIs with Drag-and-Drop\n\nhttps://github.com/canopas/compose-recyclerview/assets/98312779/861bf272-61bd-4bac-aaa5-47415d290913\n\n## Sample Implementation\n\n```\nconst val ITEM_TYPE_FIRST_HEADER = 0\nconst val ITEM_TYPE_FIRST_LIST_ITEM = 1\nconst val ITEM_TYPE_SECOND_HEADER = 2\nconst val ITEM_TYPE_SECOND_LIST_ITEM = 3\n\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            ComposeRecyclerViewTheme {\n                Surface(\n                    modifier = Modifier.fillMaxSize(),\n                    color = MaterialTheme.colorScheme.background\n                ) {\n                    val userDataList = List(20) { index -\u003e\n                        UserData(\n                            \"User ${index + 1}\",\n                            20 + index,\n                            if (index % 2 == 0) \"Male\" else \"Female\"\n                        )\n                    }\n\n                    val otherUsersDataList = List(20) { index -\u003e\n                        UserData(\n                            \"User ${index + 21}\",\n                            20 + index,\n                            if (index % 2 == 0) \"Male\" else \"Female\"\n                        )\n                    }\n\n                    ComposeRecyclerView(\n                        modifier = Modifier.fillMaxSize(),\n                        items = listOf(1) + userDataList + listOf(1) + otherUsersDataList,\n                        itemBuilder = { index -\u003e\n                            if (index == 0) {\n                                Box(\n                                    modifier = Modifier.fillMaxWidth(),\n                                    contentAlignment = Alignment.Center\n                                ) {\n                                    Text(\n                                        \"First List Header Composable\",\n                                        style = MaterialTheme.typography.titleMedium,\n                                        modifier = Modifier.padding(16.dp)\n                                    )\n                                }\n                                return@ComposeRecyclerView\n                            }\n\n                            val userIndex = index - 1\n                            if (userIndex \u003c userDataList.size) {\n                                CustomUserItem(user = userDataList[userIndex])\n                                return@ComposeRecyclerView\n                            }\n\n                            if (userIndex == userDataList.size) {\n                                Box(\n                                    modifier = Modifier.fillMaxWidth(),\n                                    contentAlignment = Alignment.Center\n                                ) {\n                                    Text(\n                                        \"Second List Header Composable\",\n                                        style = MaterialTheme.typography.titleMedium,\n                                        modifier = Modifier.padding(16.dp)\n                                    )\n                                }\n                                return@ComposeRecyclerView\n                            }\n\n                            val otherUserIndex = index - userDataList.size - 2\n                            if (otherUserIndex \u003c otherUsersDataList.size) {\n                                CustomUserItem(user = otherUsersDataList[otherUserIndex])\n                                return@ComposeRecyclerView\n                            }\n                        },\n                        onItemMove = { fromPosition, toPosition, itemType -\u003e\n                            // Update list when an item is moved\n                            when (itemType) {\n                                ITEM_TYPE_FIRST_HEADER -\u003e {\n                                    // Do nothing\n                                }\n\n                                ITEM_TYPE_FIRST_LIST_ITEM -\u003e {\n                                    val fromIndex = fromPosition - 1\n                                    val toIndex = toPosition - 1\n                                    Collections.swap(userDataList, fromIndex, toIndex)\n                                }\n\n                                ITEM_TYPE_SECOND_HEADER -\u003e {\n                                    // Do nothing\n                                }\n\n                                // ITEM_TYPE_SECOND_LIST_ITEM\n                                else -\u003e {\n                                    val fromIndex = fromPosition - userDataList.size - 2\n                                    val toIndex = toPosition - userDataList.size - 2\n                                    Collections.swap(otherUsersDataList, fromIndex, toIndex)\n                                }\n                            }\n                        },\n                        onDragCompleted = {\n                            // Update list or do API call when an item drag operation is completed\n                            Log.d(\"MainActivity\", \"onDragCompleted: $it\")\n                        },\n                        itemTypeBuilder = object : ComposeRecyclerViewAdapter.ItemTypeBuilder {\n                            override fun getItemType(position: Int): Int {\n                                // Determine the item type based on the position\n                                // You can customize this logic based on your requirements\n                                return when {\n                                    position == 0 -\u003e ITEM_TYPE_FIRST_HEADER // Header type\n                                    position \u003c= userDataList.size -\u003e ITEM_TYPE_FIRST_LIST_ITEM // First list item type\n                                    position == userDataList.size + 1 -\u003e ITEM_TYPE_SECOND_HEADER // Header type\n                                    else -\u003e ITEM_TYPE_SECOND_LIST_ITEM // Second list item type\n                                }\n                            }\n                        },\n                        onScrollEnd = {\n                            // Do API call when the user reaches the end of the list during scrolling\n                            Log.d(\"MainActivity\", \"onScrollEnd\")\n                        },\n                        itemTouchHelperConfig = {\n                            nonDraggableItemTypes =\n                                setOf(ITEM_TYPE_FIRST_HEADER, ITEM_TYPE_SECOND_HEADER)\n\n                            /*onMove = { recyclerView, viewHolder, target -\u003e\n                                // Handle item move\n                            }\n                            onSwiped = { viewHolder, direction -\u003e\n                                // Handle item swipe\n                            }\n                            // Add more customization options as needed*/\n                        },\n                    ) { recyclerView -\u003e\n                        recyclerView.addItemDecoration(\n                            DividerItemDecoration(\n                                recyclerView.context,\n                                DividerItemDecoration.VERTICAL\n                            )\n                        )\n\n                        // To change layout to grid layout\n                        val gridLayoutManager = GridLayoutManager(this, 2).apply {\n                            spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {\n                                override fun getSpanSize(position: Int): Int {\n                                    return if (position == 0 || position == userDataList.size + 1) {\n                                        2 // To show header title at the center of the screen and span across the entire screen\n                                    } else {\n                                        1\n                                    }\n                                }\n                            }\n                        }\n                        recyclerView.layoutManager = gridLayoutManager\n                    }\n                }\n            }\n        }\n    }\n}\n\n@Composable\nfun CustomUserItem(user: UserData) {\n    Card(\n        modifier = Modifier\n            .fillMaxWidth()\n            .padding(16.dp),\n        colors = CardDefaults.cardColors(\n            containerColor = Color.Black,\n            contentColor = Color.White\n        ),\n        elevation = CardDefaults.cardElevation(\n            defaultElevation = 8.dp\n        ),\n        shape = RoundedCornerShape(8.dp)\n    ) {\n        Column(\n            modifier = Modifier\n                .padding(16.dp)\n        ) {\n            Text(\n                text = \"Name: ${user.name}\",\n                style = MaterialTheme.typography.titleMedium,\n                color = Color.White\n            )\n            Spacer(modifier = Modifier.height(8.dp))\n            Text(\n                text = \"Age: ${user.age}\",\n                style = MaterialTheme.typography.titleMedium,\n                color = Color.White\n            )\n            Spacer(modifier = Modifier.height(8.dp))\n            Text(\n                text = \"Gender: ${user.gender}\",\n                style = MaterialTheme.typography.titleMedium,\n                color = Color.White\n            )\n        }\n    }\n}\n\n```\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n       \u003cb\u003eLinear Layout\u003c/b\u003e\n       \u003cbr /\u003e\n       \u003cbr /\u003e\n      \u003cimg src=\"https://github.com/canopas/compose-recyclerview/assets/98312779/4e5e7cb0-4f2c-4fdb-ac0c-03a153ab962d\"  width=\"80%\" height=\"80%\"\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n       \u003cb\u003eGrid Layout\u003c/b\u003e\n       \u003cbr /\u003e\n       \u003cbr /\u003e\n      \u003cimg src=\"https://github.com/canopas/compose-recyclerview/assets/98312779/7d5cfe34-1652-4c06-8919-5cec4b594f24\"  width=\"80%\" height=\"80%\"\u003e\n    \u003c/td\u003e\n\n  \u003c/tr\u003e  \n\u003c/table\u003e\n\n\n## Demo\n\nTo see **ComposeRecyclerView** in action, check out\nour [Sample](https://github.com/canopas/compose-recyclerview/tree/master/sample-app) app.\n\n## Bugs and Feedback\n\nFor bugs, questions and discussions please use\nthe [Github Issues](https://github.com/canopas/compose-recyclerview/issues)\n\n## Credits\n\n**ComposeRecyclerView** is owned and maintained by the [Canopas team](https://canopas.com/). You can follow them on X at [@canopassoftware](https://x.com/canopassoftware) for project updates and releases. If you are interested in building apps or designing products, please let us know. We'd love to hear from you!\n\n\u003ca href=\"https://canopas.com/contact\"\u003e\u003cimg src=\"./cta/cta_btn.png\" width=300\u003e\u003c/a\u003e\n\n## Acknowledgments\n\n**Jetpack Compose Interop Article:** We express our appreciation to the [Jetpack Compose Interop Article](https://medium.com/androiddevelopers/jetpack-compose-interop-using-compose-in-a-recyclerview-569c7ec7a583) on Medium\nby Chris Arriola. This article provided valuable insights and guidance on supporting Jetpack Compose in RecyclerView, helping us understand the intricacies of integration and contributing to the realization of our own ideas.\n\n# Licence\n\n```\nCopyright 2023 Canopas Software LLP\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nYou won't be using this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanopas%2Fcompose-recyclerview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcanopas%2Fcompose-recyclerview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanopas%2Fcompose-recyclerview/lists"}