Clean Theming in Compose (You're Doing It Wrong!)

  Рет қаралды 39,718

Philipp Lackner

Philipp Lackner

2 жыл бұрын

The default theme in Jetpack Compose gives us access to shapes, colors and typography. However, very often we'd like to extend this with more values we'd like to share in our project like dimension or spacing values.
In this video you will learn how you can do exactly that in a very clean and concise way.
⭐ 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/premium-courses...
💻 Let me personally review your code and provide individual feedback, so it won't backfire and cost you a fortune in future:
elopage.com/s/philipplackner/...
Subscribe to my FREE newsletter for regular Android, Kotlin & Architecture advice!
pl-coding.com/newsletter
Join this channel to get access to perks:
/ @philipplackner
Regular live codings on Twitch:
/ philipplackner
Join my Discord server:
/ discord
Regular programming advice on my Instagram page: / _philipplackner_
Checkout my GitHub: github.com/philipplackner
You like my free content? Here you can buy me a coffee:
www.buymeacoffee.com/philippl...

Пікірлер: 53
@ramasubramanian3154
@ramasubramanian3154 2 жыл бұрын
Hey Philip. It would be cool if you can a video series going through some open source git projects and explaining the project structure. How the data flow works and all that stuff
@ajailani4
@ajailani4 2 жыл бұрын
This is so cool. I've never known about this customization before until I found this video. Keep on it!
@PhilippLackner
@PhilippLackner 2 жыл бұрын
Glad you like it!
@simonsloooow
@simonsloooow 2 жыл бұрын
This is very useful for novices in Compose like me! Thanks Philipp~😘
@jatinvashisht4293
@jatinvashisht4293 2 жыл бұрын
This is excellent, now I will make such LoacalCompositions for many other values also. Thanks Philipp
@GakisStylianos
@GakisStylianos 2 жыл бұрын
Be super wary about what you're using it for. It's very easy to abuse it and regret it later
@rollebonmarquis7574
@rollebonmarquis7574 Жыл бұрын
If you found things in this video a bit off, in particular, the explanation for the default, I think that might be because some of the explanation were wrong (imho): 1. @6:26 Once you have this: val LocalSpacing = compositionLocalOf( defaultFactory = { Spacing() //Notice this line here. We define a default value for the LocalSpacing. } ) You don't necessarily need the lines: // CompositionLocalProvider( // LocalSpacing provides Spacing() // ) { // // } The last lines enable you to update the value for LocalSpacing or to set it in case one was not set already, but, in this video we already set a default value when we define the CompositionLocal. 2. @9:54 The 2nd explanation as to why not to use LocalComposition - I think he got the documentation wrong. In the documentation when they say that you better have a default value, I think what they mean is this: val LocalSpacing = compositionLocalOf( defaultFactory = { Spacing() /*Notice this line here. We define a default value for the LocalSpacing. Better have some value here, as opposed to throw an exception. */ } ) If you don't have a value here, you need to throw an exception in the default factory. Then, whenever some composable calls LocalSpacing.current, developer needs to make sure that some upper composable does indeed set the value for LocalSpacing via "CompositionLocalProvider(LocalSpacing provides x) { ... }". From the documentation: "... Not providing a default value can cause problems and frustration when creating tests or previewing a composable that uses that CompositionLocal will always require it to be explicitly provided."
@utkubilgin2818
@utkubilgin2818 6 ай бұрын
hello, can you share the document?
@ubersticks
@ubersticks 2 жыл бұрын
Boom! Another great lesson. Thanks, Philipp!
@PhilippLackner
@PhilippLackner 2 жыл бұрын
Thanks you're welcome!
@yehiaahmed7047
@yehiaahmed7047 2 жыл бұрын
Super great video as well . I really love such way to provide my themes
@OmarMagdy404
@OmarMagdy404 11 ай бұрын
Wow! Composition Locals = Redux in React and React Native. Thanks a lot bro. 😁 😁 Your videos are awesome. I am watching your videos 24/7 Keep it up. 👍
@_Mr_Megh_
@_Mr_Megh_ Жыл бұрын
👉👉Good Morning sir I am from India and whenever I see your video I inspire and wants to become Like you and thanks you are not less than celebrity for us . keep doing ill always support .👈👈
@alij3fer
@alij3fer 2 жыл бұрын
Brother as usual you are creative and distinctive 💯
@PhilippLackner
@PhilippLackner 2 жыл бұрын
Thank you so much 😀
@jeckonly5853
@jeckonly5853 2 жыл бұрын
Yeah!! I learned a lot from this video!!
@thegreatwarrior4989
@thegreatwarrior4989 2 жыл бұрын
Your content is always special and unique 👍👍👍👍👍👍👍👍👍👍👍👍👍👍
@khalidmohammed7820
@khalidmohammed7820 2 жыл бұрын
Its amazing and very useful, thank you very much
@jasalvador
@jasalvador 2 жыл бұрын
Thanks a lot! Great tip.
@mustafaammar551
@mustafaammar551 2 жыл бұрын
Very cool video thank you bro
@KotlinBek
@KotlinBek Жыл бұрын
Hey Philip, Great tutorial as usual I want to add my custom colors and I also want them change in dark mode. How can I achieve that? here you showed spacing which doesn't requires modifications in light/dark mode. thanks in advance! :)
@Guilo583
@Guilo583 2 жыл бұрын
Thx for the tips
@jacobgonzalez4746
@jacobgonzalez4746 2 жыл бұрын
Awesome 🚀
@DreamersLab
@DreamersLab 2 жыл бұрын
Super Cool 👏
@anhlongnghien
@anhlongnghien 2 жыл бұрын
Hi philipp, can you enable subtitle/cc for this video? sorry for my bad english!
@vahidgarousi5064
@vahidgarousi5064 2 жыл бұрын
so cool 😍
@nakeepanpi9349
@nakeepanpi9349 2 жыл бұрын
This is amazing video. So I want you to make video with work manager and android key chain if you could. thank you.
@chetangarg9642
@chetangarg9642 2 жыл бұрын
Hi @Phillipp great content !, you have initialized Spacing two times, 1st in local composition and 2nd time in values of CompositionLocalProvider, You will have two different instances. isnt this a bug?
@JamesBond-mq7pd
@JamesBond-mq7pd 2 жыл бұрын
Thank U
@ashwithchandra2622
@ashwithchandra2622 Жыл бұрын
Bro can you tell me how to extend the scaffold body above and below because it is covering only some part its not covering navigation buttons and also notification bar in OS
@yiyoascen
@yiyoascen Жыл бұрын
how do you test for composables properties like background color and style?
@kingcoder7654
@kingcoder7654 2 жыл бұрын
❤️❤️
@alonshlider4881
@alonshlider4881 2 жыл бұрын
9:15 What about a multi module app? Will creating a MaterialTheme file for each module be a good solution?
@shivamsethi3829
@shivamsethi3829 2 жыл бұрын
Amazing how similar it is to react context
@sayyid5416
@sayyid5416 19 күн бұрын
why don't directly use these values from data class like: Spacing().medium ?
@ubersticks
@ubersticks 10 ай бұрын
Is it bad practice to include the top-level Surface inside the ComposeCustomThemingTheme()? It isn't clear or consistent when to use a top level Surface. MainActivity frequently includes this, but not always. Also in Compose previews you need to wrap your call with ComposeCustomThemingTheme { } but not normally use a Surface() {} too.
@sooshil
@sooshil Жыл бұрын
In XML, we put our own custom named colors in both light and night colors.xml file with the same color name. And we call that color from code. Light and Dark colors are automatically handled. How can we achieve that in compose? I only see predefined color sets like.. primary, onPrimary etc. but how can we add our own.. myOwnColor and define two values for light and dark theme? Do we always need to call isSystemInDarkTheme and assign two different colors from every composable?
@7xFuryPlayz
@7xFuryPlayz Жыл бұрын
sir you can change it according to your needs, but first you should know that which pre-defined color names represnts which surface or you can say (compose) in the app , like , primary represents the topbar color , , onprimary represents the color of things present on the topbar, like options menu , title of your app r screen on topbar , and if you might wonder how would you know that , which color represents which ,surface then jst open the default implementation of the compose you are using , and you can see that which default , style or color that compose uses , so just change your style or color for that specific pre-defined color or style in the theme,
@dmytromarchuk3023
@dmytromarchuk3023 2 жыл бұрын
I just wonder why Spacing is not a part of Material Design concept yet
@marlonlom
@marlonlom Жыл бұрын
00:05:13 ... the same approach applies to tablet and foldables?
@davidozersky412
@davidozersky412 8 ай бұрын
@7:09. I would like to variations within a theme, for example Button Large, Button Small, Button Expressibve etc. Can you create sub-themes? Also what about custom values that could be used within the context of a more complex composable? Lets say you have a composable built from a textview, a background and a button. Can you match elements with the themes? For example lets say you have a spacer that's between a text and a button; and it could be narrow, wide or huge, and you want to create one style for each. That would mean you would want to have one style, or one base theme and multiple child themes. Can you set something in the theme like textButtonSpacing and then apply it in the composable, while setting in the themes?
@aryanvikash1967
@aryanvikash1967 Жыл бұрын
How can we use a linear gradient color In theme
@Joe-yu9wc
@Joe-yu9wc 2 жыл бұрын
do you have higher level course about compose in clean architecture.
@PhilippLackner
@PhilippLackner 2 жыл бұрын
Will come out towards the end of this month 👌
@tessanix9771
@tessanix9771 Жыл бұрын
how much do you lift at gym?
@heavenlife5619
@heavenlife5619 2 жыл бұрын
*U look like Henry Cevil* 😬
@PhilippLackner
@PhilippLackner 2 жыл бұрын
How often do you want to comment this😂
@DeceptiveRealities
@DeceptiveRealities 6 ай бұрын
I am not sure of why this is an advantage over just providing the values as constants. Spacing is just values that don't change, unlike colours which can be themed. You don't theme spacing.
@VietAndroidDevelopers
@VietAndroidDevelopers 2 жыл бұрын
It is brilliant tips but I don't think different Spacing class for tablet is a good solution. I will come out with my idea that is inherit your video.
@gofudgeyourselves9024
@gofudgeyourselves9024 2 жыл бұрын
Second
@sanjshe0m
@sanjshe0m 2 жыл бұрын
Somehow I hoped that he would do 69.dp for extraLarge...
@jaspervisser181
@jaspervisser181 Жыл бұрын
why not just create static values? you didn't explained anything
@sebastianseno9285
@sebastianseno9285 Жыл бұрын
why in compose doesn't have Margin? 🫤
Compose Navigation Just Got SO MUCH EASIER 😱
12:00
Philipp Lackner
Рет қаралды 64 М.
How to Validate Forms with Clean Architecture (You're Doing it Wrong)
41:08
БОЛЬШОЙ ПЕТУШОК #shorts
00:21
Паша Осадчий
Рет қаралды 9 МЛН
Жайдарман | Туған күн 2024 | Алматы
2:22:55
Jaidarman OFFICIAL / JCI
Рет қаралды 1,7 МЛН
MEGA BOXES ARE BACK!!!
08:53
Brawl Stars
Рет қаралды 36 МЛН
Full Guide to Jetpack Compose Effect Handlers
24:56
Philipp Lackner
Рет қаралды 88 М.
Why You Shouldn't Nest Your Code
8:30
CodeAesthetic
Рет қаралды 2,6 МЛН
THIS Compose-State Mistake Leads to Problems In Your Code
7:58
Philipp Lackner
Рет қаралды 39 М.
I Reviewed Your Beginner React Code
12:36
Josh tried coding
Рет қаралды 98 М.
Everything you need to know about Kotlin 2.0 🟣
11:05
Stevdza-San
Рет қаралды 58 М.
Dark Theme and Light Theme (Jetpack Compose)
31:14
CodingWithMitch
Рет қаралды 18 М.
БОЛЬШОЙ ПЕТУШОК #shorts
00:21
Паша Осадчий
Рет қаралды 9 МЛН