Full Beginner's Guide to the Jetpack Compose Preview in Android Studio

hey guys and welcome back to a new video today we are going to take a very close look at the compost preview and reveal some functionality I'm pretty sure many of you haven't yet known about since I've realized that the compost preview which was initially quite unstable has improved quite a bit over time and I found myself using it more and more so let's see how we can take this to its limits to really use its full potential and for that I just prepared a little Android Studio project here with a custom button which has one outlined mode and one fi mode and I changed the shape of the button so that we just have something to preview here and to experiment with and the first thing I want you to do is to go to your Gradle scripts and open your Gradle app file then scroll down and make sure that you are using the latest compos bomb version so bill of materials we can do that by removing this version and then hitting control and space and it will autofill the latest version make sure to use this same version or a later one click sync now because that gives us more fun functionality for preview which comes from this UI tooling dependency if that sync is successful and we go back let's take a look and start from the very basics of what we can do with the preview first of all if you have a composable and you want to preview that without having to launch it on your real device you can just do that with pref so that is is a template a live template Android Studio that is already there by default we can hit enter and we can then have our preview that we Define here so custom button preview for example each preview is in the end just a composable function which is in addition annotated with preview Sur prise surprise and in here what you now want to do is you want to put in your theme which in this case is compose preview theme and in there you just put in the composable you want to preview that works with whole screens that works with single components so whatever you want to preview in this case just a single button and then we can add some sample data here for example hello world for the title let's say we don't want to have an outline button in this case and our onclick function can just be empty because we're not really responding or we don't really need to respond to clicks here in our preview once we did that we can toggle the preview by going to this little split tab here in the top right clicking that and then we need to build and refresh so that we actually see the preview and Studio knows what we're going to preview and there we go that is the most simple form of our composed preview we have a simple hello worldex as a button and from now on if we change the parameters here for example is outlined from false to true then that will also change in real time here in our preview so you can see we now have an outline button and that is one main purpose of the preview of course that while we build something we can see what we are actually building but an additional big use case of the preview is to also be able to inspect different variants of devices of screen sizes of font scaling of colors so we can see on one place how our component our comp composable actually looks like on various different configurations because that is something we can easily test with ulators or with real devices because we would need to spin up tons of different devices with tons of different settings and that would take a lot of time which we don't have so we want to speed that up by using the composed preview and the first few basic ways to configure our preview we can do with the preview annotation itself because we can pass a bunch of parameters here if we hit command p and we could give our preview a name we could assign it to a group um I will focus on the more important ones here so for example the width DP so we can assign a width of the screen size we want to have our preview on for example 300 DP and you can see our button fills the whole width now and is now a little bit wider we can do the same with our height 300 DP let's say we have a squared screen and then our button will also be a square in this case if we use these metrics then our component will be forced to actually fulfill these Dimensions which it wouldn't do by default because there is no fill Max size modifier here in any of these buttons if we want to preview it on a real screen on a real device we can get rid of that and instead do show system UI and set that to true then we will actually see our button shown on a real device as you can see now it's also not squared anymore because it has the real Dimensions it will also have on a real device so let's see what other parameters we have here to configure our preview on one hand if we hit command P again you can see we have the local so if you have an app that Recs multiple languages then you can also Define the language your preview should be in so in this case you would just specify the country code for example de for German in this case I don't have any German strings defined but if you would have that then the strings would also reflect in the preview in the language you choose here you can also choose the font scale and set that to 2f for example so if there's a user who um increased the font scale in their in their Android system settings then you can also see how that would look like for example if there are some older people using your app then it's very likely they are using a bigger font size and if your app targets such people then it's very important to also test your app on these devices with such a font scaling so as you can see if we double this then also our text size of our button will double then there's also the UI mode we can choose so that reflects whether we're in dark mode or light mode we can do configuration. UI mode night yes or UI mode night no so if we want to be in light mode then we can choose mode night no and nothing will change I thing because we are already in uh light mode but if we change that to yes then you will see that at least our button will change the color to the color it would have on a device that is set to Dark theme another thing you need all the time when previewing your components is to choose a device because that is something you will really need in most of the cases since most apps need to support multiple different screen sizes and instead of always needing to spin up multiple emulators one tablet Maybe One desktop emulator and multiple phone emulators with different screen sizes you can also just use the preview so you can say devices and then choose foldable default desktop um a specific Nexus device for example if we want to preview our button on tablet and then we choose Nexus 10 going zoom out a little bit and then you can see it it it's previewed on a tablet screen of course for this button there's no difference but if you're previewing an actual screen then there will be quite some differences for a tablet screen um compared with a Simple Mobile screen but all these are really just the basics of what you can do with the preview I think they are pretty well known for people who have used the preview before but there are actually four more so-called preview templates which were previously introduced with Android Studio which are really cool so one thing before that is that we can actually have a multi- preview so we can preview multiple different components in a single preview window and these templates relate to that so if we know go ahead and we actually let's get rid of this um Nexus 10 let's also get rid of this show system UI if we now just take this preview and copy it paste it and we name this custom button um outline preview for example and we change the out outline Boolean to false for the non outlined preview then you can see we have two previews and if we take a look here then both are actually shown here in our preview window in both um outlined and not outlined so we have one look at our component and we see it in both variants so that really just that you can see we can have multiple previews in a single file which are all shown together here if you don't see this um like I do here then you can change the display mode here from list to Grid or even Gallery so grid would just display all different previews in a grid form if you use gallery and then you need to click through these so you use one preview and here is the other so we can click on these and then the corresponding preview gets loaded I like grid the most because it just shows um a lot of different previews with uh yeah in as little space as possible and I also want to get rid of this preview again because I want to show you something even cooler as I already mentioned most of the times you want to preview your components with different configurations from the devices so you want to experiment with different font scaling with different screen size with uh light mode Dark theme with potentially Dynamic colors which have been introduced in the latest Android versions and it's of course quite a pain to Define that many previews for that you don't want to copy paste your preview every single time you want to preview a different screen size together with the other screen size and luckily compose now has a solution for that which is why we updated that dependency and those are so-called preview templates so we can for example say preview screen sizes that is an annotation that does not need any parameters and if we do that then suddenly we get that preview on all different screen sizes if we zoom out you can see that just by adding the single annotation we see a desktop version we see our mobile version our mobile landscape version and a tablate landscape and a tablate portrait version so with just adding a single annotation you get to see all different screen sizes that is super cool and we didn't have that before another such template is font scale so preview font scale will give us your button in all kinds of different font sizes for this button this of course all looks fine but if you actually have font sizes on a single screen and you preview that whole screen where multiple texts can actually Clash together then that often doesn't immediately look good so in that case you would need to think about is your potential target audience really a target audience that is likely going to increase that font scale and if so then you just found an issue in your UI code C another such template is preview light dark which I think is self-explanatory so we just get to see our button in both a light and dark theme so this is our normal preview this is light mode oh actually actually dark mode I think and this is light mode and we can also combine these annotations so if you want to see your button in light and dark theme and also display it in Dynamic colors then we can say preview Dynamic colors and just add that annotation so if we do that then we just get all these Dynamic color buttons in addition to our light and dark theme buttons so depending on what kind of wallpaper the user has set on their device the button will then have a different uh color so if they have a green background the button will look like this if they have an orange lag background it will look like this and so on and you can just combine all these annotations and with just four lines of code you can see your component or screen on so many different configurations with just a minimum amount of effort one thing these preview templates can offer use if you have some custom parameters for example this is outline parameter let's say we want to preview our button once with the filled version and once with the outline version but we don't want to Define many previews for that so in this case it would just be two previews because we have a Boolean here but let's say you have some kind of list or some kind of user entries that have some kind of complex data source behind them and the UI component doesn't always look exactly the same and you just want to preview a component with different inputs what you can then do is you can define a so-called parameter provider so you would go ahead here and define a class for your preview for example in this case outline parameter provider which is a preview parameter provider of type T So type T would be the type of parameter it should provide in this case Boolean then we can go in here and overwrite the values sequence here and here we just need to provide a sequence of all the different parameter values we want to provide to the preview in this case it would be false and true so we on the one hand want to have our preview with is outline being equal to false and once with true and if we now go ahead inside of this preview function signature and we use The annotation preview parameter and refer to our outline parameter provider double colon class we can then Define the is outlined or is outline Boolean here which compos will now show show with is outline being equal to True once and once with it being equal to false if we now take this parameter pass it here to our is outline then you can see that for each preview so our preview um components are actually doubled now and for each preview we now see two variants of our custom button ones in outlined and ones in the field version for all the Dynamic Color and all the light and dark theme variant and of course having a Boolean here is the most simple form of such a parameter provider but imagine you have screen and that screen has a complete uh the state data class passed to it then you can Define different variants of that state data class which you define in the sequence of here of course that would be a sequence of your screen UI State and you could then pass these different variants to your preview like this and then you just get to see different variants of your screen depending on what kind of scenario the user is currently in and preview that all at one single place in all different configurations light theme dark theme um Big Font scaling I don't know different screen sizes so I think the compos pre really improved a lot here and as a last little tip I want to give you is you always need to take a little bit of care when writing your code that it actually works with a preview because not all composes can be previewed by default because sometimes you just create complex objects inside of these composable functions which the preview can't really construct a typical example here would be a view model that requires a lot of different Construction structor arguments so maybe use case maybe a repository maybe some other kind of parameters in the Constructor and the preview isn't really a full functional app which can completely run your source code maybe also use dagger Hill to inject dependencies in the view model so at this point it will fail however we still often need these view models in our code and also kind of need to use these in composable but what I'm saying is build your pre build your composes with the preview in mind so at the very top level you can definitely use your review models but then only pass down the data to the composable that is actually needed so your composes don't all need a view model reference pass to them no they actually just need the state pass down to them and then they can also propagate events up to the view model which again is at the top level that way you keep your screens previewable while still being able to use view models which we all need in our apps of course and sometimes if you really need to work around something in your composable then you can also make use of the local inspection mode so that is just something we can access in our composes local inspection mode do current which is a Boolean as you can see that will be true if a compost is currently in the preview and it will be false if it's not so for example what we could do is wouldn't make any sense here but if we check this if local inspection mode at current if we are in the preview we want to have a width of our outline button of 3dp and lse of 1 DP so then you can see in the preview we suddenly have a thick outline about if we would actually launch our app and display such a button it would still be 1 DP so a thinner border and in this case this of course wouldn't make any sense but sometimes you need to make the preview skip certain parts of your code and if you just want to quickly preview something if you quickly want to experiment with something and without having to set up a specific composable to be previewable as I mentioned before then you can make use of this local inspection mode and actually skip certain sections for the preview and I think compos really improved a lot here in this preview I love compost and that is also why I took the time to really condense the 20 most deadly mistakes people do with compose into a single free pdf so I'm very sure there are at least some mistakes you are currently making in your compost code which you are not aware of which I explained in this PDF so you don't need to make them again to get this free pdf you can just check the first link in this video's description just enter your email first name and then I will send you the PDF link via email other than that thanks so much for watching this video I will see you back in the next one have an amazing rest of your week bye-bye

Channel: Philipp Lackner

Views: 13,016

Keywords:

Id: nCd02GTBbIM

Length: 16min 41sec (1001 seconds)

Published: Sun Feb 18 2024