Build Complex Animations With MotionLayout in Jetpack Compose

No video

Build Complex Animations With MotionLayout in Jetpack Compose - Android Studio Tutorial

Рет қаралды 34,206

Күн бұрын

MotionLayout is an extended version of ConstraintLayout used to build amazing transition effects and animations. Now it's also available for Jetpack Compose.
This video will tell you all the details and how you can use it for practice.
⭐ Get certificates for your future job
⭐ Save countless hours of time
⭐ 100% money back guarantee for 30 days
⭐ Become a professional Android developer now:
pl-coding.com/...
Subscribe to my FREE newsletter for regular Android, Kotlin & Architecture advice!
pl-coding.com/...
Join this channel to get access to perks:
/ @philipplackner
Get the source code for this video here:
github.com/phi...
Join my Discord server:
/ discord
Regular programming advice on my Instagram page: / _philipplackner_
Checkout my GitHub: github.com/phi...
You like my free content? Here you can buy me a coffee:
www.buymeacoff...

Пікірлер: 92

@paulrmoss 10 ай бұрын

I watched the video, made notes, then wrote some code to implement with my own transitions and it worked!!!! 100% pure wow!!!!!

@54cardspeter80 Ай бұрын

I made the column clickable, and animated the progress value with LunchEffect. Thanks for all the knowledge.

@Wiggy90210 Жыл бұрын

I don't know how I missed this lesson, it gives so many possibilities. Thanks for the great content, it really helps at developing my skills 🙏

@faysaldeve385 2 жыл бұрын

Hi Philipp, you are very cool and I enjoy your amazing lessons so much. Thank you for teaching us so many things and I love your beautiful voice. So I hope you reach 100 million subscribers on KZfaq.

@PhilippLackner 2 жыл бұрын

🙏❤️

@yehiaahmed7047 2 жыл бұрын

super great video as well , i expect that from you as a huge android video content creator keep going by the way and still supporting you more and more thank you again

@PhilippLackner 2 жыл бұрын

Thanks man❤️

@nipunkumarit2168 2 жыл бұрын

Really need this tutorial thanks Phillip

@MohammadArif-gn7gr 2 жыл бұрын

Amazing job, as always.

@PhilippLackner 2 жыл бұрын

Thanks mate

@fournonblondes4089 2 жыл бұрын

All code I can repeat, it is great! Many teachers can't show like you.

@tanjimahmed213 2 жыл бұрын

Didn't finish watching the whole video but i think it's awesome

@crateer 2 жыл бұрын

Sometimes it's like magic, exactly what I was thinking about this morning, and now you post a video about this 😂🔥

@PhilippLackner 2 жыл бұрын

Just for you bud

@AndrewDChristie 2 жыл бұрын

love these videos, something new too, I always learn something and philipp does it so well

@PhilippLackner 2 жыл бұрын

Glad you like it! 🙏

@raheemadamboev 2 жыл бұрын

Thank you bro, you are the best! Luck to have you on our side!

@Naar0x 2 жыл бұрын

Hats off to my man out there in south africa enjoying the sun but still managing to drop bomb tutorials

@PhilippLackner 2 жыл бұрын

🙏❤️

@ubersticks 2 жыл бұрын

Excellent Philip! That was fun.

@PhilippLackner 2 жыл бұрын

Thanks, glad you liked it!

@vinaykumarpatel649 8 ай бұрын

You're great, Thanks for sharing.

@JohanAlbrectsen 2 жыл бұрын

Best android guy on KZfaq!

@PhilippLackner 2 жыл бұрын

❤️

@amirnaderlo3045 7 ай бұрын

it was comprehensive, Thank you! 🙏

@dhaiach4249 2 жыл бұрын

Man your content is amazing, please keep it up!

@PhilippLackner 2 жыл бұрын

Thanks!

@osisuper98 2 жыл бұрын

You are unbelievably awesome!

@user-uz3zo3vj6k 2 жыл бұрын

Thank you philipp as always

@sohaibkhan3279 2 жыл бұрын

Great Explanation as always.

@johannespielmeier8891 7 ай бұрын

Thx such a nice video :)

@k4ba Жыл бұрын

Bro... This is gold

@nizamuddinahmed9165 2 жыл бұрын

As always learnt something new

@Ilamarea Жыл бұрын

Would be cool if you showed us how to do this with constraints in Kotlin, particularly how to do transitions separately in Json.

@Chirag-Redij38 8 ай бұрын

Any idea how to integrate this with a column so to expand this with scrolling.

@SiamakAshrafi Жыл бұрын

Very nice! Thank you

@cristianovecchi 2 жыл бұрын

Very cool, thank you!

@terencejumba1939 2 жыл бұрын

Thanks the content is amazing, animations just got easier🥳🥳

@John-qt6qk Жыл бұрын

Thanks mate,

@abdelazizyasser3512 2 жыл бұрын

Thank u so much, i used motion layout in case of list and custom-toolbar, when scroll down into the list , the toolbar still shown. but not in jetpack compose

@somoul7474 Жыл бұрын

Thank you from video .

@AmanKumar-sm2gi 7 ай бұрын

Hi i need a help. I want to implement something similar like adobe scan resize image based on document size a4,a5 how to do that?

@_AG8 2 ай бұрын

How to do it with scrolling

@andrewizquierdo5944 4 ай бұрын

Great video, thank you! Is there a way to do something similar but with a lazygrid item animating to a full screen item? basically if we have a lazygrid, and user taps on an item, we want that one item to animate from wherever it is on the screen to be centered and full screen. i feel like motionlayout is what i need, but the "start constraints" is hard to figure out since the starting position of this lazygrid item can be anywhere on screen.

@085-vaibhavgusain9 2 жыл бұрын

Can’t use composable annotation giving me an error

@codingcosmos7010 Жыл бұрын

How can I change fonts size too with animation..?

@annonymoussi7145 Жыл бұрын

I'm not sure if I'm stupid or what, but what is the parent of the box here? Isn't it supposed to be the column? It constrains the column from the start, end, and top. However, when it gets to the bottom, it is linked to the profile pic! Could someone please clarify?

@rpitpatel1004 2 жыл бұрын

Great tutorial Sir, Can you make tutorial for motion layout with collapsing toolbar.

@mustafaammar551 2 жыл бұрын

very cool video thank you bro👍👍👍

@PhilippLackner 2 жыл бұрын

You're welcome!

@mdisi5967 2 жыл бұрын

Great Video !

@PhilippLackner 2 жыл бұрын

Thanks!

@harisai3580 2 жыл бұрын

Good evening sir

@user-pf2hl8ei1s 2 жыл бұрын

How does it link to LazyColumn? I used NestedScrollConnection, but it didn't work out as well

@alonshlider4881 2 жыл бұрын

Hi Philip! Why would you bother using MotionLayout as you can animate anything using Compose built in animation? Using MotionLayout into Compose is, as far as I understand, more of an interoperability solution than a functional solution as you can achieve the same results using Compose animation.

@captainallergy3654 2 жыл бұрын

Do you have an example on how this can be achieved?

@John-qt6qk Жыл бұрын

Give us a link mate

@jeepaholic326 Жыл бұрын

@@captainallergy3654 val crs = rememberCoroutineScope() val density = LocalDensity.current val posX1 = remember { Animatable(initialValue = 0.5f) } var sliderX1 by remember { mutableStateOf(0.5f) } Slider( sliderValue = sliderX1, onValueChanged = { sliderX1 = it; crs.launch { posX1.animateTo(it) } }, ) YourComposable( modifier = Modifier, centerX = with(density) { (yourComposableSize.dp.toPx() / 2) * sliderX1 }, ) roughly.

@alihosseinnezhad2957 2 жыл бұрын

I wanted to create some thing like this with lazy column using nested scroll in my app but velocity tracker in compose has an issue , when I change offset of lazy column by scroll delta, every point add to velocity tracker has same offset so velocity approximately is zero . :(

@winsonmac 2 жыл бұрын

Nice! Tyvm

@PhilippLackner 2 жыл бұрын

Welcome

@francescofreddi4374 2 жыл бұрын

in your What Is Clean Architecture course that i bought i need help, because initial branch dont start anymore... and i dont know how to solve... there is something like: ComposeOptions.kotlinCompilerVersion is deprecated. Compose now uses the kotlin compiler defined in your buildscript. I am new in Compose and cannot repair ThankYouuu

@PhilippLackner 2 жыл бұрын

Thanks for letting me know, I will check this today or tomorrow 👍

@ericgacoki2225 2 жыл бұрын

I faced a similar issue a while ago! You can resolve this by updating compose version in the build.gradle(Project) file. Something like this: buildscript { ext { compose_version = '1.1.1' } } Set the same version for the compose compiler in the build.gradle(Module) file: composeOptions { kotlinCompilerExtensionVersion compose_version } Hope this helps 😎

@francescofreddi4374 2 жыл бұрын

@@PhilippLackner 8 secondi fa Now funcitons.... today go very well without touch nothing! excuseMe Philips

@francescofreddi4374 2 жыл бұрын

@@PhilippLackner Migrating to Gradle kotlin DSL: is too much difficult to UNDERSTAND for who dont know architecture like me :(.... Have you got some basic video? I need understand difference about Groovie and Gadle DSL first...

@marciorodrigues2727 10 ай бұрын

Great video as always Phillip! Quick question : in XML based MotionLayout it was passible to define multiple transitions and trigger them individually, How can we manage multiple transitions in one scene in Compose using the json5 approach?

@hxrin3748 2 жыл бұрын

damn, so we are now using JSON for UIs too? 💀

@PhilippLackner 2 жыл бұрын

Just motionlayout

@user-oi5db9re6v 10 ай бұрын

Do you have any guide with using swipe instead of a slider?

@bro_chenzox 2 жыл бұрын

Thanks!

@PhilippLackner 2 жыл бұрын

Welcome

@yusufibragimov1667 Жыл бұрын

Hi Philipp, it is very good video and I have one question, we how to change custom textColor in KeyAttributes. I can do it in XML but I can't do it with json5

@Hoti-ta 2 жыл бұрын

Does there any motion layout visual tooling added for compose already?

@dikenmhrz3902 2 жыл бұрын

How to make composables below motion layout move up and down with respect to motion layout changing its size?

@aldaricJohnes 2 жыл бұрын

Also wonder the proper way to size the motion layout

@aminelahrim8142 2 жыл бұрын

Flutter: compex Pfff. 😑 I like your content btw 😉

@bohdanmelnyk118 2 жыл бұрын

Hi. Does Jetpack Compose have the alternative of CoordinateLayout?

@arctan-k 2 жыл бұрын

Is motion layout available for multiplatform?

@Mohit-il9gx 2 жыл бұрын

Why I think we are killing flutter each time android gets an update

@janosszabo98 2 жыл бұрын

The transition (coding window to presenting the app and back) is quite annoying when over used like this.

@pierremarais7669 2 жыл бұрын

Hi Philipp, I am a IOS developer, I want to rewrite my app for Android devices using Kotlin, where do I start with your videos, my App will have sqlite DB which is currently 80Mb and I want the users to request data from the DB, there will be no add to DB functions, only read, any starting point from your side, please, thanks

@PhilippLackner 2 жыл бұрын

If you know nothing about kotlin and Android start with kotlin newbie to pro and Android fundamentals. Then watch a video that covers room databases, for example my recent parking spot saver apl

@hugosalazar6911 2 жыл бұрын

nice ;)

@ElCreativeZ 2 жыл бұрын

what's the name of the theme you're using in android studio?

@maskedredstonerproz 2 жыл бұрын

pretty sure that's what android studio dark theme looks like on a mac by default, if it wasn't, his android studio look wouldn't have changed when he got the mac

@safionweb Жыл бұрын

Compose disappointed me here. 😞

@jamjrarinte 2 жыл бұрын

This was easier in xml...

@EmanNollase 2 жыл бұрын

this is awesome! btw, can you make a video on how to accomplish this -> kzfaq.inforwjowwhFBmw , basically it is a collapsible parallax image, now instead of text it can be a list when scrolls ups the image disapper (or header component) and when scrolls down it appear again. thanks!!

@Wiggy90210 Жыл бұрын

I think you could do it even easier than Philip's example. You just specify start and end height of a box, width as 'spread' and set mask on top of image on which you change alpha. You can set your last visible item as your progress. Not sure if there's alpha parameter but I gues it should be available.

@voyci7672 Жыл бұрын

Animating the texts color via properties doesn't work anymore. As soon as I try to move the slider, an error occures with the following message: "java.lang.IllegalStateException: You must call layoutWithConstraints first".