{"id":13428932,"url":"https://github.com/burhanrashid52/YoutubeUX","last_synced_at":"2025-03-16T02:31:02.267Z","repository":{"id":59784490,"uuid":"127247984","full_name":"burhanrashid52/YoutubeUX","owner":"burhanrashid52","description":"With MVVM Architecture pattern using Android Architecture Components This is a sample app demonstrating Youtube player animation using constraint layout ","archived":false,"fork":false,"pushed_at":"2021-03-19T12:33:38.000Z","size":18274,"stargazers_count":863,"open_issues_count":1,"forks_count":139,"subscribers_count":21,"default_branch":"master","last_synced_at":"2024-10-30T05:57:18.848Z","etag":null,"topics":["android","animation","buildsrc","constraint-layout","dagger","fragments","google","kotlin","mvvm-architecture","ui","youtube"],"latest_commit_sha":null,"homepage":null,"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/burhanrashid52.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-29T06:38:05.000Z","updated_at":"2024-10-19T20:57:47.000Z","dependencies_parsed_at":"2022-09-21T19:40:34.678Z","dependency_job_id":null,"html_url":"https://github.com/burhanrashid52/YoutubeUX","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burhanrashid52%2FYoutubeUX","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burhanrashid52%2FYoutubeUX/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burhanrashid52%2FYoutubeUX/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burhanrashid52%2FYoutubeUX/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/burhanrashid52","download_url":"https://codeload.github.com/burhanrashid52/YoutubeUX/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243815640,"owners_count":20352205,"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":["android","animation","buildsrc","constraint-layout","dagger","fragments","google","kotlin","mvvm-architecture","ui","youtube"],"created_at":"2024-07-31T01:01:09.174Z","updated_at":"2025-03-16T02:30:58.514Z","avatar_url":"https://github.com/burhanrashid52.png","language":"Kotlin","funding_links":["https://www.buymeacoffee.com/burhanrashid52"],"categories":["Samples"],"sub_categories":[],"readme":"# Youtube UI/UX Animation\n![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)\n![API](https://img.shields.io/badge/API-17%2B-brightgreen.svg)\n[![Uplabs](https://img.shields.io/badge/Uplabs-YoutubeUX-orange.svg)](https://www.uplabs.com/posts/youtubeux)\n[![AndroidWeekly](https://img.shields.io/badge/Android%20Weekly-%23305-blue.svg)](http://androidweekly.net/issues/issue-305)\n[![AwesomeAndroid](https://img.shields.io/badge/Awesome%20Android-%2397-brightgreen.svg)](https://android.libhunt.com/newsletter/97)\n[![Mindorks](https://img.shields.io/badge/Mindorks%20Newsletter-%237-red.svg)](https://mindorks.com/newsletter/edition/7)\n\u003ca href=\"https://www.buymeacoffee.com/burhanrashid52\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\" \u003e\u003c/a\u003e\n\n\n\nThis is a sample app demonstrating Youtube UX/UI animation using ConstraintLayout.It implements the Keyframe Animation feature in ConstrainLayout.This sample app is built on Android Architecture Components\n\nProudly :muscle: made in [**Kotlin**](https://kotlinlang.org/)\n\n## Features\n\n  - Smooth Draggable Animation\n  - Customizable Video Player\n  - Dependency Injection (Dagger 2)\n  - MVVM Architecture pattern using Android Architecture Components\n  \n\n## How does it looks\n\n![](https://github.com/burhanrashid52/YoutubeUX/blob/master/gifs/youtube_ux_demo.gif)\n\n\nThis video demonstarte the app animation.\n\n[![](https://img.youtube.com/vi/NSqsXxgbtPw/0.jpg)](https://www.youtube.com/watch?v=NSqsXxgbtPw)\n\n[Direct Video Link](https://www.youtube.com/watch?v=NSqsXxgbtPw)\n  \n\n\n## The Concept - Animation\n\nBelow image shows how the layout has been desgin using guidelines and all the Fragments are constraints to this guidelines. When user drag the video fragment we starts scaling up/down the guideline values which scale the fragments automatically that's the advantage of using constraint layout with guidelines\n\n![](https://github.com/burhanrashid52/YoutubeAnimation/blob/master/gifs/the_concept.jpg)\n\n\n\n\n## Customization\n\n| Fragment | FrameLayout  | Usage |\n| ------------- | ------------- | ------------- |\n| HomeFragment , TradeFragment , LibraryFragment and UserActivityFragment | `frmHomeContainer`  | This layout hold Fragments added from BottomNavigation bar\n| VideoPlayerFragment | `frmVideoContainer`  | This will have the video player  |\n| VideoDetailsFragment | `frmDetailsContainer`  | Contains Video Details Layout Desgin |\n| BaseBottomNavigationView | `bottomNavigation`  | Bottom Navigation bar |\n\n\n\n## Architecture\nThe app uses ViewModel to abstract the data from UI and MovieRepository as single source of truth for data. MovieRepository first fetch the data from database if exist than display data to the user and at the same time it also fetches data from the webservice and update the result in database and reflect the changes to UI from database.\n\n![](https://github.com/burhanrashid52/YoutubeAnimation/blob/master/gifs/archtiture.png)\n\n\n## How to contribute?\n* Check out contribution guidelines 👉[CONTRIBUTING.md](https://github.com/burhanrashid52/YoutubeAnimation/blob/master/CONTRIBUTING.md)\n\n\n\n## Questions?🤔\nHit me on twitter [![Twitter](https://img.shields.io/badge/Twitter-%40burhanrashid52-blue.svg)](https://twitter.com/burhanrashid52)\n[![Medium](https://img.shields.io/badge/Medium-%40burhanrashid52-brightgreen.svg)](https://medium.com/@burhanrashid52)\n[![Facebook](https://img.shields.io/badge/Facebook-Burhanuddin%20Rashid-blue.svg)](https://www.facebook.com/Bursid)\n\n\n## Resources\n  - [Youtube UI/UX](https://www.uplabs.com/youtube)\n  - [Constraint Layout](https://constraintlayout.com)  \n  - [Android Architecture Components](https://developer.android.com/topic/libraries/architecture/index.html)\n  - [Android New Sample](https://github.com/AkshayChordiya/android-arch-news-sample)\n\n\n## Credits\nIts inspired from [Youtube Android App](https://play.google.com/store/apps/details?id=com.google.android.youtube\u0026hl=en_IN)\n\n\n## License\nCopyright 2018 Burhanuddin Rashid\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburhanrashid52%2FYoutubeUX","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fburhanrashid52%2FYoutubeUX","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburhanrashid52%2FYoutubeUX/lists"}