Text in Compose || Jetpack compose basics

starting with jetpack compose can be little bit tricky if you have years of experience building layout with XML approach in this video I am going to show you how we can start with jetpack compose and what are the key terminology which we are going to use throughout our jetpack compose development so let's start today's video so we are going to create a new project for this video and we are going to use this empty compose activity so inside this activity we can write code in Jetpack compose so we are going to press next here we are going to call it as learn jetpack compose okay and this is the normal package which you are already familiar of and then we will finish the project so where project is getting created and Gradle is downloading the needed dependencies so our project is synced and our application is ready now we can start coding and we have these two dependency activity compose and compose UI which are needed for Jetpack compose initially as we move forward inside our learning curve we will use more compose related dependency as well so our project structure will be same we will have one manifest file then we will have one main activity or we will have multiple activity as well inside our package here as we have this main activity as of now but the main difference we can note here is we don't have any layout folder inside this resource directory right so we don't have any layout folder where we used to write XML layouts okay now we can just minimize this and for now let's delete everything I will start from very beginning so that we don't get confused and we will just get to know what we are going to add okay so before we start coding let me explain you few things in Jetpack compose every UI element is referred as a component okay and if we want to write any component we can use quarterly language itself okay if you are already familiar with XML development you know that every UI element which you see on the screen is referred as a view okay in XML we used to call every UI element as a view but in Jetpack compose every UI element is called a component okay and we can Define these component with the help of composable functions okay don't get confused I will explain you what is a composable function so if we want to write any UI element which is called a component in Jetpack compose we can define a composable function and how we can define a composable function is just a normal kotlin function we just need to add one annotation at the rate composable so let's start by writing our first composable function we just need to use this fun keyword to Define which we use to define any Codeine function then we are going to write any name let's say text component we are trying to Define one text component okay so we can Define one code in function okay and we can just add one annotation which is called composable okay this is The annotation this is coming from compose package itself so if you will go inside this annotation you will see that composable functions are the fundamental building block of an application built with compose so basically every application is built with different different component and in compose we can define a simple component with the help of at the rate composable annotation okay so now we have defined one composable function for our text component now we want to make it functional and compose makes it very simple to display a text inside our Android screens okay so how we can Define it X so in Jetpack compose the simplest way to define a text is if we can use this text composable with the help of a string argument okay so we can use this inbuilt composable and we can Define the value we want to show here so let's say we want to write hello world okay so this is the text which we want to show inside our text and this is the text composable okay there are few inbuilt composable inside our jetpack compose now we have defined one simple text component now how we can show this inside our UI right so in XML approach we was using this method right set content view this one and we was passing the view inside this but inside jetpack compose we have this set content function this is also a composable function itself basically all the composable functions can only be called from another composable so if we just try to use this here without this set content like this so it will throw an error so to call a composable function we need to first use this set content and inside this we can call our component or our composable function okay like this so if we go to the Declaration of this we will see that this is the parent composable for any activity okay this is our activity and then inside this this is the parent composable where we can add all of our components or all of our composable functions right so we have defined one text composable and we have added this inside this set content method now if we try to run this and let's see how it is looking inside our emulator okay so we can see that it's coming here but our text is very small and there is no styling inside our text now as this component is a function right after all this is a code line function so it can takes parameter also okay let's say we want to make this function as Dynamic right right now this function is having this static text we don't want to use this as a statically we want to provide some Dynamic text so we can add a parameter to this function so OK like this and then we can pass the value from here okay so let's say we want to pass some value so for that let's say we have a string file right we defined one string here welcome message okay we are passing some value here and then we want to use that value inside our composable so this is just our parameter name so don't worry about it if you want to remove this as well you can directly use value as the string argument but it's better that if you use these named parameters these are called name parameters okay now let's say we want to form one welcome message here okay so we can create one string we can use the value passed as a parameter to this function and then we can use this from a string Resource as well get a string dot string Dot welcome message okay and if you use this welcome message as this text value it will refresh inside our device so this way we can define a normal component one normal composable function and we can pass some parameter as the input to these composable okay and you can see that it is reflected inside our device also and if I tell you that directly use this string right directly use this welcome message so you can use directly like this and you can also use some compose specific method like a string resource okay and inside this we can just pass the string ID this will also do the same job it will also reflect the same message inside our screen okay now the main important thing is how we can style our text component or any composable right so every composable has some optional parameters which we can use to style our component so for example if we try to customize this text composable right we can do with the help of other parameters here so first let me just modify this little bit like this okay now we want to let's say we want to change the color of our text so we can use this color parameter and we can pass any color let's say we pass this blue color okay so we can run our application so you can see that our text color is updated now next thing is our text is looking very small so let's say we want to update the size of our text so we can just use another parameter called font size okay let's say we want to make it as 18 SP so we have this dot SP as the unit already defined which is coming out of compose package so if we run our application now our text size will update okay so our text is still looking little bit small now let's say we want to update the text size again so we can just use let's say 28 SP yeah now it's looking little bit clear okay and you notice like I am changing here and it's updating directly in the later see this is pretty cool right and this is very great feature comes up with jetpack compose so if I update 9 tsp it's updating let's get it back to 28 SP now let's say we want to update the style Texas style or font style let's say we want to make it bold or italic right so we can use font style and this is also some predefined style we have like we can use italic updating to the italic font now let's say I want to make this text bold as well right so we cannot use font style dot bold or something we just have normal and italic okay but we have something called font weight okay so we can use Font weight dot volt like this and if I run our application again so we can see that it is updating as bold okay so as of now if you see that we are having this composable inside this activity we can take this out as well okay our activity is ending here out of our activity we can use this text component okay and and as this get string needs the context and all we can remove this and Jetpack compose already has this function a string resource so if we just go here this will just load a string resource inside any given text okay we can use this now you can understand better that this component is exactly like a small piece of layout right which is coming from out of our activity because this is the activity here it's ending here itself OK this is the component which is outside of our activity class we can also take this component inside any separate class I will show you in the next video but for now let me show you one another cool thing so as of now if you are making any change and we want to see that reflecting we are running our project again and again right so we have one another solution we can use this annotation preview then we can use one composable function we can name it default preview okay and inside this we can just take the main composable from our main composition place which is text component in this case and we can add it here okay now if we click on this split tab okay we need to just build and refresh to render our UI inside this okay okay so now if I just show you this is our text and we can just see it here now if you make any change here inside our code it will reflect ideally should reflect here so if we change the color for example let's say we use any different color red for example okay so we'll hit update here yes you can check out that our text is updating okay so if we try to change some other style inside our text we try to use this thin okay if you try to use this font weight okay this is pretty cool right our text is updating right so we can just use this preview annotation and this way instead of running our project again and again we can just try to see the normal things here itself okay next thing is how we can update or change the width or height of this text view right so to change the layout appearance we have one parameter called modifier okay we can use this and we need to use modifier which is coming out of this compose UI and inside this we can have different different things now let's say we want to pass any custom width for this right so we want to pass 400 DP for example okay again DP can also be imported here as this is coming out of this unit which is already defined in compose okay we have defined one modifier we need to add this and and as our text size is little bit bigger so let's reduce the text size for now okay now you can notice the difference right and if we just update the height as well here with the help of height and let's say 100 DP for now okay so our text height is also increased now let's try to increase the text size again so like this our text size is also increasing this way we can use modifier so as of now we don't see any background color for our text view but if we run our application we are seeing this as a white color right so if you want to see some background here as well so you can just add show background as true inside our preview and it will start showing us one background for our text now we can change the color here to Blue again we can update the background and we can change this font weight as well medium okay yeah now it is looking little bit better right now let's say we want to add some padding and also in Android if you are familiar with XML we used to have padding start padding and padding top and bottom right in compose also we can use padding with the help of modifier and then we can just add padding so we have multiple option either we can add padding for all directions or we can just use horizontal and vertical padding differently we can also use separate different different padding as well let's say we use 18 DP padding for all side right from top to bottom and other direction so we can see we have one padding here now right this is when we want to use the same padding in left and old Direction let's say we want to use different direction right so we can Define the side here let's say start we want to have 10 DP okay then inside and I want to have 10 DP okay right now only start it is showing up then now we have ndpu as well and padding as well and let's say we want to add Tope more let's say we want to add 20 DP just to see inside our layout okay you can see that this is our start and end padding and this is our toe padding now if you want to add the same for bottom we can add same here like this okay 10 4 start and end and 24 to open bottom this way we can add padding as well we also have one option horizontal padding that means left and right means start and end let's say we add 18 for horizontal and for vertical we can also add any number okay this is our horizontal you can see for start and end and for vertical we have more wading like this we can add padding as well so right now we have height and width manually now let's say if you want to have height as match parent okay so we can just remove this and we can use fill Max height okay this will take the entire height for the given device okay you can see our preview has also been updated now it is taking full height okay if you want to specify width also as full so we can just Define fill Max width so it will take the entire width for the given device okay now let me tell you one very important thing in compose the order of these property we are adding with the help of modifier matters a lot let me show you this so if we have this fill Max width and height we have one padding also now let's say we have one background color okay we Define one color here light gray okay we are defining one color here as the background for our text composable which is taking entire width and height okay but did you notice that because we have added one padding here so it is just filling the background color after removing the pad trading from all sides so you can notice one very interesting thing here that we are setting the background for our text composable and our modifier that means our text is taking the entire width and height but is still the background color is setting only on this portion and we have some wider space because there is some padding okay now that's why I was telling the order is very important inside this jetpack compose modifier if we take this background color and we just said here okay so now you see the entire space entire text view composable is having the background color as light gray because first we have added the background so it is setting the background first and then it is setting the padding here okay this means inside text composable or any composable our modifier properties order matter allowed so make sure you are adding your parameters according to your need and it will work perfectly so guys that's it for today's video I hope you enjoy this and there will be many more jetpack compose tutorials coming on your way so please stay tuned and if you enjoy this please subscribe to my channel I will see you in the next video and also please do share your favorite part in the video in comments and please share my Channel with your friends who are learning Android

Channel: Native Mobile Bits

Views: 2,983

Keywords: androiddev, jetpackcomposebasics, JetpackCompose, AndroidCompose, ComposeUI, ComposeTutorial, ComposeComponents, JetpackComposeTutorial, AndroidDevelopment, How to learn Jetpack compose in 2023, Best Jetpack compose tutorials, NativeMobileBits

Id: EuZGaxymME0

Length: 19min 6sec (1146 seconds)

Published: Thu May 04 2023