Get Started with Android Jetpack Compose - Your Comprehensive Guide!

hello everyone hope you are doing well so we are starting a new series where we use compose to create our UI at the beginning we will start with the basic like how to use compose what are the dependencies we required we will do a comparison between view based and a compos based UI so first we use a default template just click on new project click on empty compost activity let's say compose wait for project to sync now we can just see like what are the dependencies which are added to support compose so first dependency is compost UI so we can see what's are the code available for compost UI just click on external libraries so from here you can see the uh compos UI okay so compos UI contain these classes so UI package contain basic components like which are required to create a UI in compos now next one is UI Graphics let's say we are using some themes colors fonts and other parts you can just verify like Graphics so Graphics you can see we have vectors painter painter color space other things next one is UI tooling preview so whenever we write some piece of a code at the same time we want to see like how it looks on a device so there are two approach either we can just run the app on the emulator or device but it will take some time to create a build and then install a build on the emulator so we have a preview approach where we just add a preview annotation and we can see the whatever code we have right how it look like on our device so for that we need a preview dependency now next one is material three so as we already know the Android comes with a material design guidelines so there are two libraries first is material 2 and second one is material three so in the material three it follow the latest guidelines so either you can use material 2 or material 3 so there may be some component which are still in the experimental phase so this is the basic about what are the default dependencies added uh next thing which is important to understand compost is dependent on cotlin version and cotlin version is something dependent on the studios version okay so if you see here we are using a compos version of 1.5.1 okay then next thing is you need to turn build feature compost is equal to true so you can check compar ibility 1.5.1 is compatible with cotlin version 1.9.0 so similar way the bomb version you can also verify to check the bomb version latest bomb version is this one there are other dependencies also like uh if you want to add all data support and view model support with compos that we will add in later demos so this just a beginning project where we use a default template uh to create and compose activity okay so now we can compare the code with the viewbase approach and the compos approach okay so in the viewbase approach we create an activity and we create a corresponding layout so if you see here there is no layout directory because in compost we create everything with the the cotlin code okay this is the first difference second difference is we use set content View and pass a layout ID which will be inflated with this activity okay but now we don't have a layout so we need to use set content okay now second thing is once we create an activity then there will be a theme which will be applied to this activity Okay so so for that part we go to our manifest and we can go to our activity and in this activity you can see it is using a compos application theme okay uh this theme uh extend to the material new xnar theme so this is a default theme which is applied to our activity as we are working on compos so we need to provide a theme from an cotlin code okay so how we can override this theme so in the activity you can see there is a compos application theme so this theme is created with the cink code where you can see there are some parameters which it required so first parameter is did system have a dark theme or a light theme second parameter is uh did system using any Dynamic colors and third parameter is a Content which is a composed block okay so first thing you can see we are using a material theme class so which requir three parameters like color scheme typography and content so first we are creating a color scheme so first we are checking here if the system is using Dynamic Color and Android version is greater than or equal to 31 okay so here if the if it is a dark theme then we are using a dynamic dark color scheme otherwise Dynamic light color scheme so if Dynamic Color is not applied then on the basis of Dark theme or light theme we are passing a corresponding scheme so these schemes are also manually created so if you see here we have defined a scheme and with primary secondary and tertiary color these are same which we follow for our app compa activities themes or material theme we can even provide other attribute also like background color on primary on secondary and other things so we have provided a color scheme similar way if you see here we are providing a status bar color as well now second parameter is typography let's say we want to define a font for the text styling so you can see we are defining a font family a font size line height similar way you can define Title large and label label and other typographies as well and if you notice the color scheme we are passing a colors so color is also defined from a cin class so if you see here this is a color class and the colors are represented in the hex so in cine code hex start with 0x and this is remaining eight value hex figures so you can change the values from this picker as well you can change the value from here as well corresponding hex filter will be applied if you don't want to use a theme from the Manifest you can even remove this theme attribute from your activity so first thing we have covered like setting the layout setting the theme now next thing is whenever we create a UR why we have a parent layout or we call as a View group okay currently we are just displaying a surface surface is just a background or a empty container okay now in this empty container we are passing a compose function so whenever you need to create a UI in a compost you need to create a compos function so to create a compos function you just need to add a composable annotation okay and there are some point the composable function can be called only from the composed function now in the gting function we are defining a text to display a text in the screen similar way you can see in the left hand side we are writing a code and in the right hand side we can see the preview of L code let's say currently it displays hello name and name is passed from here Android so we can just check in the emulator okay now you can see we are we're displaying the hello Android let's say you don't want to rebuild the application whenever you do some changes okay so what you can do you can just come to the preview block and change the content from here okay just let's say I say hello compost so if you see here I have just changed the content from the preview block and my preview content is changed you don't need to rebuild the project and run on the emulator we can even refresh the content on the emulator without installing a new build so there are some scenarios when we are not changing the resource or we are not doing any changes in the Manifest which don't require an activity to restart let's say currently we are displaying hello Android and I change it to compose then it says out of date and a refresh icon is displayed on the emor side just click on this refresh icon so you can see content is refresh without installing a new build so that much for this video in the next video we will learn a view based Android component and compost based Android components thank you and stay tuned for the further updates

Channel: Let's Finish this APP - Kotlin and Swift Tutorials

Views: 170

Keywords: JetpackCompose, AndroidDevelopment, UIFramework, AndroidStudio, ProgrammingTutorial, MobileAppDevelopment, TechGuide, UIUXDesign, DeveloperCommunity, CodingTips, SoftwareEngineering, KotlinProgramming, ComposableFunctions, MobileApps, DevJourney, ComposeSyntax, AndroidUI, UIProgramming, AppDevelopment, KotlinLanguage, StateManagement, NavigationCompose, AndroidStudioEnvironment, AndroidCode, UIWidgets, CodingBeginner, AndroidBeginner, MobileUIProgramming, NavigationInCompose, AdvancedComposeFeatures, ComposeExamples

Id: TAtKuGvAPtU

Length: 10min 28sec (628 seconds)

Published: Sat Jan 06 2024