{"id":21851486,"url":"https://github.com/alielderawi/motionbuttonanimator","last_synced_at":"2026-05-07T20:02:25.215Z","repository":{"id":263056290,"uuid":"878893857","full_name":"AliElDerawi/MotionButtonAnimator","owner":"AliElDerawi","description":"A custom animated progress button with sleek transitions for Idle, Loading, and Completed states. Features MVVM architecture, MotionScene animations, notifications, and reactive UI using DataBindingAdapter and Observable.","archived":false,"fork":false,"pushed_at":"2025-01-06T18:40:03.000Z","size":1520,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-26T13:13:38.477Z","etag":null,"topics":["animation","binding-adapter","clean-architecture","customview","design","design-patterns","kotlin-android","motion","mvvm-architecture","reactive-programming","reactive-ui","reactiveui"],"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/AliElDerawi.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-10-26T11:59:48.000Z","updated_at":"2025-01-06T18:39:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"a5107c9f-5fab-484e-a6c1-a8c703061964","html_url":"https://github.com/AliElDerawi/MotionButtonAnimator","commit_stats":null,"previous_names":["alielderawi/animatedprogressbutton","alielderawi/motionbuttonanimator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliElDerawi%2FMotionButtonAnimator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliElDerawi%2FMotionButtonAnimator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliElDerawi%2FMotionButtonAnimator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliElDerawi%2FMotionButtonAnimator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AliElDerawi","download_url":"https://codeload.github.com/AliElDerawi/MotionButtonAnimator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244844536,"owners_count":20519793,"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":["animation","binding-adapter","clean-architecture","customview","design","design-patterns","kotlin-android","motion","mvvm-architecture","reactive-programming","reactive-ui","reactiveui"],"created_at":"2024-11-28T01:08:21.593Z","updated_at":"2026-05-07T20:02:25.133Z","avatar_url":"https://github.com/AliElDerawi.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MotionButtonAnimator [![Build Status][ci-image]][ci]\n\n**\"A Custom Animated Progress View (Button) app that animates three statuses of the Button: Idle, Loading, and Completed, with a sleek design, also showcasing a clean architecture.\"**\n\nMotionButtonAnimator is an app designed to help developers craft an animated view for a download button, featuring a custom design and animation. It allows you to control the view's three statuses, Idle, Progress, and Completed, using XML. The project also uses MotionScene to animate views after opening a fragment. This project is part of the **Udacity Android Kotlin Developer Nanodegree Program**.\n\n## Why This Project?\n\nThis project showcases the ability to build custom views, work with **Animators** and **MotionScene**, handle fragment navigation, work with dependency injection, and implement a clean and maintainable MVVM architecture—all critical skills for a mid-senior Android developer.\n\n## Main Features of the Project\n\n- **MVVM Architecture**: Implements an MVVM pattern for clean, maintainable architecture.\n- **Custom View**: Creates a custom animated view (button) that can change its attributes using XML.\n- **MotionScene**: Implements MotionScene to animate views in the download detail fragment.\n- **Orientation Support**: Adapts to portrait and landscape orientations without losing data.\n- **Notification Handling**: Displays and handles notifications for all Android versions.\n- **Modern UI**: Uses a single-activity architecture with multiple fragments.\n- **Download Manager**: Uses a download manager to download from a URL.\n- **Dependency Injection**: Koin (v4) used for better modularity and testability.\n- **Reactive UI**: Uses DataBindingAdapter and Observable for a reactive user experience.\n\n## See It in Action\n\nWatch the custom animated progress button transition between Idle, Loading, and Completed states. This GIF demonstrates the sleek animations and the MotionScene implementation.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/project_showcase.gif\" height=\"666\" alt=\"Project Showcase\"/\u003e\n  \u003cp\u003e\u003cstrong\u003eProject Showcase\u003c/strong\u003e\u003cbr\u003eTransitions between Idle, Loading, and Completed states, also MotionScene for Views.\u003c/p\u003e\n\u003c/div\u003e\n\n\n## Project Resources\n\n- [Starter Project Code](https://github.com/udacity/nd940-c3-advanced-android-programming-project-starter): Get the starter code for the project.\n- [Project Rubric](https://docs.google.com/document/d/1xmW1wM-Ch1pa3Ldoz5TBd-9qXCTSv9LfX2ZOECJrJjE/edit?usp=sharing): View the project rubric.\n- [Android Kotlin Developer Nanodegree Program](https://www.udacity.com/course/android-kotlin-developer-nanodegree--nd940): Learn more about the full program and its related projects.\n\n#### **Note**: Many improvements and features in this project are not included in the Project Rubric as it was initially a project for the Udacity Nanodegree Program.\n\n## Snapshots from the App\n\n### Phone Screens (Portrait)  \n\n\u003cdiv align=\"center\"\u003e\n\u003ctable style=\"width: 100%; table-layout: fixed;\"\u003e\n\u003ctr\u003e\n \u003ctd align=\"center\" style=\"width: 50%;\"\u003e\n   \u003cimg src=\"./images/select_download_screen.jpg\" height=\"666\" alt=\"Select Download URL Screen\"/\u003e\n   \u003cp\u003e\u003cstrong\u003eSelect Download URL Screen\u003c/strong\u003e\u003cbr\u003eSelect a URL for downloading, using MVVM to save and update the status dynamically.\u003c/p\u003e\n \u003c/td\u003e\n \u003ctd align=\"center\" style=\"width: 50%;\"\u003e\n   \u003cimg src=\"./images/project_showcase.gif\" height=\"666\" alt=\"Project Showcase\"/\u003e\n   \u003cp\u003e\u003cstrong\u003eProject Showcase\u003c/strong\u003e\u003cbr\u003eView transitions between Idle, Loading, and Completed states, also MotionScene for Views.\u003c/p\u003e\n \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\u003c/div\u003e\n\n### Phone Screens (Landscape)  \n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./images/select_download_screen_landscape.jpg\" width=\"666\" height=\"300\" alt=\"Select Download URL Screen in Landscape Mode\"/\u003e\n\u003cp\u003e\u003cstrong\u003eSelect Download URL Screen in Landscape Mode\u003c/strong\u003e\u003cbr\u003eOptimized for a seamless landscape viewing experience.\u003c/p\u003e\n\u003c/div\u003e  \n\n## Customization\n\n\u003cdiv align=\"center\"\u003e\n\n### Some Attributes\n\n| Option Name        | Format  | Description                                          |\n| ------------------ | ------- | ---------------------------------------------------- |\n| buttonIdleColor    | `color` | Sets the Idle color of the button                    |\n| buttonLoadingColor | `color` | Sets the loading fill color of the button            |\n| circleLoadingColor | `color` | Sets the color of the loading circle                 |\n| textAllCaps        | `bool`  | Controls button text capitalization (default: false) |\n| textStyling        | `enum`  | Choose between normal, bold, italic, bold_italic     |\n| cornerSize         | `dimen` | Sets the corner radius of the button                 |\n| textSize           | `dimen` | Sets the text size of the button                     |\n\n\u003c/div\u003e  \n\n**Here is an example of how to use these attributes in XML:**\n\n```xml\n\u003ccom.udacity.util.AnimatedProgressButton\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"wrap_content\"\n    app:buttonIdleColor=\"@color/idle_color\"\n    app:buttonLoadingColor=\"@color/loading_color\"\n    app:circleLoadingColor=\"@color/circle_color\"\n    app:textAllCaps=\"false\"\n    app:textStyling=\"bold\"\n    app:cornerSize=\"8dp\"\n    app:textSize=\"16sp\" /\u003e\n```\n\n## Installation Guide\n\nThis project doesn't require any previous setup. Follow these steps to run the app:\n\n1. **Clone the Repository**: Clone the project repository using Git.\n2. **Open in Android Studio**: Open the project in **Android Studio Ladybug (2024.2.1 Patch 2)** or later.\n3. **Build the Project**: Use **Gradle Plugin v8.7.2** to build the project.\n\n**Note:** Ensure you have the latest version of Android Studio and the Gradle build tool installed. Please look at the [official guide](https://developer.android.com/studio/install) if needed.\n\n## Included External Libraries\n\n- **[Koin (v4)](https://github.com/InsertKoinIO/koin)**: Dependency injection framework, allowing modularity and making the project easier to test.\n- **[Timber](https://github.com/JakeWharton/timber)**: A lightweight logging utility for debugging purposes.\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request for improvements or bug fixes. Please feel free to reach out if you want to add more features, such as custom animations, or expand on the MVVM pattern.\n\n### How to Contribute\n\n- **Fork the Repository**: Click the \"Fork\" button at the top.\n- **Create a Feature Branch**: Branch off from `main` for any features (`git checkout -b feature/your-feature`).\n- **Submit a Pull Request**: Submit a PR describing your changes.\n\n## Contact\n\nFeel free to reach out for any collaboration opportunities or if you have any questions. I'd love to hear your thoughts and contributions!\nCheck my **[GitHub profile](https://github.com/AliElDerawi)**.\n\n## License\n\nThis project is open-source and licensed under the Apache 2.0 License. The LICENSE file in this repository provides more details.\n\n[ci-image]: https://img.shields.io/github/actions/workflow/status/AliElDerawi/MotionButtonAnimator/android-kotlin-ci.yml?label=Build%20Status\u0026logo=github\n[ci]: https://github.com/AliElDerawi/MotionButtonAnimator/actions?query=workflow%3ABuild\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falielderawi%2Fmotionbuttonanimator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falielderawi%2Fmotionbuttonanimator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falielderawi%2Fmotionbuttonanimator/lists"}