How to Build Stunning Material 3 Apps with Jetpack Compose - Android Studio Tutorial

In this video you'll learn to properly build a Jetpack Compose app with Google's new Material 3 design standard. You'll learn about color theory, typography and shapes as well as using the Material 3 composables in your app.
⭐ 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...

[@flamingburger949]

you know what i like about your channel no bullshit ... evey video is complete no free trail no half ass lessons no you get the full experience keep going my man

[@PhilippLackner]

🙏🙏

[@TimSchraepen]

What is this production value?! 😮 I’m so glad I randomly clicked on this video when searching for material 3 compose.

[@musfickjamil2831]

Take love brother. Your tutorial is so helpful.

[@CitizenWarwick]

Wow man thanks! Just started a new app and probably makes sense to go for material 3 even though it's alpha, max appreciation! ❤️🙏

[@Alchemist10241]

Thanks Philipp you saved me from reading a lot of documentations

[@abdullahalqahtani8649]

You know it's Philipp to go to when he appears in the search results 😎

[@illusion9423]

Philipp is the reason any of us can understand android programming

[@daniilvladimirov2457]

Hello Philipp, thanks for a great tutorial. Could you please record another comprihensive video about compose testing. I watched your videos about testing but I encoutered problems with testing screens with animation, palette API, and any LaunchEffects in general.

[@1mYse1LF]

Hello Philipp, thank you very much for Your work! It was 100% clear with Your explanation with all this changes in material 3. Like.

[@PhilippLackner]

Glad it was helpful!

[@mwnkt]

Would love to see more of these

[@yehiaahmed7047]

Waiting for this video for too long , keep going the great work ❤️❤️

[@PhilippLackner]

Thanks! 🙏

[@chuka_obi5167]

Thanks for this video Philipp!! This was great to watch. Could you do a drag to reorder in LazyVerticalGrid project for jetpack compose in the future? 🙏🏾

[@rameesthattarath2278]

Great work. Transition graphics seems to bother me sometimes.

[@gulshanpatidar7908]

super excited

[@aliciabeltran]

Philip thanks I will try by my self. Some names are very new but is like add new words to my dictionary

[@John_X_GR]

Hey Philipp! Great video bro! You're a chill guy! In Color.kt file, when naming color values and luminosity, if i want to put both total white and total black, like Gray100 and Gray00 should i put them like that? If i put them Gray100 and Gray00, its strange to me... like it's not clear if it's white or black. Isn't it better to name them like White and Black, or White100 and Black00?

[@Inglan]

i like how he put light theme last

[@federicocreti4699]

Hi Philipp, 13:55 you are setting a different color to surface, and you say this is done since for example in your example you want the card has a different color from background. There are 2 incongruence on this I suppose: 1 - Now you are talking like the card will use surface as color but this is not true, it will use surfaceVariant 2 - Later you will specify surfaceVariant for the card but I don't understand why, I tried to do some test and it seems card automatically uses surfaceVariant I can't even simulate what you say at 14:50, I can't find a way to replicate the problem that card is equal to background. The only way (and this is obvious) is disabling dynamic color, and setting surfaceVariant with the same color of background. Could be that this depends from device to device? Then does the schema color influence the dynamic color? I tried to change everything, but enabling dynamic color I get always the same result with the same colors.

[@qeuiran9705]

Hello! I recently discovered your channel and it`s amazing. As Android newbie I have a question: Is it ok to finalize this app, like - sharing, add button and add some myself features and use it like pet project?

[@jcdiezdemedina]

Thanks for the video!!!!! Which plugin are you using? :)

[@AndreV650]

good job, thanks

[@archiebombotar]

Thanks Philipp, for your great videos ! Question: Is there a minimum SDK needed to run on the target device, to support Material Design 3 ? and to support Jetpack Compose ?

[@ayseadanc7139]

Can you share the link for color palette. Because I couldn't find it

[@safionweb]

Amazing!

[@mustafaammar551]

very cool video

[@peshutanpavri1599]

Great tutorial, thank you for this. You have been of a big help, I am new to Android dev, and I love Jetpack Compose, though its obvious its heavily inspired by React. The one issue I find is there are too many versions of the OS, and documentation is all over the place, so I don't know where to look. Do you have a video explaining Android versions etc..??

[@MMLProfessional]

How can I convert this colors to work with xml not compose?

[@haf0]

can we do it without jetpack compose?

[@nijuyonkadesu]

how to use material 3 design tokens with xml layouts?

[@Whizyrel]

Gem!

[@JamesBond-mq7pd]

GOOOOO00000D

[@jeffGordon852]

what happen to values/themes.xml file please?

[@mehtabahmed4696]

How to achieve that scrolling animation in the lazycolumn

[@alexlombardi2879]

you mean like at 32:10? that should be the default animation, that result is achieved by default

[@mehtabahmed4696]

@@alexlombardi2879 Seriously, How come my lazycolumns look so plain. Is it a material 3 thing or what.

[@paulsoja2732]

this is android 12 default animations

[@mehtabahmed4696]

@@paulsoja2732 Ooh Lol I'm still using 11 oops.

[@jansprlak110]

Beta tester od roku 2016 oceňujem,,

[@jamesaidoo]

Philipp Could you please share the link to the Html color picker tool you used? Great content as always. 👍🏾

[@lighttigerxiv]

If you search color picker lighter darker it will show up. I don't know if he allows links in the comments so i share it another one

[@zecuse]

For those wondering, it's the W3Schools HTML color picker.

[@mnouman6736]

Philip don't you think material3 is making us too much colurish.

[@PhilippLackner]

You always have the choice to use it or not. I like it for certain types of apps

[@MadeInKurdistan]

If I had to start android development which one should I choose Xml or Jetpack compose??

[@paulsoja2732]

In my opinion Compose is weird and bad readable. But in 2-3 years you have to use it.

[@MadeInKurdistan]

@@paulsoja2732 Tnx bro 💙

[@halcyonramirez6469]

@@paulsoja2732 compose is literally just like reactjs. It's much more readable and 1 million times better than xml.

[@paulsoja2732]

@@halcyonramirez6469 lol, how it can be more readable? Just open any big project and try understand what components on any complex screen. Project which using compose has incomprehensible labyrinth where compose function in another compose function and in another, another, another. Yes, you could write less code for lists. That's all? But with compose we should mix functional programming with OOP. Is it good? Or may be google wants to change android developing to functional programming? Anyway I think in next couple years xml will be used as main approach.

[@halcyonramirez6469]

@@paulsoja2732 thats exactly how. by components. It's easier to conceptualize and visualize in your head cuz it's just code. unlike xml. You miss the reason why compose is better than xml. Compose is just code so there is no need to shift to a different paradigm when creating your U.I and because it's code it's infinitely more flexible than xml Compose is the future xml is for ui is outdated and tedious.. Better learn it now because if you've done anything else but android and Java. the paradigm that composes uses won the web.

[@viniciusdeveloper]

kotlin my eggs

[@Chintanparmar]

First comment

[@HiImKyle]

This is great but my god is this a lot for a basic app..

[@mohammadamirkanjoori138]

like

[@gamesforu6619]

Just a note in montage, when you go to the design and come back to the code, you made a white animation in montage and this animation hurts my eye, I hope in the next video don't include this white animation. Thank you

[@xalikv]

.

[@priyanshukhare6652]

Can someone share their thoughts on this error: C:/Users/khare/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.7.0/51736992f422993a1e741051bdf3c12801bc1ca1/kotlin-stdlib-common-1.7.0.jar!/META-INF/kotlin-stdlib-common.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.7.1, expected version is 1.5.1.

[@lighttigerxiv]

I don't know if you steel need the answer but if you go to the project build.gradle you can change your version there