Text Composable & Modifiers in Jetpack Compose | Android Studio

hey everyone welcome back to my channel in this video we will cover the basic of composable that is text composable and modifiers basic as in how we used to have basics of XML like text view button image view edit text and all of that similarly we have basics of composable as well like text modifiers rules columns box layout button image and many more so I have divided basic of composable in four to five parts once it is over then we will move on to little intermediate topics like creating bottom navigation or navigation drawer State flow lazy grid and all of that okay also basic of composable topics are very easy as well as very important because they are the foundation of Jetpack compost and it's like if your Basics are clear then you will be able to create any kind of UI by using jetpack compos got it now open Android Studio create a new project and choose empty activity that is obviously a jetpack compos activity name it as learn text and modifiers and done text and modifier both are completely different topics so first let's understand text composable so remember how we used to have text view in XML same way we have text in Jetpack compose what was the purpose of text view in XML to display the text correct same text composable also displays the text but in XML we used to have layout to write text view here we don't have any layout then where are we supposed to write in composable functions see this is default composable function and a preview function but we won't use them instead we will create from scratch so remove them and done now we will create a composable function on our own so to create that first write composable annotation then below it create a function I'll name it as learn text and modifiers I don't want to make it very complicated so I won't pass any parameters here then inside the function here we will write the text composable so write text this is the keyword this text has multiple parameters in it like if you will click on it see so many parameters like text modifier which we will see later then color of the text font size style family alignment and so many parameters right you are not supposed to edit this file you can refer it if you don't remember parameters okay so out of which I'll use a very simple parameter text to display the string first let's do that here write text is equal to in double quotes write the string so I'll write hello world and that's it but remember you are supposed to call composable function in on create method inside set content here call learn text and modifier method and now run the app look hello all text is displayed successfully great right now let's do more customization with parameters this is the list of parameters out of which we will use text obviously then color font size and font style so come back here write comma then color is equal to color class dot maybe red then again a comma font size is equal to 32 point SP again a comma then font style is equal to font style class do italic now let's run the app again look the text is in red color it's big and it's italic easy thing right now let's see how do we declare a string resource means in resource strings.xml here I'll create a text where string name is hello uncore text and string as hello world from strings now instead of using double CED text I'll write string resource where ID is equal to r dot string dot string name that is hello text and that's it now run the app and look now the text says hello world from string this is how you use string resource cut it this is all about text composable there are more parameters in it which we will cover with upcoming videos now let's move on to our second topic that is modifiers modifiers is a part of parameters in composable function like if you'll see here there is a parameter as modifier correct as this modifier parameter is present in text likewise it is present in other other composable functions as well like in button or image or checkbox and all got it but what does that do remember how we used to have padding background height width in XML now those parameters are present in modifiers like I'll show you first I'll remove hardcoded string because it will make you confused instead easy to understand string in double codes now see as modify is a parameter itself so give a comma here and write modify is equal to modifier dot here see a list of all the modifier parameters which you can use like I'll use multiple parameters so first I'll use padding as 22. DP then Dot and next modify parameter may be a background with color black and that's it now let's run the app see the background is black with a padding of 22 DP and that's it also one of the important parameter of modifier is clickable like how we used to have on click in XML same way using clickable we can make any UI element clickable so to do that first create a variable as click on text like this states that what action to be performed when someone clicks on it as of now nothing so I'll leave it as blank if you want you can give here a toast maybe then over here in modifier right dot clickable inside it on click is equal to click on text variable and that's it now let's run the app look everything is SE except now the text is clickable if you will notice it carefully and that's how modifier work also without running the app we can also preview it right let's see how so here write preview annotation with show background as true then composable annotation and then create a function as Show preview then inside it app Theme which is this one and inside the theme call Lar text and modifiers method and that's it now without running the app simply click on split mode maybe click on build and refresh and see it shows a preview of how a text looks like cool right so I guess that is it for the video If you new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 1,093

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

Id: RMQPHljE82I

Length: 9min 13sec (553 seconds)

Published: Thu Jan 11 2024