{"id":22957963,"url":"https://github.com/sergio11/fudge_tv_compose_library","last_synced_at":"2025-08-13T04:33:02.397Z","repository":{"id":254308393,"uuid":"189831547","full_name":"sergio11/fudge_tv_compose_library","owner":"sergio11","description":"🍮 Fudge is a Jetpack Compose UI Kit for TV apps, offering pre-built components and tools to create seamless and engaging experiences on the big screen. 🎬 Simplify your TV app development with Fudge! 🚀","archived":false,"fork":false,"pushed_at":"2025-03-26T17:49:45.000Z","size":231,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T18:38:59.212Z","etag":null,"topics":["android-architecture","android-library","android-ui","androidmaterialdesign","androidtv","githubpackages","jetpack-compose","jetpackcompose","mvi-android","mvi-architecture","mvi-clean-architecture"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":false,"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/sergio11.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":"2019-06-02T10:12:12.000Z","updated_at":"2025-03-26T17:49:49.000Z","dependencies_parsed_at":"2024-08-22T18:18:15.996Z","dependency_job_id":"49fe2479-2b1e-418a-bfbf-ee55c845f1ca","html_url":"https://github.com/sergio11/fudge_tv_compose_library","commit_stats":null,"previous_names":["sergio11/fudge_tv_compose_library"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sergio11/fudge_tv_compose_library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergio11%2Ffudge_tv_compose_library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergio11%2Ffudge_tv_compose_library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergio11%2Ffudge_tv_compose_library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergio11%2Ffudge_tv_compose_library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sergio11","download_url":"https://codeload.github.com/sergio11/fudge_tv_compose_library/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergio11%2Ffudge_tv_compose_library/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270182797,"owners_count":24541310,"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-13T02:00:09.904Z","response_time":66,"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":["android-architecture","android-library","android-ui","androidmaterialdesign","androidtv","githubpackages","jetpack-compose","jetpackcompose","mvi-android","mvi-architecture","mvi-clean-architecture"],"created_at":"2024-12-14T17:33:56.898Z","updated_at":"2025-08-13T04:33:01.417Z","avatar_url":"https://github.com/sergio11.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🍮 Fudge: Jetpack Compose TV UI Kit 🎬\n\n**Fudge** is a 🌟 Jetpack Compose library module designed to make the development of TV interfaces and applications smoother and sweeter. Tailored specifically for the unique needs of TV UIs, Fudge offers a collection of pre-built components and tools that help you create immersive and user-friendly experiences on large screens.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Android%20Studio-3DDC84.svg?style=for-the-badge\u0026logo=android-studio\u0026logoColor=white\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/kotlin-%237F52FF.svg?style=for-the-badge\u0026logo=kotlin\u0026logoColor=white\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Android-3DDC84?style=for-the-badge\u0026logo=android\u0026logoColor=white\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Material%20UI-007FFF?style=for-the-badge\u0026logo=mui\u0026logoColor=white\" /\u003e\n\u003c/p\u003e\n\nI want to express my deepest gratitude to the creators of **[JetFit](https://github.com/TheChance101/tv-samples/tree/JetFit/JetFit)** and the contributors to **[PR #183](https://github.com/android/tv-samples/pull/183)** for providing an invaluable foundation for this project. This initiative aims to offer an open-source implementation inspired by JetFit, following the **Apache 2.0** license.  \n\nI would also like to extend my sincere appreciation to **[Umair Khalid](https://github.com/UmairKhalid786)** for his outstanding work on the **[ComposeTv](https://github.com/UmairKhalid786/ComposeTv)** repository. His well-structured code and clear documentation have been essential resources throughout this process, enabling me to learn and apply new techniques in Jetpack Compose development.  \n\nA huge thank you to the community for their efforts and contributions to the open-source ecosystem. I hope this project can also be a valuable resource for other developers! 🚀🙏  \n\n## ⚠️ Disclaimer  \n\nThis project has been developed **exclusively for learning and experimentation purposes**. **Fudge** is an exploratory Jetpack Compose UI kit designed to gain insights into TV interface development, focus management, and state handling in Android applications.  \n\n\n### Features 🎉\n\n- **Pre-defined Components:** Fudge provides a range of ready-to-use components optimized for TV, including focusable buttons, lists, and custom navigation drawers, ensuring your app looks and performs beautifully on the big screen.\n- **Focus Management:** Built with TV in mind, Fudge simplifies focus handling and navigation, making it easier to manage remote control interactions.\n- **State Management:** Supports advanced screen state management by implementing patterns like MVI (Model-View-Intent) or MVVM (Model-View-ViewModel), delivering fluid and responsive UIs.\n- **Customization:** Fudge components are highly customizable, allowing you to adapt them to match the unique style and branding of your TV application.\n- **Jetpack Compose Compatibility:** Fully integrated with Jetpack Compose, the modern Android UI framework, ensuring a seamless and efficient development experience tailored for TV platforms.\n\n## Model-View-Intent (MVI) Architecture 🏗️\n\nFudge encourages the use of the Model-View-Intent (MVI) architecture pattern for effective screen state management. In this pattern:\n\n- **Model:** Represents the state of the UI. Fudge provides a `FudgeTvViewModel` class that extends from `ViewModel` and handles the UI state.\n- **View:** Renders the UI based on the state provided by the ViewModel. Fudge components are seamlessly integrated with Compose to create a declarative UI.\n- **Intent:** Represents user actions or events that trigger state changes. Fudge's components, like buttons and text fields, are designed to emit these intents efficiently.\n\nThis setup leverages Fudge's components and ViewModel to accelerate the development of robust features while adhering to best practices in architecture and UI design.\n\nHere's an example of how you can use FudgeTv components in a screen following the MVI pattern:\n\n```kotlin\n@Composable\nfun SignInScreen(\n    viewModel: SignInViewModel = hiltViewModel(),\n    onGoToHome: () -\u003e Unit,\n    onGoToProfiles: () -\u003e Unit,\n    onGoToSignUp: () -\u003e Unit,\n    onBackPressed: () -\u003e Unit,\n) {\n    FudgeTvScreen(\n        viewModel = viewModel,\n        onBackPressed = onBackPressed,\n        onInitialUiState = { SignInUiState() },\n        onSideEffect = {\n            when(it) {\n                SignInSideEffects.AuthenticationSuccessfully -\u003e onGoToHome()\n                SignInSideEffects.ProfileSelectionRequired -\u003e onGoToProfiles()\n                SignInSideEffects.CreateNewAccount -\u003e onGoToSignUp()\n            }\n        }\n    ) { uiState -\u003e\n        SignInScreenContent(\n            uiState = uiState,\n            actionListener = viewModel\n        )\n    }\n}\n```\n\nInside the SignInScreen function, there's a FudgeTvScreen composable. This is a custom screen component provided by the FudgeTV library. It's responsible for managing the UI state and handling side effects in a declarative way. Here's what each parameter does:\n\n- **viewModel:** The **SignInViewModel** instance passed to the **FudgeTvScreen** component.\n- **onBackPressed:** The lambda function passed to the **FudgeTvScreen** component, which is called when the user navigates back from the screen.\n- **onInitialUiState:** A lambda function that provides the initial UI state for the screen. In this case, it returns a new instance of **SignInUiState.**\n- **onSideEffect:** A lambda function that handles side effects triggered by the ViewModel. When a side effect occurs (such as successful authentication or profile selection required), this function is called, and appropriate actions (navigating to home or profile selection) are performed.\n\nFinally, inside the FudgeTvScreen composable, there's another composable function called **SignInScreenContent.** This is the actual content of the sign-in screen, where UI elements like text fields, buttons, etc., are defined. It takes the current UI state (uiState) as a parameter and callback functions for handling user interactions:\n\n- **uiState:** The current state of the sign-in screen, which is provided by the FudgeTvScreen component.\n- **onEmailChanged:** A callback function for handling changes in the email input field.\n- **onPasswordChanged:** A callback function for handling changes in the password input field.\n- **onSignIn:** A callback function for handling the sign-in action.\n\nOverall, this implementation follows a declarative approach using Compose and Fudge components, making it easier to manage the UI state and handle user interactions in a clear and concise manner.\n\n```kotlin\n@Composable\ninternal fun SignInScreenContent(\n    uiState: SignInUiState,\n    actionListener: SignInScreenActionListener\n) {\n    FudgeTvScreenContent(\n        error = uiState.errorMessage,\n        onErrorAccepted = actionListener::onErrorMessageCleared\n    ) {\n        SignInDialog(uiState = uiState)\n        SignInVideoBackground()\n        SignInLogo()\n        Column(\n            modifier = Modifier\n                .fillMaxHeight()\n                .fillMaxWidth(0.9f),\n            verticalArrangement = Arrangement.Center,\n        ) {\n            SignInMainContent(\n                uiState = uiState,\n                onEmailChanged = actionListener::onEmailChanged,\n                onPasswordChanged = actionListener::onPasswordChanged,\n                onSigInPressed = actionListener::onSigInPressed\n            )\n            SignInSecondaryContent(onGoToSignUp = actionListener::onGoToSignUp)\n        }\n    }\n}\n```\n\nThis is a Composable function named **SignInScreenContent**, responsible for rendering the content of the sign-in screen. It takes the following parameters:\n\n- **uiState:** The current state of the sign-in screen, containing properties like isLoading, email, and password.\n- **onEmailChanged:** A callback function that will be invoked when the email input field changes.\n- **onPasswordChanged:** A callback function that will be invoked when the password input field changes.\n- **onSignIn:** A callback function that will be invoked when the user clicks the sign-in button.\n\nThe **FudgeTvScreenContent** composable is used to create a screen layout. It takes a title resource as a parameter.\n\nOverall, the **SignInScreenContent** composable is responsible for rendering the content of the sign-in screen using Fudge's components. It ensures a consistent UI design and handles user interactions efficiently through callback functions.\n\n## Using FudgeTV UI Library\n\n### Step 1: Configuring Maven Repository\n\nEnsure to add the GitHub Maven repository to your `build.gradle` or `settings.gradle` file to access the dependency hosted on GitHub Packages:\n\n```kotlin\nrepositories {\n    maven {\n        url = uri(\"https://maven.pkg.github.com/sergio11/fudge_tv_compose_library\")\n        credentials {\n            // Here, set your authentication credentials\n            username = githubProperties[\"gpr.usr\"] as String? ?: System.getenv(\"GPR_USER\")\n            password = githubProperties[\"gpr.key\"] as String? ?: System.getenv(\"GPR_API_KEY\")\n        }\n    }\n}\n```\n\n### Step 2: Adding the Dependency to the Project\nOnce the repository is configured, you can add the \"Fudge: Jetpack Compose TV UI Kit\" dependency to your project.\n\n```\nfudge-tv-compose = \"CURRENT_VERSION\"\nfudge-tv-compose = { module = \"com.dreamsoftware.libraries:fudge-tv-compose\", version.ref = \"fudge-tv-compose\" }\n```\n\n```kotin\nimplementation(libs.fudge.tv.compose)\n```\n\n## ⚠️ Disclaimer  \n\nThis project has been developed **exclusively for learning and experimentation purposes**. **Fudge** is an exploratory Jetpack Compose UI kit designed to gain insights into TV interface development, focus management, and state handling in Android applications.  \n\n## 🎖️ Recognition \u0026 Credits  \n\nSpecial thanks to the open-source community and the contributors who have made this project possible.\n\nI want to express my deepest gratitude to the creators of **[JetFit](https://github.com/TheChance101/tv-samples/tree/JetFit/JetFit)** and the contributors to **[PR #183](https://github.com/android/tv-samples/pull/183)** for providing an invaluable foundation for this project. This initiative aims to offer an open-source implementation inspired by JetFit, following the **Apache 2.0** license.  \n\nI would also like to extend my sincere appreciation to **[Umair Khalid](https://github.com/UmairKhalid786)** for his outstanding work on the **[ComposeTv](https://github.com/UmairKhalid786/ComposeTv)** repository. His well-structured code and clear documentation have been essential resources throughout this process, enabling me to learn and apply new techniques in Jetpack Compose development.  \n\nA huge thank you to the community for their efforts and contributions to the open-source ecosystem. I hope this project can also be a valuable resource for other developers! 🚀🙏  \n\n## Visitors Count\n\n\u003cimg width=\"auto\" src=\"https://profile-counter.glitch.me/fudge_tv_compose_library/count.svg\" /\u003e\n\n\n## License ⚖️\n\nThis project is licensed under the **Apache License 2.0**, a permissive open-source software license that allows developers to freely use, modify, and distribute the software. 🚀 This includes both personal and commercial use, with some conditions for distribution and modification. 📜\n\nKey terms of the Apache License 2.0:\n\n- You are allowed to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software. 💻\n- If you modify and distribute the software, you must include the original copyright notice, provide a copy of the Apache 2.0 license, and indicate any modifications made. 📝\n- You are not allowed to use the name of the project or its contributors to promote derived works without permission. ✋\n- The software is provided \"as is,\" without any warranties, express or implied. 🚫🛡️\n\nPlease see the full license text below for more detailed terms.\n\n```\nApache License Version 2.0, January 2004 http://www.apache.org/licenses/\n\nCopyright (c) 2024 Dream software - Sergio Sánchez\n\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use this file except in compliance with the License. You may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergio11%2Ffudge_tv_compose_library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsergio11%2Ffudge_tv_compose_library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergio11%2Ffudge_tv_compose_library/lists"}