Adding a Bit of Style

Modifiers

Modifiers tell a UI element how to lay out, display, or behave within its parent layout. You can also say they decorate or add behavior to UI elements.

So, you want your Text to be clickable? Then, add the clickable modifier to it. Want to make your Column fill up the whole screen? Then, add the fillMaxSize modifier to it.

It’s that simple.

Now, you might be asking: Why create a separate interface for simple things like making a Text clickable or setting the size of a Column? Why don’t we just add these features directly when creating the composable?

Well, this isn’t a good programming practice because you’d be repeating code for the features in different composables.

For example, if you add the clickable feature in the Text composable, you’d write almost identical code if you also want to make a Column clickable.

So, if you want to update the click code, you’ll have to update it in all your composables… and that’s not a fun experience.

Another reason you wouldn’t want to do that is because you want a composable to do only one thing.

• Text should only display text and have only text-related parameters.

• Column should only arrange its children vertically and have only arrangement- and alignment-related parameters.

  The same thing applies for a Button and other composables.

This follows the single-responsibility component of the SOLID principle developed by Robert C. Martin, popularly known as Uncle Bob. So, a class or a function should have only one responsibility, and if you ever want to change a composable, then it should be only related to its core responsibility.

So, if you’re updating the code for a Text composable, you should be updating only code related to text, and you shouldn’t be worrying about things like clickability and so on. In turn, this makes your code more focused, scalable, and maintainable.

Start Modifying Your Composables

Open the starter project for this lesson.

Build and run the app. It appears as it did at the end of the last lesson:

Find the Text composable:

Text(text = chatOutputText)

Update it as follows:

Text(
	text = chatOutputText,
	fontStyle = FontStyle.Italic, // 1
  color = Color.Magenta, // 2
  fontSize = 30.sp, // 3
  fontWeight = FontWeight.Bold // 4
)

If any of the properties appear red, mouse over them and click on the prompt to import the class, making sure to choose the Compose version of the class when prompted by Android Studio:

Here, you’re now passing in some parameters to the Text() composable:

1. fontStyle sets the style of the font, in this case, italic.
2. color sets the color of the text.
3. fontSize sets the size of the text. Note that here, you use sp for the unit. This stands for “scalable pixels”, as the user’s device font size setting affects its appearance, and the size set here is just a relative size. This differs from dp, or “density-independent pixels”, which are not affected by the user’s device font size setting. You’ll use dp later for sizing UI components.
4. Finally, fontWeight here makes the text bold.

Build and run the app, and you’ll see the message display text has been styled:

Text, like many built-in composables, can take many parameters. A great way to explore all of them is to command-click on Mac (control-click on Windows) on Text to jump into the definition of the composable, and you’ll not only see all the parameters, but also documentation on how and why to use each one:

Now, you’ve seen how to style text using the Text composable’s various parameters. Next, in the demo, you’ll see how to style composables using the modifier parameter.