With MVVM Architecture pattern using Android Architecture Components This is a sample app demonstrating Youtube player animation using constraint layout

Overview

Youtube UI/UX Animation

License API Uplabs AndroidWeekly AwesomeAndroid Mindorks Buy Me A Coffee

This 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

Proudly 💪 made in Kotlin

Features

  • Smooth Draggable Animation
  • Customizable Video Player
  • Dependency Injection (Dagger 2)
  • MVVM Architecture pattern using Android Architecture Components

How does it looks

This video demonstarte the app animation.

Direct Video Link

The Concept - Animation

Below 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

Customization

Fragment FrameLayout Usage
HomeFragment , TradeFragment , LibraryFragment and UserActivityFragment frmHomeContainer This layout hold Fragments added from BottomNavigation bar
VideoPlayerFragment frmVideoContainer This will have the video player
VideoDetailsFragment frmDetailsContainer Contains Video Details Layout Desgin
BaseBottomNavigationView bottomNavigation Bottom Navigation bar

Architecture

The 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.

How to contribute?

Questions? 🤔

Hit me on twitter Twitter Medium Facebook

Resources

Credits

Its inspired from Youtube Android App

License

Copyright 2018 Burhanuddin Rashid

Licensed 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

http://www.apache.org/licenses/LICENSE-2.0

Unless 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.

You might also like...
[] Android library for using the Honeycomb animation API on all versions of the platform back to 1.0!

DEPRECATED NineOldAndroids is deprecated. No new development will be taking place. Existing versions will (of course) continue to function. New applic

Road Runner is a library for android which allow you to make your own loading animation using a SVG image
Road Runner is a library for android which allow you to make your own loading animation using a SVG image

Road Runner Road Runner is a library for android which allow you to make your own loading animation using a SVG image Sample video View in Youtube Dem

Backarrow-animation-example - Animate back arrow to close button in Compose using animated drawables
Backarrow-animation-example - Animate back arrow to close button in Compose using animated drawables

Animate Back Arrow to Close Icon in Compose This is a simple demo for animated v

BaseAnimation network Android animation set, custom controls, nearly 200 kinds of source code! BaseAnimation, if a new version is updated automatically to remind everyone, I hope everyone will contribute their animated XML files or other source, together to create this open source app! A beautiful ripple animation for your app
A beautiful ripple animation for your app

Android Ripple Background A beautiful ripple animation for your app. You can easily change its color, speed of wave, one ripple or multiple ripples. S

AppIntroAnimation is a set of code snippets to make cool intro screen for your app with special Image Translation and Transformation animation effects. It is very easy to use and customize without adding third party library integrations. Customizable bounce animation for any view like in Clash Royale app
Customizable bounce animation for any view like in Clash Royale app

Bounceview-Android Customizable bounce animation for any view updation Getting Started In your build.gradle dependencies { implementation 'hari.bo

A component for flip animation on Android, which is similar to the effect in Flipboard iPhone/Android
A component for flip animation on Android, which is similar to the effect in Flipboard iPhone/Android

android-flip Aphid FlipView is a UI component to accomplish the flipping animation like Flipboard does. A pre-built demo APK file for Android OS 2.2+

Deprecated in favour of https://developer.android.com/reference/android/support/v4/view/animation/PathInterpolatorCompat.html

Deprecated: use https://developer.android.com/reference/android/support/v4/view/animation/PathInterpolatorCompat.html instead. android-cubic-bezier-in

Comments
Owner
Burhanuddin Rashid
Software Engineer, Open Source enthusiast, Google Developer Expert in Flutter
Burhanuddin Rashid
Animation samples with motion layout and object animator 🦹🏻‍♀️

?? Animations ?? Animation samples with motion layout and object animator ????‍♀️ Car Animation with Object Animator ?? ?? I've created this project b

Yağmur Erdoğan 25 Dec 28, 2022
Android Animation Easing Functions. Let's make animation more real!

Android Easing Functions This project is originally from my another project, AndroidViewAnimation, which is an animation collection, to help you make

代码家 2.5k Jan 4, 2023
A sample implementation Compose BottomSheet with animation different states

Compose Animated BottomSheet A sample implementation Compose BottomSheet with animation different states Medium post: https://proandroiddev.com/how-to

Yahor 40 Jan 6, 2023
A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates

WhatTodo Life can feel overwhelming. But it doesn’t have to. A Simple To-do app design in flutter to keep track of your task on daily basis. You can a

Burhanuddin Rashid 1k Jan 1, 2023
Navigation pattern like in Google News Stand app with transitions

Google-NewsStand-Animation-Android Navigation pattern like in Google News Stand app with transitions Getting Started In your build.gradle dependencies

Hariprasanth S 129 Nov 11, 2022
An Anime Watching App With Better player And Faster Servers

Kayuri An Android app to watch anime on your phone without ads.With GoogleServers and Manual Settings Toogles. This is a Fork Of Anime X Stream which

Killerpac 380 Oct 23, 2022
Extended Android Tab Layout with animated indicators that have continuous feedback.

Dachshund Tab Layout Introduction Boosted Android Tab Layout with custom animated indicators including "Dachshund" animation inspired by this. Sample

Andrii 859 Nov 10, 2022
🎢 Zoom Recycler Layout Manager For Android Kotlin

Zoom Recyler Layout An beautiful Zoom Animation Library for RecyclerView Items in Android using Kotlin. Preview 1. Horizontal Scroll 2. Vertical Scrol

Sanju S 778 Jan 2, 2023
Android library. Flexible components for chat UI implementation with flexible possibilities for styling, customizing and data management. Made by Stfalcon

ChatKit for Android ChatKit is a library designed to simplify the development of UI for such a trivial task as chat. It has flexible possibilities for

Stfalcon LLC 3.6k Jan 5, 2023
Add Animatable Material Components in Android Jetpack Compose. Create jetpack compose animations painless.

AnimatableCompose Add Animatable Material Components in Android Jetpack Compose. Create jetpack compose animation painless. What you can create from M

Emir Demirli 12 Jan 2, 2023