Introduction to Jetpack Compose in Android Studio | 2024

hey everyone welcome back to my channel so we will be starting with a new series that is Jetpack compos Series in this series we will cover the basic and advance of compost not only that but we will also create apps using jetpack compost great right now first let's start with some theory that you need to know before creating a computer compos project and then later we will do the Practical part first thing first what is Jetpack compost in technical language it's a UI toolkit that simplifies and accelerates the process of building user interface through a declarative and codan based approach now in simple language it means jetpack compose helps you to build apps with a better UI as compared to XML and that do in a very simplified way just how coding replace places Java similar thing you may find compose very different from how you usually code so don't worry simply follow the series and you will be Champion jetpack compose but why is Jetpack compose better than XML three main reasons declarative syntax boiler plate code and live preview declarative syntax allows developer to express UI elements more concisely compared to XML which ultimately leads to cleaner and more Main enable code simple second is that it reduces boilerplate code so in compose UI components are defined directly in COD Lan activity which reduces lines of code as well as repetitive code making it more efficient third is live preview means it provides realtime preview without running the app so you can see changes happening as you code great right next is there are few things you won require in compose like XML layout multiple activities fragment and binding how let's see one by one so all the UI related code we will be doing activity itself hence there is no need of layout folder in resource directory then one activity will serve as an entry point into the app so there is no need of multiple activities next is fragments we won't require fragments because jetpack compos is capable of building maintaining and updating the UI then as we don't have layout so there is no need of find view by ID or data binding or view binding next is annotations J composes two main annotations preview and composable whenever you add a preview annotation it will show a real time preview of the code simple then composable annotation defines that this is a compos function not a codan function compos function as a UI related function got it see this is an example of composable function there is a function as welcome with parameter as name and annoted with composable then inside it text like how we used to have text view similarly we have text as hello and argument as name whatever we provided in the Cod Lan function got it now let's see the real example so go to Android Studio open new project and this time we will choose empty activity with this compos symbol this compos symbol denotes that this activity is a jetpack compos activity got it name it as lar jetpack compass and done this is how the jetpack compose interface looks like we will go through it one by one starting with the directory manifest is same grel is also same but there are two big difference first is we have a new folder as ui. theme and second thing is there is no layout folder in the resource directory other than that everything is same let's see what do we have in color. KT so here we have six default colors the syntax goes like well color name is equal to color class with 8 digit decimal color code now look at this carefully 0 x FF represents the transparency of the color which is constant in all the colors then the hexadecimal color code like d0 bcff simple right next is type type contains at attributes that will style your text like font family weight size all of this is in typography class you can uncommon this as well if required like title large for big headings and label small for small text got it next go to theme Here we will set up theme with colors and typography so we have dark color scheme light color scheme and here is the important thing this is learn jetpack compos theme function with composable annotation we will call this function in main activity letter then inside it we have a Boolean named Dark theme and its default values set using the function is system in Dark theme this function determines whether the system is currently in dark mode if Dark theme is enabled then it will be true otherwise false then bullan name Dynamic Color and its default value is true it indicates where the dynamic color is enabled basically Dynamic Color is based on system conditions this parameter is a composable function named content it is the main content of the composable that will be passed to the function then this block of code uses when to determine the color scheme like if Dynamic Color is true and Android version is at least s then it calculates the color scheme based on whether the dark team is enabled so it calls either Dynamic dark color scheme or dynamic light color scheme function to obtain the dynamic color scheme if only Dark theme is true it said color scheme to dark color scheme but if none of the above conditions are met it set the color scheme to light color scheme simple next this code applies the color scheme to the status bar then material theme consist of color scheme then typography class and content got it now come to main activity this is where logic and UI both are present see we have main activity that extends component activity then inside it and on create function the hierarchy goes like set content inside it learn jetpack compos theme which was present in theme class right then a surface so a surface container using the background color from the theme simp normally how we used to have on create patter this works exactly like that way it just that we don't have an XML layout instead we have a theme with surface and inside it we have called the compos function and that compos function here is greting which we created here let's have a look at it so we have a function named greating with composable annotation it has two parameters name and modifier then inside it a text same as text View so the text content is set to hello name where name is the value passed to the name parameter then modifier is set to the value pass to the modifier parameter which allows to customize The Styling and the layout of the text next is the preview annotation which will show live preview with show background as true which indicates that the background should be displayed in the preview then composable annotation you already know here we have creating preview function and inside It theme and inside that theme the composite function that is creting here parameter is Android let me show you the live preview without running the app so when you will click on split mode click on build and refresh and it will show you the live preview so here it says hello Android now see I'll write here as AK and look without even refreshing the preview says hello cool right it will be very useful when we will create projects so yes we have covered everything now let's run the app it's a very basic app that says hello Android because here in on create we have wrote Android and here in preview we have wrote AK so both of them are different also it's an example project just to make you understand how jetpack compos Works further in upcoming videos will cover basic and advanced topic of compost credit and I guess that's it if you new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 1,391

Keywords: jetpack compose, android, jetpack tutorials, compose, learn android app, learn jetpack compose, app in jetpack compose, create a app, android studio tutorials, jetpack compose android, 2024, series, learn android, create jetpack compose app, college project app, final year project app, android development, android knowledge, learn app development, mobile apps, develop apps, create an app, tutorial, topic, new android video, latest android studio, error, solve error android, code

Id: GXfOFQGG1rM

Length: 9min 46sec (586 seconds)

Published: Wed Jan 03 2024