Create a Simple Android App

So, in the last section, you saw how to style text using the text composable various parameters. Now, you’re going to see how to style composable using one of those parameters called the modifier.

So, in the starter project — which, if you follow along so far, you — if you run the project, you will see it looks like this where the style has been changed and updated to look magenta and italicize and bold for the message text. First of all, to understand what is happening with the various modifier settings, let’s update; let’s add a modifier that will show us what’s happening, and that is on the column. We’re going to add a modifier on column, so in column and the parentheses and hit Enter, and then type in modifier equals and then modifier dot background. And I’m going to add a color, color dot, and let’s make it light gray. And then go ahead and build and run the app, and you can see now the column itself has a gray color behind it, so as we start adding other modifiers, we’re going to see, we’re going to be able to see what’s happening.

OK, so you see everything is left, left justified in the column and everything is going edge to edge. There’s no space between the components inside the column and edge of the column. So, first of all, let’s add another modifier. So we see modifier equals and then modifier dot background color. Click right before the dot, and hit Enter, and then, after this first modifier had entered again, and hit dot again, and you can add in sequence as many modifiers as you want, so you can kind of stack them.

So the next one we’re going to add for the column is fill max size, and for this, we’re going to just leave it without any parameters, and you can just go ahead and build and run again, and you can keep doing this to see how each change that we make is affecting things. So, you see here now before this area is white and the gray was only this part; now, the gray takes up the entire space, so this column is now taking up all available space, so you see what fill max size did.

Next, let’s add some padding within the column, so let’s add dot padding, and we’ll use 16 dp. Again, dp is density-independent pixels, so that it’s not affected by the user’s font size setting on their device. So, let’s build and run again, and you can see now there’s some space around the edge and the components, so the edge of the column there’s like the 16 dp space here all around them.

So, next one, let’s add some modifiers to some of the other composable. So, we have the text where we add all these different parameters. We can add another parameter, so let’s just put a comma after this last one and hit Enter, and let’s add modifier, modifier equals, and we can add multiples, so we’re gonna hit modifier dot, and the first one we’re gonna add is background color again just to see what the text is doing itself, so we can just add a background color to highlight that. So, let’s add color, and in this case, let’s use blue. So, color dot blue and build and run again, and you can see the color behind the text is now blue.

And let’s add multiple modifiers, so we’re gonna hit Enter here to put this on its own line. Another Enter and dot, and let’s add a padding to this one, so padding, and we’ll put in 16 dp. So before I build and run this, let me just look at what this looks like, OK? And let me build and run, and you can see now there’s some padding between the text and the background. The text, so this has a different type of padding, so this padding on the very far left is everything between the column, which is a parent container, and its children. And then the text has its own padding now on top of that.

Next, let’s go to the outline text field and add a modifier for that. So after value, go ahead and hit Enter, and type in modifier equals, and let’s add modifier dot fill max width. So, again, look quick — you can see here’s outline text field, and it doesn’t take up the entire space. We add fill max width. Build and run, and you can see now it takes up the entire space, and because we had added that padding in the column, it’s not going all the way to the edge. Let’s add some additional modifiers so we can put this on its own line and in press another. We can add a padding here and give this also 16 dp padding. Build and run, and now you can see it has some padding added, and we can add another one for background color, background color dot, and let’s make it green just to make it easy to see what’s going on. So, again, before and after.

So, there you have it. Now, you’ve seen how to add colors and stuff. Let’s do one more thing: Let’s modify the send button. So, here’s the button. Let’s add a modifier to it. So, after the on click, let’s add a comma and then add another parameter, which is modifier, and then let’s add dot width and set it to exactly 200 dp, and let’s also add an alignment. So, align, and then we’ll set the alignment equal to alignment dot center horizontally, and build and run, and you can see the send button has been moved to the center, and it’s become wider now. We don’t need this gray color in the background anymore, so let’s just get rid of that one in the column. So just comment this out, and build and run, and there you have it. So, I would play around with various modifiers and see how they affect your components.