Jetpack Compose Crash Course

Welcome to our jetpack compos crash course for beginners if you are ready to dive into the world of modern Android application development you are in the right place hi there my name is Sachin and I welcome you to our YouTube channel native mobile bits throughout this crash course we are going to cover basics of Jetpack compost and we will understand that how we can use these core concept which we are going to learn in this video to create our UI layouts and and we will also see that how compose will Leverage The Power of cortlin which I'm sure that most of you will already be knowing because you are developing your Android application using cortlin and enough about Theory now let's jump into Android Studio our favorite IDE and let's start using jetpack compose from very very scratch okay let's start today's video okay so we have our Android Studio ID open and to create a new jetpack compost project you just just need to select this empty activity which is a compos one and we can just click on next we can give any name let's give it jetpack compose CR course this is the name we are going to give we can give any package we want and we can just give the location where we want to save this project all right let's click on finish button and Android Studio will create one jetpack compos project for us our project is created and first of all I want to show you the dependencies we are using and these dependencies came up in built because we have selected the jetp peg compose activity at the time of project creation right so let's go to build. gel. kts file and we can see that we have one dependency which is compose B now if you're not familiar with this Bo terminology b stands for Bill off materials and you can see that this composed bom this is a list of dependency or a group of dependency and their respective versions so if we are having 10 different different dependencies which we need to use in order to build application using jetpack compos so Google has grouped all of those dependency and their respective version inside this compos bom okay so just for example if you're using let's say Firebase and there are n number of dependency you need to use for Firebase so Google also has something called Firebase B okay so it's like a new centralized location which contains all the related dependency for any given apis in our case for Jetpack compose now let's close this dependency file and apart from this we have one activity also which Android Studio created for us this is a compose activity now don't stress out with all of this code we are going to write everything ourself from scratch B based on our own examples so let's delete all of this code now I am sure that most of you will be knowing this code we have one activity which extends the component activity then we have the own create method and this is the entry point for any given activity right in Android we have life cycle and own create is the starting point or the entry point for any given activity the first difference which you can notice is this set content method earlier we used to have some kind of XML layout assigned here right we used to have activity uncore main.xml or the respective name.xml right we used to pass that layout to this set content method but in jet Peg compos set content is a Lambda and it is kind of a composable if we go to the Declaration we can see that this is taking a composable right so earlier we used to pass here one layout but this set content Lambda is expecting something which is a composable now this is the main and very important difference in XML based development and in jet Peg compos based development in jet Peg compose there is no need for any XML code we can create views using composable now the question is what actually is a composable this set content also need a composable and I am saying that in jet Peg compose there is no need for any XML code we can create views using composable so we need to learn what actually is a composable right so composable is same as any function in programming so in ctin we declare functions using fun keyword right so we can declare composable functions also the similar way but the extra thing here is we need to annotate with at the rate composable annotation so first let me just give you one blueprint of a function or a method defining approach so we can define a function with this fun keyword we can give any name to that function right we can also pass some kind of parameter also to this function right and we can just write our own content here right only extra thing we need to do is we need to annotate this function with composable annotation okay and once we annotate any function with composable annotation it becomes a composable now composable is the basic building block of any screen of any layout in jet Peg compos application and as we know that this set content method is expecting a composable so we can just pass the composable here right something like this but this I have just created for a blue blueprint purpose let's create one actual composable which we are going to use inside our crash course okay so let's write a function called hello world this is going to be our first composable this is a normal function let's annotate this with composable annotation okay and as the set content Lambda is expecting a composable function we can just pass our hello word composable function here okay so now you see the difference earlier in XML approach we used to pass a layout here a XML layout now we can pass composable functions okay so if we want to write anything on a screen we can break down into simple simple composable small small components and we can just pass those composes inside our set content Lambda now good thing about jet Peg composes we also have inbuilt composable function for commonly used component so let's say we want to show some kind of text inside this so we can use inbuilt text composable so jetp Peg compose has so many of these in built composable we are going to use most of them or at least few of the important one in this crash course for now we are going to use text composable we need to pass here some text so let's say for now we are just passing hello World app so let me summarize what we are doing so far in this example we have one activity and inside this we have own create which has this set content Lambda which can take inbuilt composable or our self-defined composes we can pass to this set content method basically we are feeding the UI which we want to show on the screen and as of now in this example we have created created one new composable function which is called hello word and it uses text composable it's an inv composable function from jpeg compose and we are passing some content to this and by this you can understand that one composable function can take other composable function inside and this is the same thing we are doing we have created one composable and we are passing this to our side content Lambda Okay so let's run the application and let's see how it looks on the screen so far and when we try to run the application we got one error that there are some dependencies which require our project to compile against 34 so we can just change this compile sdk2 34 let's sync the project again and now let's try to run the application so now our application should run at least on the emulator successfully and our app is launched we can see we have one Hello World app text okay which is coming from this composable right now if we want to make it little bit Dynamic so these composable function can also take parameters so let's say we want to just pass one parameter name of a string type so now we need to pass one name so we can just write something native mobile bits okay this is the composable function this is the parameter value we can also use the named parameter as similar as we can inside normal cotlin function so this is the composable and we are getting the name value here which is passed from here and we can use this name value within the scope of this composable function so let's use inside one string template remove this and use name the moment we use name name our application has updated and it has the latest value we passed so this way we can create our composable we can pass some parameters to those composable we can use those parameter value within the scope of the composable function now let's learn about jetpack compose preview in Jetpack compose we can see the output of this code without even running the application on any emulator or any realtime device how we can do that we can do that with preview composable so for that let's close our emulator okay right now we don't have any running device now let's open this so right now there is no preview now the question is how to add a preview right so we can add a preview with the help of at theate preview annotation and we can Define preview for composable function so let's say we want to Define a preview of this like how our hello word composable will look in a real time screen to define a preview first Define a function let's take the composable name and append with preview this is the common practice which you can follow you can just take the name of the composable function and upend with preview now this is going to be a composable first of all okay now we need to add the preview annotation as as well and this hello word preview can showcase a piece of UI which we add inside this so as we want to see the preview of this hello word either we can take the content of this composable function and paste it here or we can just take the composable function like this we can add it here so as this takes a name parameter we can just add one name parameter here as well and the moment we added a parameter here we are seeing one error inside this preview annotation basically we need to define a default value for this parameter nonn default value parameters are not allowed in a preview section okay so we can define a default value and let's say we are defining Virat as the default value and we can just pass this name here so don't get confused this is the value and this is the named parameter okay so as we wanted to define a preview for this hello word composable we have defined it here we just created a composable function we called it hello word preview if you have any composable let's say text composable so you can Define text preview if you have a button composable you can define something like button preview this is the common standard practice then we added this at theate preview annotation and we took this composable we added inside the preview composable and we just pass the default parameter okay and we can see that in the right side we have this preview section and our hello word preview is visible okay but right now this is as simple as it can be this is just a normal black text there is no D background for this preview right so if we want to add the white background or for a normal background at least for our composable preview so we can customize it if we just click on this we can see that this preview class has a lot of things we can pass some volan Flags to show background we can also pass some background color and so many other things right so at least for now we want to show some kind of background so that our text can be highlighted right so we can just pass show background ground as true and the moment we pass this inside our preview annotation we can see that we have one white background and now our composable preview is looking much better right but as of now we don't know how our component is going to look inside a Mobile screen because this is just a independent component preview right if I tell you that we can do that with this preview section itself we can just check out how our component is going to look like in one actual device yes we can do that we can add one of my favorite parameter here for preview class show system UI as true okay and the moment we do this see our component preview is shown inside one actual system UI okay so it's looking like one actual Mobile screen and how our composable is going to fit inside that screen right if we just pass as false or if we don't pass this we will just see the independent component preview okay like this now another question is can we Define multiple preview for a single composable and the answer is yes we can Define multiple previews so we can customize these name for better understanding we can say that hello word preview for component okay this is basically the pure component preview how our composable is going to look like but if we want to create another preview for the same composable and we want to see that how this composable is going to fit in Inside a Mobile screen we can just take this and we can just rename it that hello word preview in Mobile screen okay and inside this we can pass another tag show system UI as true okay so now we are having these two different preview one just for component sake and another one how our component is going to look like in one actual system screen right now let's move towards the next thing and let's learn about text composable in jet Peg compose although we have used it but this is the simplest version of a text composer we need to do a lot of things with text at a given point of time we need to customize it we need to give some custom size we need to give some custom color we need to change the text style and so many things right so let's try to create our own text component and the main idea behind creating our own text component is we should be able to use the text component anywhere inside the application and it will be kind of reusable B based on our requirement so the first step is let's minimize everything let's create one function let's call it text component and annotate with composable annotation all right and inside this we are going to use the inil text composable it has a load of things to offer we can pass text modifier color and so many things for now let's try to take some value for this text from user okay and we can pass this value here for this text okay and this is basically a named parameter for this text composable function and we are just passing the value which we'll be taking from the place where we are going to use this text component okay so consider it like this this is a normal function inside this we we are using jet Peg compose in build text composable so if we want to show anywhere a text we can use this component okay so as we are having this hello word composable inside this we can just use our own text component okay and for the value we can just pass this string template okay we can remove this now and this is going to look like this because as of now we are just showing the text so this is our text component okay and we are going to extend this with multiple functionality now but let me tell you this if you are an Android developer this is a text View and if you are new to Android programming is just a label or paragraph okay now the next thing is text size how we can change the size of this text on the screen right that is very very important so we can just take this in the next line this as well we can just add font size this one okay and we can just pass here some value let's say 18 SP we can import this SP and this is going to update the value here okay you can see the size of the text has increased if we change this to 180 it will increase it much further right so let's say if we just has 24 SP as the text size so it is going to fit in perfectly okay but as of now this is a static right because if we are calling this text component from multiple places we are not passing the size as per our requirement right for all the text as of now size will be 24 SP so this is kind of static but we want to make sure that wherever we call this text component based on our requirement and we should be able to pass the Tex size so we can make this as well Dynamic we can add this as a parameter we can call it let's say size and this is going to be of text Unit type okay now when we call this text component from anywhere inside our application or in this screen we need to pass the size as well okay so let's go to its uses and here we can just pass some size let's say 24 SP from here it's self we can also change this size as per our requirement let's say we want to make it 36 SP so it will increase again and it's totally customizable based on our requirement next thing is how we can change the text color right that is also very important so for that we can just use color named parameter and we can also use these predefined color from Android X compose graphics right so if you want to change this to Blue our UI will update with blue text color if we want to change it with the yellow so our UI will update with the yellow color it's totally customizable we can just use let's say green and yeah it's looking nice we can also use red or any color based on our requirement now you can see that this is also a customizable option we can have multiple different requirement and from different different places we can need different different colors so we can also make it customizable we can just add one color value parameter and we can just use color as the parameter we can remove this and we can just use color value okay and we can go to its declaration we can just use any color here color dot let's say we use magenta okay yeah it's updated we can also take this in next line for better readability like this now next thing is how we can change the font weight for any given text or any paragraph inside our layout so to change the font weight for any given text we can use Font weight this is a named parameter and we have multiple options so either we can use medium normal light we also have VA extra bold and thin and so many other things so let's say we use semi bold okay so we can see it's increase little bit in size if we just use as thin the size will change like this okay so let me just zoom it so you can see the difference right now it is thin if we change it to bold so it will be like this okay and not all the text or paragraph inside our application will be of type bold so this should be customizable and for that we can add another parameter let's call it font weight value and this is going to be of type font weight we can just use it here okay and instead of passing the value manually every time we use this text component we can also utilize the default value right we can also pass a default value for this parameter because most of the time we will go ahead with normal font weight itself right so we can just pass font weight dot normal okay and now we no need to pass every time if you want to change this to some specific font weight we can do so with let's say thin and it will update to thin font weighted sty right but if you don't want to pass it it's completely fine it will just take the default value we have provided we can take these in next line so it will be better to read and now the next thing we want to learn is how we can make it italic if we want for example so we can change the style with font style named parameter and we can use font style dot normal or italic if you want want to make it italic we can just pass this and it will just update the text style we can also use this here font is style value okay and let's use it here and let's pass with one default value okay default value will be normal most of the time it will be normal and as we are not passing it manually here so right now our font style is is normal now next we are going to learn about maximum number of lines so we have this option where we can limit the number of visible lines in a text composable okay so we can do that with the help of Max lines this one okay and we can pass the maximum number of lines we want to show inside a text composable so to set the maximum lines first we should be having a longer text is string right so let's take this out let's go to Hello word composable here we have this value right hello name hello vat which is coming here right and let's use this extension function called repeat and let's add I need 15 times repetion for this text comment this preview also first for now okay so we are only seeing preview in Mobile screen okay and it has 15 times this hello brat right now we want to restrict that we just want to show maximum two lines inside this text composable so we can use max line equal to two and our text composable will update and it will only show the maximum two lines but our actual text is very long if we remove this we can see that our actual text is very very long long right but we are only showing maximum two lines right so we want to show some kind of indication or some kind of text overflow right because we are limiting a long text so we should be able to indicate that there is a text overflow but we are only showing two lines of it right so this text overflow is only shown when the display text is trunk it right because it was lengthy but we are showing a sort version of it so we can use text overflow and how we can do that we can use another property here and we can call it overflow and we can use text overflow dot ellipses okay so it will show that there is some kind of text overflow it was a lengthy text but we are only showing less of it but we will not be restricting our text composable that just show only two lines all the times so let's make it customizable we can just declare one parameter here Max lines value and this is going to be type int and by default it's going to be null okay and let's change this code here let's use max lines value if we have passed any specific MAX Line number we will use that if it's null we will just use int. max value which is going to be very lengthy like these many lines and this will always show the entire text okay so we have used it now if we try to just go to the Declaration we are not even required to pass the max lines and everything but if we want to restrict our text we can do so how we can do that right we just need to use this named parameter we can pass let's say just show only one line inside my text composable and it will show it perfectly it is also showing that there is a lengthy text but we are just showing a short version of it so we can remove it for now like this okay and that's about it this way we can use max lines and text overflow as well now the next thing is modifiers so in in jet Peg compose we have so many different different compose UI elements we can also Define our own composes but the modifier remains similar modifier is used to decorate these composes it can be inbuilt composable it can be a composable which we have defined on our own if we want to decorate these UI element we need to use modifier for example if you want to add some kind of background some padding we can use modifier so if you are an Android developer most of the XML attributes you are familiar with like ID padding margin color Alpha ratio elevation all of these things can be done with the help of modifiers okay so let's say we have this text component as of now right we have this text composable if you want to add some kind of background to it how we can do that we can do that with the help of modifier so to use modifier we just need to use this named parameter called modifier okay and we need to use modifier dot background this one and we can pass here some color let's say if we want to pass gray we can pass it here okay and our text component will be having gray background okay you can see that as of now it's taking gray background color we can change with any color let's say if we want to put black color in the background of this text we can just use with modifier help we are just using modifier do background color black now the next thing is if you want to add any padding to this text so as of now this text is just starting from the most left possible it does not has any padding and anything so if you want to add any padding to it we can do that with the help of modifier itself let's add padding okay so we can just add 18 DP we can import this DP here and it will have one padding to it okay we can see our text is having some padding now we can take these in next line for better readability and this is the most ex standard practice to keep it in this format okay and one another interesting thing modify respect the elements in order so as of now we are setting background color first then we are setting the padding right but if we set the padding first and then set the background so you notice the difference first modifier is setting the padding then it's setting the background color Okay so this way make sure that you use the elements in desired order if you want to set the background color for the entire height and width first set up the background color and then set the padding okay this is very important because modifier respect elements in order now the next thing is if you want to set some custom height and width for any given composable so as of now you see this text component is taking the entire screen right if you click on this it's taking the entire screen but if you want to just take only required height so we can do that with the help of modifier itself we can just say bra content height and this will only take the required height needed to Showcase this text but right now our text is coming in the center and is still this black background in the entire screen right so that's because as I mentioned modifier respect the element order so first we need to specify that we need brab content height okay we can remove from the end so now modifier is just taking the height needed to show this text it's not taking the entire screen you can see this blue line boundary is our text component okay but this is in Center so if we want to take this at the top we can just set a line and we can just use alignment dot top okay this will just put our text on the top of our screen and now we can see that our text composable is only taking the required height if we just update this and we set max lines let's say we just want to show four lines so our text will update and it will automatically reduce its needed height as well see this is the benefit and now we are also seeing this text overflow indication based on our implementation which we have just done right with this MAX Line and overflow right so if we just update or remove this and we want to show the entire screen our text will just increase it height automatically okay this is basically the bra content for Android developers who are coming from XML background and we can also use some different alignment if we want to just put it in the center we can just use Center vertically and if we want to move it at the bottom of the screen we can just use alignment dot bottom okay so it will just move the entire text composable at the bottom of the screen okay these are the different different ways we can align for now we are going to go ahead with top and if we want to make sure let's say we are not having this much big text we just have one normal small name okay and this is just a very small tiny string but as of now it's taking the entire screen width right if you want to reduce the width also based on its content so we can just use rep content width so it will just take the required width for the given text see as of now but it's in the center as of now we can just use align property again and we can just use alignment dot start if you want to put the text on the left hand side if you want to move it to the end of the screen we can use this alignment do end and it will take the text to the end of the screen and for now we are going to go ahead with start okay and as of now we have a small string but let's let's say we want to make sure that this text composable takes the entire screen so instead of bre content height and width we can just use fill Max size and this is like match parent for all Android developers out there who are coming from XML background we can also set opacity for any given composable with the help of modifier and to set the opacity we just need to use Alpha and we can pass the value between 0.1 to 1.0 so let's say if we want to set the opacity to 50% we can just use 0.5 and we need to pass the value in float so the moment we set the opacity you can see that the composable is dimmed out we are going to remove this opacity Alpha for now because we want the composable to be fully visible as of now okay if we want to use opacity we can use with the help of alpha as we just did now the next next thing is how we can add shape to our text composable or for any composable how we can add some kind of border so in jetp Peg compose with the help of modifier we can also set some kind of border and for example as we have this text composable and if you want to set some kind of Border surrounding to this text we can do that with the help of modifier and to set the Border we just need to use modifier do border and we have multiple different variation okay so let's go ahead with the simplest one we just need to give the width like how much width of the Border should be there so we can just set maybe 2dp and then we just need to pass one color Okay so let's say we want to use the same color so we can just take color do magenta and this will set one border to our text composable okay we can see that right now we have the text composable and we are using this fil Max size so the entire area is covered with the help of our text composable and when we set the Border it is setting for the entire text now let's remove this fil X size and let's use the repb content width and repb content height itself which we were talking about previously and it will just take the required height and width right for now let's set the width to the full screen so we can also go ahead like this fill Max width so it will just take the full bit of the Mobile screen but as we are using rep content height so height will be only as much as it's needed for this text composable right and as I was talking about that modifier respect the order of these element we are setting here so that's why you can see that first we are setting the padding okay so there is some padding then we are setting the border so we can also just take this padding first we can set the border and then we can set the padding so there will be some space in between this border and the text now it's looking much better right and by default it's setting the border with the rectangular shape we can also customize this shape so there are some predefined shape which jet pack compos provide us if you want to set some kind of rounded Corner shape here we can pass one shape as well and we just need to pass this rounded Corner shape okay and we need to pass that how much round Corner we want so we can pass some kind of DP size so let's say we want to pass the same Corner in all s so we can just pass 20 DP and it will just add one rounded Corner Effect one thing to note here that we have added this rounded Corner shape but is still this background color is going out of the shape but we don't like this and I think you would agree that if we are setting some kind of shape so the background color should stay within that shape shape right so for this we have something called clip and we can use clip with existing shapes we have so as we have this rounded Corner shape but as of now our text composable has become some kind of static or tightly coupled with these property because everywhere we would not like to set this black background and everything so we can just make it little bit custom and for that we can add one parameter background color this is going to be of type color itself and it's going to have one default value color dot white okay and we can just set this in place of coloro black here inside background tag so that it will be having one white background and we now need to pass this background color value from everywhere because this is a default value assigned parameter and for this border and padding we can use it whenever we want but for now let's remove this as well we could also make it Dynamic but for now we are going to just remove border and clip and we just need to have this default text okay this is the current state of our text composable all right so far we have learned a load of things about text composable and Jetpack compose in journal we can also add one preview for this if you want so how to add the preview as I have mentioned previously we just need to add this preview annotation and we can just take this part okay we can add it here we can just tell it like this preview and that's it and inside this we can just add this composable so as we have most of the times some default value but we don't have default value for these parameters so we need to pass we can just take from here as well this one and and we can just add it here but we don't have any name or anything so for now we can just add hello Sachin and it will start reflecting if we just look at this preview all right so as of now we have covered all of these things and now let's move forward to the next topic how we can create some custom layout in Jetpack compose right so if you want to build any screen there can be n number of different different views right there can be a text there can be a button there can be some kind of list or something right we can also add some kind of edit text kind of component where user can input something so we need to learn how we can arrange these different different composes or child views in any specific orientation right so if you are coming from Android application development so you know that we have linear layout we have relative layout and we also have some kind of orientation which we can provide in our linear layouts like either we want to arrange our children in vertical manner or horizontal manner so we should be able to you know somehow manage the children composable in specific orientation in jet Peg compose as well and that is the next topic we are going to learn but before that let's clear out this code from our main Activity one thing to note here is that all of this composable or composable preview are out of this main activity scope main activity scope ends here so we can just keep these composes or preview code anywhere inside our project so for that let's create one new file and we can just call it app components and this file will contain all of the composable or the respective preview so we can take out all of these composes and we can just cut this and paste inside app compo components okay and now if we see that all the errors are solved and our main activity is also looking cleaner and we can just organize the Imports because now all of the things we are accessing from this app components file okay now main Activity Set content is taking this hello word composable and this is having the text component as a child and all of these things are at one place is called app components now as we were discussing about how we can design custom layout and how we can arrange the view inside one is specific orientation so for that let's Design One new composable or let's say we Design One new screen so that will be very easy for you how we can design one new screen for each and every different examples we are going to take so let's Design One layout in horizontal orientation so for that let's Design One new screen first and let's take one cotlin file and let's call it horizontal screen okay in this step you will also learn how to design a layout in which we can arrange the children view in a horizontal Manner and you will also learn how you can design one new screen for your application using composes okay in jet Peg compose we have something called row and column so if you want to arrange the view horizontally we can use row and if you want to arrange the views vertically we can use column and in this example we are going to consider row composable this comes up with jpeg compose and for that let's start by defining a composable function first and we can call it horizontal screen itself which we have used as the name of this file and we need to add this with composable annotation and inside this we can use row composable with this this is a inbuilt composable and it is coming out of Jetpack compos Library itself if we go to the Declaration we can see that this is a composable itself and if you are familiar with Android development with XML so you can consider this row composable as a linear layout with horizontal orientation okay so this is kind of a parent composable you can think off and within this scope we can add multiple child composable okay so let's close all of the other files and as we have developed some custom components right so we can try to use this text component as well so let's close this and within this row composable we can use any composable our own defined composable or some composable which is directly coming out of Jetpack compose we can use this this is coming directly from jetpack compose we can also use this which we have declared okay so let's start with the simplest one and we can give any text here so let's say we are giving text one okay we can also use another text composable and similarly we can use few others right now we have four text composable inside this row composable so this row composable will show each of these child next to the previous one how it is going to look like we can just Define a preview with this preview annotation we can define a composable we can define a function horizontal screen preview like this and within this we can just use the composable there is some preview coming up in the right side but let's add show background as true so that we have some kind of visual representation for the background ground as well so we can see that there are few text composable and all of these text composes are arranged in a horizontal way right now how we can customize it right or how it is going to look like in a screen so first of all let's use this flag show system UI as true so that we are able to see that how it's going to look like in a Mobile screen and now we can see that all of these four four text are placed next to each other but these text are not taking the entire width right so for that our row composable can be customized and we can add here modifier and with modifier we can just use fill Max width and then the entire row will be filled so we have defined that our row should take the entire width of the screen but is still our text composable are placed just close to each other now the question is how we can Define some rule or some regulation inside this row composable so that all of its children can take up the equal space inside the Mobile screen for that we have some kind of arrangement and Alignment we can use something called horizontal Arrangement and we have multiple option so let's say if you want to put some equal space in between all of these child text composable we can use space between okay and it will put equal space in between all of these text as we can see in the screen yeah and if you want to use some space around all of these text composable we can use this Arrangement do space around and it will also put some space at the start and at the end of these text composable we can also use space between so that it will just put some some space in between of these text composable we can also arrange all of these text composable at the end with the help of arrangement do end okay so let's say we are using space evenly and it's going to put even space at the start in between and at the end okay and then if you want to arrange these text composable a little bit down we can use vertical alignment and we can use alignment dot let's say bottom okay and and we can see that all of the text composes are aligned at the bottom we also have other options like Center vertically and this is going to put all of our text composable in the center okay so with the help of this horizontal Arrangement and vertical alignment we can customize our row composable and as of now we have seen that we are using this composable which is directly coming out of jet Peg compose we can also use our own composable so for that first of all let's just give some default value here let's say we want to give a default size of 18s so that we don't need to pass this from everywhere and the default color we are going to have is we have used it somewhere color do magenta okay this one and inside we are just customizing our text composable as we have just seen in some time back back we are going to use now our own text component okay so we can just modify it here and for text we are having a parameter called value so we can just add it here okay and then other parameters are also having some default value so we no need to Define okay so if we notice our screen is just showing up one text and it is taking the entire width right that's because we are having having fil Max width here if we just use W content width so it's going to take only the width needed to show the text we can also give some custom height for our row composable let's say 400 DP and we need to import this DP extension now how to understand that our row is taking only this much height or not let's try to add one background color as well so we can just pass color dot black so we are using color do black now but with the help of this height 400 DP is still we are seeing that the entire screen height is showing up in the black background that can be because we are just using this inside the preview so system UI as true let's try to remove this and see our composable preview is taking at least some height if we try to modify it let's see if it's reflecting here as well so if we reduce it to 100 DP so yeah our row composable is actually modifying so if we try to just revert it back to 400 and let's try to run this on our emulator so we'll see if it's taking the actual height and width yeah we can see that our composable is just taking 400 DP and if we are using show system uis true although it's showing the full height taken in the preview because we are using this flag but actually it will take only the height which we have assigned to the row composable with the help of modifier okay and for now if we try to modify it to 200 it's modifying right how cool it is with jet Peg compos we no need to build multiple times as well right we can see that it's Lively updating on the emulator part as well that's very cool right and I know that load of things are becoming a stable day by day compose multipli form and all of those things we are going to learn all of these things eventually on Native mobile bits so stay tuned and now let's move towards the next topic we have now next thing we have is something called column in Jetpack compose so if we try to put some child composable in vertical manner we can use use column so for that first of all let's define one another screen with the help of one cotlin file and let's call it vertical screen okay now let's try to Define this vertical screen composable from the scratch and why I'm designing this from scratch so that you get a groove of it all right basically the more you see how we can code in jet Peg compose the more you will easily understand all right so for few of the examples we are going to use this strategy where we are going to Define one new composable let's define one new function vertical screen okay so in jpeg compose we can Define any screen with a composable as well so you can understand right like these composes are kind of a view which take some space on the screen and this time we are going to define a vertical screen where we want to put some children in a vertical orientation manner right so for that we have something called column now before we start adding some composable inside this vertical screen column so before that let's open our horizontal screen we have this example we have some preview as well so we have these text right so let's try to add these text between our column composable scope now I am wondering how our vertical screen is going to look like for that let's quickly Design One preview as well with preview composable we can just take the same name we can just add it with preview and here we can just use our vertical screen composable and our preview will be ready let's build and refresh and we are going to see how our vertical screen is looking like all right we have all of these text composable arranged in vertical orientation but let's modify our column little bit it's not looking much pretty right so to modify our column we can use modifier now with the help of modifier we can just use fill Max width so that our column take at least full width of the Mobile screen now it's taking full width but our text components are only taking the needed height it's not filling the entire screen width that's because we have just modified with r content width and if we modify it with fil Max width now our column text composes will take the entire width right now let's try to add some custom height so first we can go ahead with fil Max height and it's going to take the entire space on the screen and to see that first of all let's try to run this on emulator because there is some kind of preview we can say which is having fil Max height but it will be better if we run this own a device right so for that let's try to go to main activity and change this to Vertical screen and run this on our emulator code is running and we can see that there is our column composable in the center of the screen but to identify it much better we can add one background color Okay so let's add we can pass color dot black and we can see that our column is there and it is also taking fil maxed height so that full screen height and width is covered if you want to just take the required height we can do so with the help of R content height and let's try to run this so we can see that our column is there but we cannot see any background right because we have covered our entire column height and width with these text composes if you want to see some kind of difference we can add some kind of padding let's say 18 DP we can import it and at least there should be some kind of preview of the background color in the back yeah we can see there is some black color which is the background of our column so I hope with this row and column colum composes now you have some idea that how we can customize the layout right we can use column composable if you want to put some composes in vertical Manner and we can use row composable if you want to put something in horizontal manner all right so let's go ahead and let's try to use this vertical screen itself but we are going to customize it with some new composable so let's learn about some new composable first let's close this and open our app components file let's minimize everything and this is the file where we are adding all of the composes which we are trying to create right so now after these text composes preview row and column we are going to learn about buttons so in almost every screen there is some kind of buttons right so where we can click and we can perform some kind of action so for that we should be knowing how how we can define a button so let's start by creating a simple button for that the first step is let's try to create a composable okay let's minimize this for now so let's define a function let's call it simple button for now and this is going to be our button composable function okay inside this we can just use the predefined composable from jpeg compose and then we can modify it based on a requirement okay so this is the inbuilt composable and if we just go to the Declaration of it we have so many things the first one is it's kind of a onclick call back argument and within this we are going to get a call back when someone tap on the button all right and then we can also customize our button with the help of modifier with shape and so many other things then we can also pass some kind of content within this button scope let's try to do this and understand all of these things by doing it okay so we have this on click here remove this too we will Define some kind of code here which we want to perform when someone click this button right so let's say we want to print some kind of log for now right and we can just add with this composable name and let's add add button clicked okay this is the log which we want to print when someone click on the button now first let's Design One preview so that we understand how our button is going to look like right for that we can just Define simple button preview within this we can just pass simple button composable so we can see that we have a small Button as of so now let's try to modify it so we can use modifier and with the help of modifier we can increase the bit for now let's use the entire width of the screen to Showcase inside our button and we can see that our button preview is updated and we are seeing some kind of full width for our button now we want to customize the content of our button so for that we can add a text composer we can also use our own text component let's use this and for now let's say we want to add click here okay this is the text which we want to add so we can see that we have some kind of text and as of now it's not looking pretty because this text component is kind of a text specific composable which we have designed so let's say we design one another composable and we call it normal text for buttons okay this is the composable which we have added for now and this composable function is going to take some kind of value which we are going to show inside the text and inside this we are going to use the default inbuild text and let's pass this value here okay for now let's try to use this in place of text component okay so we are having this button component and inside this we are using the button from the jetpack compose we are modifying it based on our liking and within the scope of this button we are going to add one normal text okay so for now we have passed the value click here and we can see that our button preview is updating right now we can modify it little bit and we can make it much prettier so let's try to just add some kind of modifier for our text and let's try to pass modify do fil Max with that's the default for now and we are also going to pass some kind of padding as well so let's add 18 DP as the padding for all sides so our height is increased right so we can also reduce if it's too much I think so 8 DP this is the early stage for our text composable for button right so this is our button composable we are using this normal text for button within the scope of our button composable and that's why we are seeing this text inside our button composable if we want to increase the height of our button we can just give here some custom height let's say 100 DP and our button height will increase to 100 DP but I think 100 is just too much let's use 68 DP so I think it should be little bit nice so for now let's try to use this simple button inside our main activity and should we replace this or should we just customize our vertical screen we can customize as well let's use our simple button here and now if we try to run the application our screen will be having the vertical screen and one button as well but this black background and all it's not looking much better so I think I'm going to remove this background for now and now it's little bit better right now let me explain you what we have done so far so this is the main activity we have inside this we have defined one vertical screen as the starting point of our main activity and within this vertical screen we are having a column composable and we are having some components so column composable is basically responsible to arrange all of these child composable in vertical orientation okay these are normal text component which we have designed you have seen in the previous part of this video then next thing we have this button which we have just designed inside the simple button composable and we also have added one call back on click and that means that whenever any user or someone will click on this button so let's try to open the loet let's add this tag here so when we click this button we got this log it's coming with today's date then we have the tag which we have added here and we are having this message button clicked this one right so so whenever we are going to click this button we will be getting this callback on click and the code which we have inside this callback will execute so let's click again and we can see that as much as we will click this we will be keep on getting these logs right because our code is executing within this callback we can also customize our button with the help of shape we can provide some custom shape jetp Peg compose also provides us some inwi shape like rectangular shape this one and the moment we use rectangular shape we can see that our button is updated we can also use rounded Corner shape and we need to provide some kind of size for rounding effect so let's see we just want to provide 12 DP so our button will be updated with rounded Corner we can also increase this let's say 40 DP or something so it will keep on increasing the rounded Corner effect but let's go ahead with 2tp okay this looks nice now the next thing is how we can put this text in the center right so for that we have this text composable within the scope of this button right we can update this text composable we just need to add text align and we can just use text align do Center and it will place the text in the center now if we increase the size of of our button Also let's say 108 DP our text Will is still be in the center all right let's R it back and let's move to the next topic and now we are going to learn about text field if you are an Android developer and you are familiar with edit text text field is the similar thing in jet Peg compos and let's go to the vertical screen and let's modify this screen little bit let's say we are going to change the value hello there okay we have changed this value let's remove all of these text and for the second text let's enter some description please enter your name okay this is the normal text we are having as of now so now for the first text let's change the color so for color we are going to pass the value and we are going to say color dot black okay and let's increase the size also so we can just check what we have we have size as well we have font value as well so let's pass the size for this text first and for that we need to just use size and let's say 24 SP okay then we also need to change this font weight let's change this to font we do bold okay now it is looking little bit like a heading or something it's nice and then let's go to our app components and we are going to Define one new composable for text field okay so let's create one new composable with this annotation and function and we can just call it simple text field or we can call it text field component okay and inside this we are going to use one predefined composable from jetpack compose it's called text field okay this one now text field this is kind of a new user interface in jet Peg compose and it is used to allow the user to enter any text okay if you want to take any input from any user we can use text field component for a simple example if you have a login screen there you can take input from user some kind of email and password so there we can use text field component obviously we can modify that xfield component based on our requirement okay so if we go to the Declaration of it we have a load of options we can take some value we have some call back for own value change we have modifier and we have keyword option keyword actions single line MAX Line a lot of attributes we can use whatever we want to use based on our requirement so let's start with one simple text field and let's say inside our Simple Text field we are going to write one callback Lambda here for this own value change okay and every text field will be having some kind of value entered by user at any given point of time so for that we can use one variable let's say text this is one empty string for now now this text we can use in place of value that any given point of time whatever the text is entered by user we are just passing that to this value argument here okay now whenever user enter something we will get one call back inside this own value change we can just use one predefined name here let's say new text okay we have declared this inside this Lambda callback and we can update this text text with the new text entered by user okay and we can just click on this and we can op in for experimental material 3 apis all right so this is the normal way how we can just create one very basic and simple text field we have used this predefined text field composable we have created one variable text to hold the value entered by user and whenever user is changing the value we are just updating this value and which eventually will update the value shown on the screen okay so let's try to use this and let's see how it is going to look like okay so first let me just create one preview for this and the quickest way will be just copy this call it text field component preview and access your text field component here okay now we can just try to use this inside vertical screen so we can put this text field component above this button so let's access text field component here and let's try to run our project so we can see that there is one edit text but right now UI is broken right so let's try to modify this with modifier as well let's try to add one modifier and let's give full width with with the help of fil Max width this one so we can see that yeah our text field is having some kind of full width available now we can remove this from preview because it's already added in the actual composable now our text field is looking very empty right so we can add some kind of label and label is basically kind of some text information on top of the text field placeholder okay so for label we can just add with the help of this and this can take some component inside this scope so let's say we were having one normal text right this normal text for buttons Etc so we can modify this or rename this with normal text okay and we can use this in place of label as well and let's say for label we want to pass your name okay only this much and then we would also like to add some kind of placeholder so that this is not in empty State completely and this can also take one scope here also we are going to Define one normal text and let's take this please enter your name this we will Define okay so we can just take this one and let's remove this text component for now and let's add that here okay in placeholder now let's try to run our application once again and let's see how it's looking like now okay so our application is installed but as of now everything is coming in Center this label as well this placeholder as well that's because within this scope of label and placeholder we are using this composable normal text and within this normal text we are using this text align as Center and this is by default as of now so it should not be Center by default so what we can do here is we can add alignment and let's say we are going to use by default text align do start okay and we are going to use this alignment in place of text align now we are using it from multiple places now let me show you what happens when we use one composable at multiple place but we change it suddenly okay so let's run it right now our button is having text in center but now everything is in the start so that's why be very careful Let's see we are using it here in the button okay we can pass the alignment from here text align do Center so now for button we have have the text in the center and for edit text or text field we have the text in the starting all of these things label and placeholder right but now still we have some modifications to do right now all of these things are coming very close to each other right so let's go to Vertical screen if you are a little bit confused let me summarize once again we have this main activity then we have this vertical screen and within vertical screen we are using column to arrange these children in vertic orientation we are having this text component for this hello there we have this text field for this edit text kind of composable then we have this simple button okay let's try to modify this either we can add some padding or something here or the best thing will be we add one spacer here okay spacer is kind of one empty view you can say and we can just use modifier do height and let's say 10 DP okay so now we have some kind of empty space here and there right so let's add little bit below text component as well yeah now we have one text composable then some empty space then one edit text then some empty space or let's make it 40 okay now it's much better and let's go to this text field component and and here can we enter anything yeah we are typing but it's not updating right that's because we are not using any states as of now we are just having this text as a normal variable so what we can do is we can use some kind of mutable States and mutable state is a very wide topic I also have separate videos on that you will be seeing those videos on the screen right now you can also check those out and in the next video I'm also going to explain much more about States but for now you just learn how we can use it so this is the syntax we have this V text right so we are going to remove this and we are going to use by remember okay this one and within this we need to write mutable state of and here we can just use 1 m string okay but right now it's showing one error because it is not importing the correct thing let's import get value and set value as well okay now that error will be gone now whenever we are getting some text so we are just updating with new text and we are having from estate okay so if we try to run the program now so we are using this mutable state right right and let me explain you why we use this mutable state so basically in jetp compose we try to use some values with the help of observable so if you are already familiar with observable concept you know that if you are changing some observable value and someone else is listening or observing that value so whenever that value will change they will automatically get it right so that is the same concept we use with the help of mutable state but for now you can understand that mutable state it just written an observable value for jetp Peg compos so if the values change by user like user is entering some new value so UI will get change automatically if we are using mutable State value okay so now if we try to enter something here let's say such in so we can say the UI is updating right we can also update the size of the text with the help of text style here and let's say we are using this text style and inside this we can pass font size let's say we are using 21 SP okay we also have some other things we can customize like color weight style and all of these things will it affect yeah the size is increased right we can also change font weight for example let's say we want to use Font we do bold and now if we enter something we can see it's coming in bold if we try to make it italic we can use font style and we can use font style dot italic and our text will be in italic now right if we want to change the color or something we can change with the help of color dot magenta or any color we can take right right if we try to use blue color so it will again update like this let's use Virat Ki and it will update the name so we can also change this placeholder style and that we can do with the help of this normal text updation because we are using this normal text inside label and placeholder both so let's increase some size here let's say phone size is 16 SP okay now we can see our placeholder and our label text size is also increased if we use here hello world our text and placeholder both are visible properly let's remove this font style first of all and one another thing is as of now you are seeing all of these things as characters if we want a keyboard with number so we can just use keyboard key options and we just need to use keyword options we need to pass keyword type here and our type will be keyboard type do number and now if we try to enter here anything we'll be having some kind of numbers now let's close all of these things and let's learn about the next topic which is going to be image in jetp compose so let's create one new composable we can minimize everything and let's create one new function a composable function and this time we are going to call it image component okay now inside the image component composable function we can use predefined image composable which is coming out of jpeg compos Library okay so we can just use this and to create an image we need these f foll ing parameters painter and the content description okay so painter is basically a parameter which can help us to load a dyal from our resources so if we have something some image inside our drawable folder like we have this logo one and thumbnail so painter can help us to load these images into our image let's try to use one of these image so I have this logo our Channel logo let's try to put this inside the image composable first let's take this in the next line this as well now inside painter parameter we can just use painter resource and we can pass the ID of our image which is going to be logo one and in content description we can just pass any text we want Channel logo okay now let's try to see how our image is looking and for that we need to create one preview and we can just take this code put it here and call it image component preview let's take this in the next line for cly bres and let's access image component here okay now if we open the preview window there will be one preview for our image as well yeah we can see this is the image component preview we have we can also add some kind of background here right and this is going to be a image let's add some system UI flag through as well so that we can see how it's going to look like in one full screen okay this is our image component preview now if we want to customize our image we have all the possibilities available with the help of modifier alignment and content scale we can also apply some kind of alpha for opacity and if you remember we were learning about Alpha in the starting of this video as well and we can also apply some color filters so let's try to use some of these properties inside our image component okay we can obviously use one modifier here and with this we can also use rep content height so that our image will take only the needed height and it will not take the entire screen space now let's do one thing let's add this image component in vertical screen because here it is just showing system UI so it will not be much Clear like what's happening inside the screen let's add below button okay now we can open the preview here and our image is showing up inside the vertical screen let's also run this on emulator and let's hide this code okay so we we can see that our image is showing up let's try to change this image once with thumbnail okay we have our thumbnail image also visible on the screen but we can see that as of now there is no space in between this button and image so let's go back to Vertical screen and let's just add this spacer okay now there is a space let's increase this to 40 now it's having some proper space and let's go back and let's try to change this to logo one okay now if we try to set some kind of background color can we do that let's try to see that with modifier color dot black yeah we can do that so this is the image we have as of now this is just taking bra content height and width is also bra content as of now but can we set match parent yes we can with fill Max width okay then it will take the entire width space for this image if you want to set some kind of content scale we can also set that so let's try to set content scale so we have multiple option like content scale fit grop fill inside fill width and fill height as well so let's try to use crope see right now if we are using crop so as we are having rep content height our image height is increase because it's just trying to zoom in a little bit with the help of this scope now let me show you one trick let's say we have one rectangular image or some kind of image we have let's remove this background for now and let's say we want to make this image as a circular image right so to do that first of all we need to give some size here here okay for all kind of directions so let's say we are giving 108 DP this is the size now we can see that our image is a a smaller Square kind of thing but can we make it circular so we can with the help of clip and we can just give circle shape okay and our image is in a circular shape right we can also increase this size our image will be circular itself now one another important feature can be if you want to load some image from the network right so I have one separate video already for that and you will be seeing the thumbnail of that video right now on the screen you can also check this video out at our channel in the recent videos now let's move towards the next topic and in the next topic we are going to learn about list in Jetpack compose let's close all of these things let's go to our main package and let's create list example one new file and let's minimize this and let's create one composable and let's give the name list example this one and we can also create one preview quickly let's add preview annotation and let's add list example preview and basically you can give any name for your preview but I try to follow this convention where I just take the composable function name and upend it with preview inside this we can just use list example okay now we can open the preview we can just click on this build and refresh now we are done with basic set of for our list example now let's understand that how we can design a list in Jetpack compose so in jet Peg compose we have to invt spatial composable called lazy column and lazy row now these things are equivalent to list View and recycler view in jetp Peg compose okay now if we are using a vertical list or if we want to produce a vertical scrolling list so we can use lazy column okay and if we want a horizontal scrolling list we can use lazy row and we have learned about row and column so if we want to show some kind of composable in horizontal orientation we uses row same way if we want to have multiple composable in horizontal Direction and we want to scroll as well so we can use lazy row okay and similarly as we have implemented our vertical screen with the help of column if we want to have so many children so many children composable in vertical orientation Manner and we also want to scroll through all of those comp composable we can use lazy column okay let me show you how we can Implement all of those things so let so first we are going to learn about lazy column and with the help of lazy column we will be able to show some specific items or some given items in a vertical orientation okay so let's use lazy column this one and we are going to use this with Lambda let's remove this for now let's say we have some values and and I have created this list this is basically a string list it contains so many string values right and let's say we want to show all of these string value in one vertical manner okay so we can just use items and we can pass these values okay and we can just use this Lambda scope okay it will give us one item at a time and this is going to be of course of a string type right and this is basically not mandatory to define the type also here but we can Define if we want then we can use any content here for example let's say if you want to use normal text and we can pass the value which is going to be one item okay so let me explain what we are doing here we have one list of string right and then we have declared one lazy column composable inside the scope of this lazy column here we are using this items this is basically a lazy list scope itself and we have passed that these are the values which we want to show inside the list then this is basically kind of a for Loop here we are getting one item every time and we are showing that one item inside normal text okay you can see in the right side our list has inflated with these it items right so if you want to update this normal text either we can just go here and update this with the help of this modifier and text style or we can also use our text component let's try to use the text component here and our preview will update our list view will update because our text component has some colors some style and so many other things right but as of now these items are not sufficient to scroll so what we can do is let's just take all of these things in one line right and just copy this line so there will be some more items basically we just added duplicate items in this list right now if we try to scroll we have one proper scrolling effect so this is basically the list scope whatever we want to show in one section for our list we can add add here so as of now we are just having text component but let's say we want to add some kind of divider in between these items we can do that with the help of spacer let's say we want to add one small black separator or divider in between these items we can do that with the help of modifier dot fill Max width this is going to be the first thing and then we are going to use height 1 DP okay and we are going to add one background color let's say color dot black it will give us one nice divider in between these items now we can scroll and we will be having this in between all of this list item this is our vertical list let's say if we want to design one horizontal list we can just copy this same example and let's call it horizontal list example let's rename this as well horizontal list example okay and we have all of these value that's fine this also we need to rename horizontal list example preview and now we can delete all of these things and to show items in horizontal orientation we need to use lero and we can remove this content from here we are going to have items we need to just use this value this is basically a string list we have and we need to use Lambda scope within this scope we will be getting the item with it as well if we don't want to declare explicitly okay so we can just use text component and we can just use value it and this value will be kind of a string we'll be getting here right every time this is basically a for Loop in all of these values so you'll get this tiny wear first time then sweet kitty and so on okay we are showing that in text component let's try to run this first okay so we can see all of these items are showing up in one horizontal list we can just scroll it back and as of now there is no specific divider in between so here also we can use a spacer and with the help of modifier we can use width and we can just pass 1 DP okay and we can give some custom height so let's say we want to give height as 40 DP then we can add some background color for this divider let's say color dot blue this time we are going to have blue color and we can see that there is some divider but it's not properly aligned with our layout right so what we can do here is we can just add one row composable scope and we can put text component and spacer between this row composable scope okay then we can just give some custom properties here first let's use modifier and let's give some custom height let's say 60 DP okay then we are going to add some kind of vertical alignment with Center vertically and we are going to run our project once again so we can see that now our list is looking much better we have one divider also in between like this we have our horizontal list so this way we can have one horizontal list and one vertical list as well also we can try to do some interesting thing here let's say we have this main activity right so what we can do is we can just have one column we can just take horizontal list then we have vertical list which is just list example right so now you can see that one horizontal list is there then one vertical list is there right we can also add some kind of spacer in between these two let's say modifier dot height 20 DP and let's import it well let's do one thing let's just take this go to our app components and let's create one new composable here mix list and just use this inside our main activity okay now let's run this and we have both of our list inside our screen so if I change the background you will see the difference let's go here let's add one background as well with modifier dot background and let's add dark gray or something well let's say light gray okay so we have light gray background then on our screen first on top we have horizontal list which is coming here like this then we have some spacer so that's why there is some space and we are able to see the background which is light gray and then we have this vertical list so this way we can design our custom layout with the help of Jetpack compose and we have learned learn so many thing in this video These are the previews which we have created also we have developed so many layout for different different types of examples now once you are able to learn these concept I will tell you where you need to go next Once you learn all of these concept you can just open na mobile bits and there you will find two playlist one for mastering jetpack compose another one playlist where we have developed complete project with the help of jet spe compose if you will explore these playlist you will understand more details about each of these composes or how you can use these composes together and build something complete from scratch like some login or registration flow you can also learn how you can architect your compose UI in data and UI layer this is a well used architecture in composed project you can separate out your project into two layers UI layer and data layer and you can learn this in this video and then we also have one video for State validation as I was talking about state in today's video you can learn all about mutable State and how to use those states with the help of view model inside your jetpack compose composes in this video after that I also have one video on fireway integation with jetpack compose you can learn how you can use fireb in Jetpack compost project in this video also I have one video on scaffold in Jetpack compost scaold is used basically to show this toolbar or you can also use scaold to show this navigation drawer so you can learn all of these things in this video also if you'll go to the second playlist here you can find out the complete project which are developed with the help of Jetpack compos so this is a funf fact application ation where you can see a lot of things happening with the help of pure jetpack compos and nothing else and this is the video this is kind of a complete project with multiple other things like we have jetpack compos mvvm architecture we also have Co routines and dependency injection with dagger Hilt so you can find out this project this is basically a news short application and as you see there are shorts and reels all on so many popular application like Instagram YouTube and others so in this application we have news in short format you can just scroll up one after another we are fetching the data from the server we are filling it up with jet Peg compose and then we have this complete login and registration flow development with the help of Jetpack compose so I hope you will enjoy these videos in these two playlist basically you can find out all of these playlist at homepage and and also you can also go to the playlist section and you will find a lot of interesting things if you're learning Android you can check out this playlist if you are just trying to compete inside Android interviews you can check out this playlist as well for Android Studio feature and some tips and tricks you can learn from this playlist also there are cin interview questions as well and if you are learning Android with jetpack compos I would High recommend go through this playlist and this complete Android compose project okay and that's it for today's video friends and I hope that you enjoyed about today's video jetpack compos crash course if you enjoyed this please like share and subscribe to my channel and please be happy and please be with your loved ones I will see you very soon with another interesting [Music] video [Music] [Music]

Channel: Native Mobile Bits

Views: 11,518

Keywords: JetpackComposeTutorial, AndroidAppDevelopment, Full Project in Android, Android Complete Project 2023, Complete Android App Development Tutorial, AppDevelopmentTutorial, AndroidDevelopmentTips, AndroidStudio, AndroidJetpack, Jetpack compose tutorials for beginners, how to learn jetpack compose, Jetpack Components Android, Jetpack Compose Navigation Android Kotlin, Jetpack Compose Crash Course, Crash Course for beginners Jetpack Compose, Compose for beginners complete tutorials

Id: x8TYLiigOXM

Length: 105min 5sec (6305 seconds)

Published: Wed Nov 22 2023