{"id":20881465,"url":"https://github.com/js-bhavyansh/bottombar","last_synced_at":"2026-03-07T23:01:45.214Z","repository":{"id":243347326,"uuid":"811348800","full_name":"js-bhavyansh/BottomBar","owner":"js-bhavyansh","description":"A Jetpack Compose project featuring a swipeable bottom navigation bar for seamless and intuitive app navigation.","archived":false,"fork":false,"pushed_at":"2024-08-30T08:24:34.000Z","size":115,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-29T14:42:41.367Z","etag":null,"topics":["android","android-app","android-application","android-studio","bottom-navigation","bottombar","bottomnavigationbar","bottomnavigationview","jetpack","jetpack-android","jetpack-compose","jetpack-compose-navigation","jetpack-navigation","kotlin","kotlin-android","kotlin-language","swipeable","swipeable-bottom-bar"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/js-bhavyansh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-06-06T12:27:28.000Z","updated_at":"2025-04-11T02:50:17.000Z","dependencies_parsed_at":"2024-10-21T10:02:04.846Z","dependency_job_id":null,"html_url":"https://github.com/js-bhavyansh/BottomBar","commit_stats":null,"previous_names":["bhavyansh03-tech/bottombar","js-bhavyansh/bottombar"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/js-bhavyansh/BottomBar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FBottomBar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FBottomBar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FBottomBar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FBottomBar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/js-bhavyansh","download_url":"https://codeload.github.com/js-bhavyansh/BottomBar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FBottomBar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30236043,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T19:01:10.287Z","status":"ssl_error","status_checked_at":"2026-03-07T18:59:58.103Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["android","android-app","android-application","android-studio","bottom-navigation","bottombar","bottomnavigationbar","bottomnavigationview","jetpack","jetpack-android","jetpack-compose","jetpack-compose-navigation","jetpack-navigation","kotlin","kotlin-android","kotlin-language","swipeable","swipeable-bottom-bar"],"created_at":"2024-11-18T07:24:58.009Z","updated_at":"2026-03-07T23:01:45.195Z","avatar_url":"https://github.com/js-bhavyansh.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bottom Navigation with Swipeable Screens in Jetpack Compose\n\nThis repository showcases an Android application featuring a bottom navigation bar that navigates between screens. Additionally, it implements a horizontal pager to make the screens swipeable, all using Jetpack Compose and Kotlin.\n\n## Features\n\n- **Bottom Navigation Bar**: Navigate between different screens using a bottom navigation bar.\n- **Swipeable Screens**: Swipe horizontally to switch between screens using a horizontal pager.\n- **Jetpack Compose**: Utilizes Jetpack Compose for modern, declarative UI design.\n- **Kotlin**: Written entirely in Kotlin, leveraging its powerful features for Android development.\n\n\n## Screenshots\n\n\u003cdiv style=\"display: flex; justify-content: center; align-items: center;\"\u003e\n    \u003cimg src=\"https://github.com/Bhavyansh03-tech/BottomBar/assets/96388594/f708a1ac-f329-44c5-ad0d-b3d92846fefc\" alt=\"First Screenshot\" style=\"width: 200px; height: auto; margin-right: 10px;\"\u003e\n    \u003cimg src=\"https://github.com/Bhavyansh03-tech/BottomBar/assets/96388594/d0e55ab5-6faa-4a96-b9e3-d03ea90abdfd\" alt=\"Second Screenshot\" style=\"width: 200px; height: auto;\"\u003e\n\u003c/div\u003e\n\n\n## Getting Started\n\n### Installation\n\n1. **Clone the repository**:\n    ```sh\n    git clone https://github.com/Bhavyansh03-tech/BottomBar.git\n    ```\n2. **Open the project in Android Studio**:\n    - File \u003e Open \u003e Select the cloned project directory.\n\n3. **Build the project**:\n    - Ensure that the necessary dependencies are downloaded and configured by building the project via Build \u003e Make Project.\n\n### Usage\n\n1. **Setup Bottom Navigation**:\n    - Define the navigation items and their corresponding screens.\n\n    ```kotlin\n    data class BottomNavItems(\n    val title: String,\n    val selectedIcon: ImageVector,\n    val unselectedIcon: ImageVector,\n    val hasNews: Boolean,\n    val badgeCount: Int\n    )\n    \n    val bottomNavItemList = listOf(\n        BottomNavItems(\n            title = \"Home\",\n            selectedIcon = Icons.Filled.Home,\n            unselectedIcon = Icons.Outlined.Home,\n            hasNews = false,\n            badgeCount = 0\n        ),\n        BottomNavItems(\n            title = \"Search\",\n            selectedIcon = Icons.Filled.Search,\n            unselectedIcon = Icons.Outlined.Search,\n            hasNews = false,\n            badgeCount = 0\n        ),\n        BottomNavItems(\n            title = \"Notifications\",\n            selectedIcon = Icons.Filled.Notifications,\n            unselectedIcon = Icons.Outlined.Notifications,\n            hasNews = false,\n            badgeCount = 15\n        ),\n        BottomNavItems(\n            title = \"Profile\",\n            selectedIcon = Icons.Filled.Person,\n            unselectedIcon = Icons.Outlined.Person,\n            hasNews = true,\n            badgeCount = 0\n        )\n    \n    )\n    ```\n\n    - Implement the bottom navigation bar in your main composable function.\n\n    ```kotlin\n      val navController = rememberNavController()\n      BottomNavGraph(navController = navController)\n      val pagerState = rememberPagerState(pageCount = { bottomNavItemList.size })\n\n      Scaffold(\n        bottomBar = {\n          BottomBar(navController = navController, pagerState = pagerState)\n        }\n      ) { paddingValues -\u003e\n          SwipeableBottomBar(pagerState = pagerState, paddingValues = paddingValues, navController = navController)\n      }\n    ```\n\n2. **Implement Horizontal Pager**:\n    - Use `HorizontalPager` from Accompanist library to create swipeable screens.\n\n    ```kotlin\n    @Composable\n    fun SwipeableBottomBar(\n        pagerState: PagerState,\n        paddingValues: PaddingValues,\n        navController: NavHostController\n    ) {\n    \n        val navBackStackEntry by navController.currentBackStackEntryAsState()\n        val currentRoute = navBackStackEntry?.destination?.route\n    \n        HorizontalPager(\n            state = pagerState,\n            modifier = Modifier\n                .fillMaxSize()\n                .padding(bottom = paddingValues.calculateBottomPadding()),\n            userScrollEnabled = true\n        ) { page -\u003e\n            when (page) {\n                0 -\u003e HomeScreen(navController = navController)\n                1 -\u003e SearchScreen(navController = navController)\n                2 -\u003e NotificationScreen(navController = navController)\n                3 -\u003e ProfileScreen(navController = navController)\n            }\n        }\n    \n        // Observe the pager state and update the navigation bar accordingly\n        LaunchedEffect(pagerState) {\n            snapshotFlow { pagerState.currentPage }.collect { page -\u003e\n                val newRoute = bottomNavItemList[page].title.lowercase()\n                if (currentRoute != newRoute) {\n                    navController.navigate(newRoute) {\n                        popUpTo(navController.graph.startDestinationId) {\n                            saveState = true\n                        }\n                        launchSingleTop = true\n                        restoreState = true\n                    }\n                }\n            }\n        }\n    \n    }\n    ```\n\n3. **Combining Navigation and Pager**:\n    - Sync the bottom navigation with the horizontal pager to provide a cohesive user experience.\n\n    ```kotlin\n    @Composable\n    fun BottomBar(\n        navController: NavHostController,\n        pagerState: PagerState\n    ) {\n    \n        val navBackStackEntry by navController.currentBackStackEntryAsState()\n        val currentRoute = navBackStackEntry?.destination?.route\n        val coroutineScope = rememberCoroutineScope()\n    \n        NavigationBar {\n    \n            bottomNavItemList.forEachIndexed { index, item -\u003e\n    \n                val isSelected = currentRoute == item.title.lowercase()\n    \n                NavigationBarItem(\n                    selected = isSelected,\n                    onClick = {\n                        coroutineScope.launch {\n                            pagerState.scrollToPage(index) // Scroll pager to the selected page without animation\n                        }\n                        navController.navigate(item.title.lowercase()) {\n                            popUpTo(navController.graph.startDestinationId) {\n                                saveState = true\n                            }\n                            launchSingleTop = true\n                            restoreState = true\n                        }\n                    },\n                    icon = {\n                        BadgedBox(\n                            badge = {\n                                if (item.badgeCount \u003e 0) {\n                                    Text(text = item.badgeCount.toString())\n                                } else if (item.hasNews) {\n                                    Badge()\n                                }\n                            }) {\n                            Icon(\n                                imageVector = if (isSelected) item.selectedIcon else item.unselectedIcon,\n                                contentDescription = item.title\n                            )\n                        }\n                    },\n                    label = {\n                        Text(text = item.title)\n                    }\n                )\n            }\n        }\n    \n    }\n    ```\n\n### Project Structure\n\n- `MainActivity.kt`: The main entry point of the app.\n- `navigation/`: Contains navigation logic using Jetpack Compose.\n- `ui/`: Contains the composable functions and UI components for different screens.\n\n## Contributing\n\nContributions are welcome! Please fork the repository and use a feature branch. Pull requests are warmly welcome.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a pull request\n\n## Acknowledgements\n\n- Inspiration from various Android development tutorials and documentation.\n\n## Contact\n\nFor questions or feedback, please contact [@Bhavyansh03-tech](https://github.com/Bhavyansh03-tech) on GitHub or connect with me on [LinkedIn](https://www.linkedin.com/in/bhavyansh03/).\n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-bhavyansh%2Fbottombar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjs-bhavyansh%2Fbottombar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-bhavyansh%2Fbottombar/lists"}