├── .gitignore ├── .idea ├── codeStyles ├── gradle.xml ├── jarRepositories.xml ├── misc.xml ├── runConfigurations.xml └── vcs.xml ├── README.md ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── rodrigodominguez │ │ └── tindermotionlayout │ │ └── ExampleInstrumentedTest.kt │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── rodrigodominguez │ │ │ └── tindermotionlayout │ │ │ ├── MainActivity.kt │ │ │ └── scenes │ │ │ ├── TinderContactCardModel.kt │ │ │ ├── TinderContactModel.kt │ │ │ ├── TinderContactViewModel.kt │ │ │ ├── TinderScene10Activity.kt │ │ │ ├── TinderScene1Activity.kt │ │ │ ├── TinderScene2Activity.kt │ │ │ ├── TinderScene3Activity.kt │ │ │ ├── TinderScene4Activity.kt │ │ │ ├── TinderScene5Activity.kt │ │ │ ├── TinderScene6Activity.kt │ │ │ ├── TinderScene7Activity.kt │ │ │ ├── TinderScene8Activity.kt │ │ │ └── TinderScene9Activity.kt │ └── res │ │ ├── drawable-v24 │ │ └── ic_launcher_foreground.xml │ │ ├── drawable │ │ ├── arrow_back_24px.xml │ │ ├── favorite_border_24px.xml │ │ ├── gradient.xml │ │ ├── highlight_off_24px.xml │ │ ├── ic_launcher_background.xml │ │ ├── las_vegas.webp │ │ ├── tokyo.webp │ │ └── whatshot_24px.xml │ │ ├── layout │ │ ├── activity_main.xml │ │ ├── activity_tinder_scene1.xml │ │ ├── activity_tinder_scene10.xml │ │ ├── activity_tinder_scene2.xml │ │ ├── activity_tinder_scene3.xml │ │ ├── activity_tinder_scene4.xml │ │ ├── activity_tinder_scene5.xml │ │ ├── activity_tinder_scene6.xml │ │ ├── activity_tinder_scene7.xml │ │ ├── activity_tinder_scene8.xml │ │ └── activity_tinder_scene9.xml │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── values │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── styles.xml │ │ └── xml │ │ ├── tinder_scene1.xml │ │ ├── tinder_scene10.xml │ │ ├── tinder_scene2.xml │ │ ├── tinder_scene3.xml │ │ ├── tinder_scene4.xml │ │ ├── tinder_scene5.xml │ │ ├── tinder_scene6.xml │ │ ├── tinder_scene7.xml │ │ ├── tinder_scene8.xml │ │ └── tinder_scene9.xml │ └── test │ └── java │ └── com │ └── rodrigodominguez │ └── tindermotionlayout │ └── ExampleUnitTest.kt ├── build.gradle ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/caches 5 | /.idea/libraries 6 | /.idea/modules.xml 7 | /.idea/workspace.xml 8 | /.idea/navEditor.xml 9 | /.idea/assetWizardSettings.xml 10 | .DS_Store 11 | /build 12 | /captures 13 | .externalNativeBuild 14 | .cxx 15 | -------------------------------------------------------------------------------- /.idea/codeStyles: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | xmlns:android 16 | 17 | ^$ 18 | 19 | 20 | 21 |
22 |
23 | 24 | 25 | 26 | xmlns:.* 27 | 28 | ^$ 29 | 30 | 31 | BY_NAME 32 | 33 |
34 |
35 | 36 | 37 | 38 | .*:id 39 | 40 | http://schemas.android.com/apk/res/android 41 | 42 | 43 | 44 |
45 |
46 | 47 | 48 | 49 | .*:name 50 | 51 | http://schemas.android.com/apk/res/android 52 | 53 | 54 | 55 |
56 |
57 | 58 | 59 | 60 | name 61 | 62 | ^$ 63 | 64 | 65 | 66 |
67 |
68 | 69 | 70 | 71 | style 72 | 73 | ^$ 74 | 75 | 76 | 77 |
78 |
79 | 80 | 81 | 82 | .* 83 | 84 | ^$ 85 | 86 | 87 | BY_NAME 88 | 89 |
90 |
91 | 92 | 93 | 94 | .* 95 | 96 | http://schemas.android.com/apk/res/android 97 | 98 | 99 | ANDROID_ATTRIBUTE_ORDER 100 | 101 |
102 |
103 | 104 | 105 | 106 | .* 107 | 108 | .* 109 | 110 | 111 | BY_NAME 112 | 113 |
114 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 21 | 22 | -------------------------------------------------------------------------------- /.idea/jarRepositories.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 14 | 15 | 19 | 20 | 24 | 25 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | -------------------------------------------------------------------------------- /.idea/runConfigurations.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tinder Motion Layout 2 | 3 | Les presento Tinder Motion Layout, es una demo de como usar MotionLayout replicando una animacion similar a la que tiene hoy Tinder en su aplicacion. A lo largo de este repositorio, encontraras un paso a paso de la animación, desmenusada en 10 escenas. Te ayudara a comprender los fundamentos básicos de cómo funciona MotionLayout, descubrirás qué es MotionScene y cómo se puede aprovechar KeyAttributes para ajustar animaciones en ciertos cuadros. 4 | 5 | ![Tinder Motion Layout Demo](https://media.giphy.com/media/l2FicrzTU1o3vumKhX/giphy.gif) 6 | 7 | 8 | ### Powered by Rodrigo Dominguez 9 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.application' 2 | apply plugin: 'kotlin-android' 3 | apply plugin: 'kotlin-android-extensions' 4 | 5 | android { 6 | compileSdkVersion 29 7 | 8 | defaultConfig { 9 | applicationId "com.rodrigodominguez.tindermotionlayout" 10 | minSdkVersion 21 11 | targetSdkVersion 29 12 | versionCode 1 13 | versionName "1.0" 14 | 15 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 16 | 17 | } 18 | 19 | buildTypes { 20 | release { 21 | minifyEnabled false 22 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' 23 | } 24 | } 25 | 26 | } 27 | 28 | dependencies { 29 | 30 | implementation fileTree(dir: "libs", include: ["*.jar"]) 31 | implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version" 32 | implementation "androidx.core:core-ktx:$coreKtx" 33 | implementation "androidx.appcompat:appcompat:$appCompat" 34 | implementation "androidx.constraintlayout:constraintlayout:$constraintLayout" 35 | implementation "com.google.android.material:material:$materialComponents" 36 | implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0' 37 | } 38 | -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /app/src/androidTest/java/com/rodrigodominguez/tindermotionlayout/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout 2 | 3 | import androidx.test.platform.app.InstrumentationRegistry 4 | import androidx.test.ext.junit.runners.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext 22 | assertEquals("com.rodrigodominguez.tindermotionlayout", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout 2 | 3 | import android.content.Intent 4 | import androidx.appcompat.app.AppCompatActivity 5 | import android.os.Bundle 6 | import com.rodrigodominguez.tindermotionlayout.scenes.* 7 | import kotlinx.android.synthetic.main.activity_main.* 8 | 9 | class MainActivity : AppCompatActivity() { 10 | 11 | override fun onCreate(savedInstanceState: Bundle?) { 12 | super.onCreate(savedInstanceState) 13 | setContentView(R.layout.activity_main) 14 | scene_1.setOnClickListener { 15 | startActivity( 16 | Intent(this, TinderScene1Activity::class.java) 17 | ) 18 | } 19 | scene_2.setOnClickListener { 20 | startActivity( 21 | Intent(this, TinderScene2Activity::class.java) 22 | ) 23 | } 24 | scene_3.setOnClickListener { 25 | startActivity( 26 | Intent(this, TinderScene3Activity::class.java) 27 | ) 28 | } 29 | scene_4.setOnClickListener { 30 | startActivity( 31 | Intent(this, TinderScene4Activity::class.java) 32 | ) 33 | } 34 | scene_5.setOnClickListener { 35 | startActivity( 36 | Intent(this, TinderScene5Activity::class.java) 37 | ) 38 | } 39 | scene_6.setOnClickListener { 40 | startActivity( 41 | Intent(this, TinderScene6Activity::class.java) 42 | ) 43 | } 44 | scene_7.setOnClickListener { 45 | startActivity( 46 | Intent(this, TinderScene7Activity::class.java) 47 | ) 48 | } 49 | scene_8.setOnClickListener { 50 | startActivity( 51 | Intent(this, TinderScene8Activity::class.java) 52 | ) 53 | } 54 | scene_9.setOnClickListener { 55 | startActivity( 56 | Intent(this, TinderScene9Activity::class.java) 57 | ) 58 | } 59 | scene_10.setOnClickListener { 60 | startActivity( 61 | Intent(this, TinderScene10Activity::class.java) 62 | ) 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderContactCardModel.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import androidx.annotation.ColorInt 4 | 5 | data class TinderContactCardModel( 6 | val name: String, 7 | val age: Int, 8 | val description: String, 9 | @ColorInt val backgroundColor: Int 10 | ) -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderContactModel.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | data class TinderContactModel( 4 | val cardTop: TinderContactCardModel, 5 | val cardBottom: TinderContactCardModel 6 | ) 7 | -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderContactViewModel.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import android.graphics.Color 4 | import androidx.lifecycle.LiveData 5 | import androidx.lifecycle.ViewModel 6 | import androidx.lifecycle.MutableLiveData 7 | 8 | class TinderContactViewModel: ViewModel() { 9 | 10 | private val stream = MutableLiveData() 11 | 12 | val modelStream: LiveData 13 | get() = stream 14 | 15 | private val data = listOf( 16 | TinderContactCardModel( 17 | name = "Rodrigo Dominguez", age = 27, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#c50e29") 18 | ), 19 | TinderContactCardModel( 20 | name = "CerveChat Dominguez", age = 2, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#c60055") 21 | ), 22 | TinderContactCardModel( 23 | name = "Sofia Jerez Test", age = 27, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#aa00c7") 24 | ), 25 | TinderContactCardModel( 26 | name = "Maria Perez", age = 34, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#3f1dcb") 27 | ), 28 | TinderContactCardModel( 29 | name = "Rodrigo Dominguez", age = 27, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#0043ca") 30 | ), 31 | TinderContactCardModel( 32 | name = "Rodrigo Dominguez", age = 222, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#005ecb") 33 | ), 34 | TinderContactCardModel( 35 | name = "Perez Gonzalez", age = 45, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#00b686") 36 | ), 37 | TinderContactCardModel( 38 | name = "Tomas Dominguez", age = 43, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#00b248") 39 | ), 40 | TinderContactCardModel( 41 | name = "Rodrigo Dominguez", age = 44, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#32cb00") 42 | ), 43 | TinderContactCardModel( 44 | name = "Lopez Jose Jose", age = 87, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#90cc00") 45 | ), 46 | TinderContactCardModel( 47 | name = "Felipe Felipe Lopez", age = 23, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#c7b800") 48 | ), 49 | TinderContactCardModel( 50 | name = "Nicolas Lucas Test", age = 27, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#c79400") 51 | ), 52 | TinderContactCardModel( 53 | name = "John", age = 237, description = "Esto es una descripcion de ejemplo", backgroundColor = Color.parseColor("#c56200") 54 | ) 55 | ) 56 | private var currentIndex = 0 57 | 58 | private val topCard 59 | get() = data[currentIndex % data.size] 60 | private val bottomCard 61 | get() = data[(currentIndex + 1) % data.size] 62 | 63 | init { 64 | updateCards() 65 | } 66 | 67 | fun swipe() { 68 | currentIndex += 1 69 | updateCards() 70 | } 71 | 72 | private fun updateCards() { 73 | stream.value = TinderContactModel( 74 | cardTop = topCard, 75 | cardBottom = bottomCard 76 | ) 77 | } 78 | 79 | } -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderScene10Activity.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import androidx.appcompat.app.AppCompatActivity 4 | import android.os.Bundle 5 | import androidx.constraintlayout.motion.widget.MotionLayout 6 | import androidx.constraintlayout.motion.widget.TransitionAdapter 7 | import androidx.lifecycle.Observer 8 | import androidx.lifecycle.ViewModelProviders 9 | import com.rodrigodominguez.tindermotionlayout.R 10 | import kotlinx.android.synthetic.main.activity_tinder_scene10.* 11 | import kotlinx.android.synthetic.main.activity_tinder_scene9.containerCardOne 12 | import kotlinx.android.synthetic.main.activity_tinder_scene9.containerCardTwo 13 | import kotlinx.android.synthetic.main.activity_tinder_scene9.motionLayout 14 | 15 | class TinderScene10Activity : AppCompatActivity() { 16 | override fun onCreate(savedInstanceState: Bundle?) { 17 | super.onCreate(savedInstanceState) 18 | setContentView(R.layout.activity_tinder_scene10) 19 | 20 | val viewModel = ViewModelProviders 21 | .of(this) 22 | .get(TinderContactViewModel::class.java) 23 | 24 | viewModel 25 | .modelStream 26 | .observe(this, Observer { 27 | bindCard(it) 28 | }) 29 | 30 | motionLayout.setTransitionListener(object : TransitionAdapter() { 31 | override fun onTransitionCompleted(motionLayout: MotionLayout, currentId: Int) { 32 | when (currentId) { 33 | R.id.offScreenUnlike, 34 | R.id.offScreenLike -> { 35 | motionLayout.progress = 0f 36 | motionLayout.setTransition(R.id.start, R.id.detail) 37 | viewModel.swipe() 38 | } 39 | } 40 | } 41 | }) 42 | 43 | likeFloating.setOnClickListener { 44 | motionLayout.transitionToState(R.id.like) 45 | } 46 | 47 | unlikeFloating.setOnClickListener { 48 | motionLayout.transitionToState(R.id.unlike) 49 | } 50 | } 51 | 52 | private fun bindCard(model: TinderContactModel) { 53 | containerCardOne.setBackgroundColor(model.cardTop.backgroundColor) 54 | name.text = "${model.cardTop.name}, ${model.cardTop.age}" 55 | description.text = model.cardTop.description 56 | containerCardTwo.setBackgroundColor(model.cardBottom.backgroundColor) 57 | } 58 | 59 | } -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderScene1Activity.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import androidx.appcompat.app.AppCompatActivity 4 | import android.os.Bundle 5 | import com.rodrigodominguez.tindermotionlayout.R 6 | 7 | class TinderScene1Activity : AppCompatActivity() { 8 | override fun onCreate(savedInstanceState: Bundle?) { 9 | super.onCreate(savedInstanceState) 10 | setContentView(R.layout.activity_tinder_scene1) 11 | } 12 | } -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderScene2Activity.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import androidx.appcompat.app.AppCompatActivity 4 | import android.os.Bundle 5 | import com.rodrigodominguez.tindermotionlayout.R 6 | 7 | class TinderScene2Activity : AppCompatActivity() { 8 | override fun onCreate(savedInstanceState: Bundle?) { 9 | super.onCreate(savedInstanceState) 10 | setContentView(R.layout.activity_tinder_scene2) 11 | } 12 | } -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderScene3Activity.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import androidx.appcompat.app.AppCompatActivity 4 | import android.os.Bundle 5 | import com.rodrigodominguez.tindermotionlayout.R 6 | 7 | class TinderScene3Activity : AppCompatActivity() { 8 | override fun onCreate(savedInstanceState: Bundle?) { 9 | super.onCreate(savedInstanceState) 10 | setContentView(R.layout.activity_tinder_scene3) 11 | } 12 | } -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderScene4Activity.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import androidx.appcompat.app.AppCompatActivity 4 | import android.os.Bundle 5 | import com.rodrigodominguez.tindermotionlayout.R 6 | 7 | class TinderScene4Activity : AppCompatActivity() { 8 | override fun onCreate(savedInstanceState: Bundle?) { 9 | super.onCreate(savedInstanceState) 10 | setContentView(R.layout.activity_tinder_scene4) 11 | } 12 | } -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderScene5Activity.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import androidx.appcompat.app.AppCompatActivity 4 | import android.os.Bundle 5 | import com.rodrigodominguez.tindermotionlayout.R 6 | 7 | class TinderScene5Activity : AppCompatActivity() { 8 | override fun onCreate(savedInstanceState: Bundle?) { 9 | super.onCreate(savedInstanceState) 10 | setContentView(R.layout.activity_tinder_scene5) 11 | } 12 | } -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderScene6Activity.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import androidx.appcompat.app.AppCompatActivity 4 | import android.os.Bundle 5 | import android.widget.Button 6 | import androidx.constraintlayout.motion.widget.MotionLayout 7 | import androidx.constraintlayout.motion.widget.TransitionAdapter 8 | import com.rodrigodominguez.tindermotionlayout.R 9 | import kotlinx.android.synthetic.main.activity_tinder_scene6.* 10 | 11 | class TinderScene6Activity : AppCompatActivity() { 12 | override fun onCreate(savedInstanceState: Bundle?) { 13 | super.onCreate(savedInstanceState) 14 | setContentView(R.layout.activity_tinder_scene6) 15 | 16 | // motionLayout.setTransitionListener(object : TransitionAdapter() { 17 | // override fun onTransitionCompleted(motionLayout: MotionLayout, currentId: Int) { 18 | // when (currentId) { 19 | // R.id.offScreenPass, 20 | // R.id.offScreenLike -> { 21 | // motionLayout.progress = 0f 22 | // motionLayout.setTransition(R.id.start, R.id.detail) 23 | // } 24 | // } 25 | // } 26 | // }) 27 | } 28 | } -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderScene7Activity.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import androidx.appcompat.app.AppCompatActivity 4 | import android.os.Bundle 5 | import com.rodrigodominguez.tindermotionlayout.R 6 | 7 | class TinderScene7Activity : AppCompatActivity() { 8 | override fun onCreate(savedInstanceState: Bundle?) { 9 | super.onCreate(savedInstanceState) 10 | setContentView(R.layout.activity_tinder_scene7) 11 | } 12 | } -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderScene8Activity.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import androidx.appcompat.app.AppCompatActivity 4 | import android.os.Bundle 5 | import com.rodrigodominguez.tindermotionlayout.R 6 | 7 | class TinderScene8Activity : AppCompatActivity() { 8 | override fun onCreate(savedInstanceState: Bundle?) { 9 | super.onCreate(savedInstanceState) 10 | setContentView(R.layout.activity_tinder_scene8) 11 | } 12 | } -------------------------------------------------------------------------------- /app/src/main/java/com/rodrigodominguez/tindermotionlayout/scenes/TinderScene9Activity.kt: -------------------------------------------------------------------------------- 1 | package com.rodrigodominguez.tindermotionlayout.scenes 2 | 3 | import androidx.appcompat.app.AppCompatActivity 4 | import android.os.Bundle 5 | import androidx.constraintlayout.motion.widget.MotionLayout 6 | import androidx.constraintlayout.motion.widget.TransitionAdapter 7 | import androidx.lifecycle.Observer 8 | import androidx.lifecycle.ViewModelProviders 9 | import com.rodrigodominguez.tindermotionlayout.R 10 | import kotlinx.android.synthetic.main.activity_tinder_scene9.* 11 | 12 | class TinderScene9Activity : AppCompatActivity() { 13 | override fun onCreate(savedInstanceState: Bundle?) { 14 | super.onCreate(savedInstanceState) 15 | setContentView(R.layout.activity_tinder_scene9) 16 | val viewModel = ViewModelProviders 17 | .of(this) 18 | .get(TinderContactViewModel::class.java) 19 | 20 | viewModel 21 | .modelStream 22 | .observe(this, Observer { 23 | bindCard(it) 24 | }) 25 | 26 | motionLayout.setTransitionListener(object : TransitionAdapter() { 27 | override fun onTransitionCompleted(motionLayout: MotionLayout, currentId: Int) { 28 | when (currentId) { 29 | R.id.offScreenUnlike, 30 | R.id.offScreenLike -> { 31 | motionLayout.progress = 0f 32 | motionLayout.setTransition(R.id.start, R.id.detail) 33 | viewModel.swipe() 34 | } 35 | } 36 | } 37 | }) 38 | } 39 | 40 | private fun bindCard(model: TinderContactModel) { 41 | containerCardOne.setBackgroundColor(model.cardTop.backgroundColor) 42 | containerCardTwo.setBackgroundColor(model.cardBottom.backgroundColor) 43 | } 44 | } -------------------------------------------------------------------------------- /app/src/main/res/drawable-v24/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 18 | 21 | 22 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/arrow_back_24px.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 10 | 13 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/favorite_border_24px.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 10 | 13 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/gradient.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 11 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/highlight_off_24px.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 10 | 13 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/las_vegas.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rodrigomartind/TinderMotionLayout/01734c2c159a771adc8223ea1086da6d247b4ef0/app/src/main/res/drawable/las_vegas.webp -------------------------------------------------------------------------------- /app/src/main/res/drawable/tokyo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rodrigomartind/TinderMotionLayout/01734c2c159a771adc8223ea1086da6d247b4ef0/app/src/main/res/drawable/tokyo.webp -------------------------------------------------------------------------------- /app/src/main/res/drawable/whatshot_24px.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 11 | 13 | -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 12 | 13 |