You've made great progress learning about all the basic elements you need to create the Little Lemon UI for Mario and Andrew. You previously learned about activities, views, composeable UI and layouts in Compose. In this module, you will learn more about building your UI with Jetpack Compose. Let's explore what you will learn in this lesson. In this lesson, you'll be introduced to modifiers, what their purpose is, and also explore modifier chaining and why their order is important. Let's start. Modifiers as the name suggests allows you to modify some aspect of a composable that is either related to its appearance or behavior. They let you augment or expand a composable beyond its inherent capabilities. For example, a text composable can let you define the font color by defining its color property. However, to add a background color, you'd need a modifier to augment its appearance. When augmenting appearance, modifiers act as decorators. This means that they decorate or style the UI elements or composables. A modifier can for example, modify the size, position, spacing, color, or even visibility of composables on your app. Modifiers also allow you to impart specific interactivity or behavior to the elements. For example, you can make an image or a text clickable using modifiers. You will learn more about this later in the course. For now let's focus mainly on your app's appearance. Modifiers are essentially Kotlin objects. If you want to create a modifier instance, you have to call one of the modifier class functions. In Compose each, composable has an argument called a modifier which is set when defining the modifier. Let's first explore a simple padding modifier. This modifier adds some space around an element. In this example, you set the modifier argument by calling the padding function on modifier. This modifier will add a spacing of 10 DP around all four sides of the text composable. If you want to, for example, add different padding to specific sides, you can define spacing for each side separately. This way you can add, for example, a spacing of five DP to the left and right and 10 DP to the top and bottom of the composable. In this simple example, you applied the padding modifiers directly to the text composable. However, since UI elements are typically placed within a layout composable, you usually add padding modifiers to the layouts. For instance, to get the same spacing around the text, you could create the composable like this example. When styling your Little Lemon UI, you typically want to apply several decorations to your element. For instance, based on your Little Lemon app designs, you may want a spacing of 10 DP, a height of 40 DP, a light gray background, and the position to be horizontally centered on the screen. This would result in several calls to the modifier. To facilitate a concise Kotlin code, modifiers can be chained together. Calling each modifier function in turn, chaining them all through a dot. For example, you can have a height modifier to set the height of the composable to 40 dot DP, it does not include the padding. The background modifier sets the color of the composable to light gray. It can be set using the built in color or the material theme colors set in colors dot KT file. By default, the layouts wrap their children. Without defining the width or size modifiers, the role layout in our example would be as wide as the text held by text composable. Using the film max with modifier, you are expanding your row to be as wide as the width of the screen. When you click the preview button, your UI displays with the padding, the height, text composable, and row compose herbal filling the max width. Now that you know that modifiers can be chained, it is important that you consider the order of applying modifications. Changing the order may have a different effect on the overall arrangement, positioning, size, or even behavior of the elements. Now let's slightly modify the say hello composable. This time defining a fixed size for the row and make it 100 DP. Click the Preview button to view the effect of modifier ordering one, two, and modifier ordering three. In these examples, the modifiers are applied from left to right. Now that you know what modifiers and modifier chaining are and also explored why their order is important, you may be able to use it in the Little Lemon app that you are creating for Adrian. Well done.
