CHRIS ARRIOLA: So far, you've learned
the basics of thinking Compose and how to create a composable
function.
One thing you might have noticed is
that we use components like row, text, and radio button.
But we've got so much more for you.
[AUDIO LOGO]
Compose actually ships with a powerful toolkit
of UI components out of the box, enabling you to build rich UIs
and interactions.
Previously, we've looked at how to build
a portion of the single-choice question screen
in the jetsurvey sample app.
Let's see how we can build the rest of the screen
to match our design specs, using the Compose toolkit.
First, let's talk about one of my favorite topics, styling.
Jetpack Compose makes it easy to give your app a consistent look
and feel by shipping with an implementation of Material
Design from the start.
Material Design is an adaptable system
of guidelines, components, and tools
that support the best practices of user interface design.
Jetpack Compose supports Material Design 2 and 3,
the next evolution of Material Design.
Material 3 features updated components and Material
You customization features, designed to match the new look
and feel on Android 12 and above.
With Material Design, your app can
be themed to match your brand by providing custom colors,
typography, and shapes--
all in one place.
Let's see how jetsurvey uses material
theming to style the whole app.
The jetsurvey code base defines a new composable function,
jetsurvey theme.
Here we can see that it uses the material theme composable
function and provides custom values for colors, shapes,
and typography.
Different color values are provided
depending if the system appearance is
set to dark or light.
This allows the app colors to respond automatically
when the system theme is changed by the user.
Different fonts and styles are set, like weight, size,
and line height.
This allows text to appear and be styled consistently.
And lastly, shape value is provided,
which allows customization of rounded corners
for different sizes of shapes in the app.
To use this custom theme, the theme function
should be the outermost function that we invoke.
In the survey fragment file, we can
see that it is the first line called within set
content of the Compose view--
a view that can host composable functions.
All the contents within it would then
use all the shapes, typography, and colors
defined in the theme.
A fundamental Material Design component
that is part of the toolkit is called a scaffold.
A scaffold is a basic layout for arranging material components
in common patterns, such as the screen with a small top app
bar and floating action button.
From a high level, we can see that the survey screen conforms
to a scaffold.
It has a top app bar, contents, and a bottom bar.
Let's see how the scaffold layout is used
in the jetsurvey code base.
Survey screen file defines a composable function
called Survey Questions Screen.
This is the composable that shows all the questions
in the survey.
Here we can see that it declares a scaffold
and provides a couple of parameters to it.
First, it provides a value for the top bar parameter, which
is a composable function lambda representing the top app
bar for the screen.
Here we can see that it invokes a call
to survey top app bar, which will render the user's
progress in the survey.
Next, it provides a value for the content parameter,
which is also a composable function lambda.
The content rendered shows the current question, the survey,
the user needs to answer.
And lastly, it provides a value for the bottom bar, which,
again, is a composable function lambda, making a call
to survey bottom bar which will render
the Next and Previous buttons, so the user
can progress through the survey.
Notice that the scaffold is contained within a surface
composable function.
Let's take a look at that next.
Another fundamental component in Material Design
is the concept of a surface.
A surface is a central metaphor in Material Design
which content sits on.
A surface has a color, a shape, a border,
as well as tonal and shadow elevation.
Apart from surface, chances are you're
going to need a lot more components
to build any kind of UI you can think of.
This is why Compose provides a bunch of other material design
components out of the box, like top app bars, buttons, cards,
switches, chips, dividers, floating action buttons,
and a whole lot more.
Understanding and building in ways
that cater to the diverse needs of your users
can be a challenge.
To help with this, Material 3 components
are also all accessible by default,
featuring acceptable color contrast
ratios and a minimum touch size and more.
And that's only scratching the surface on Material Design.
You can check out the Compose Material 3 API reference
and the Material Design 3 website
at the URLs shown here to learn more.
We've looked at how to arrange components
on a single answer in the survey by using the row composable
function.
But how do we arrange all the different components
for the rest of the screen?
We do that by using layouts.
Compose has three standard layout elements.
As we've seen, to horizontally arrange items,
we can wrap our UI components in a row composable function.
On the other hand, if we want to vertically arrange items,
we would use the column composable function.
Another common layout is box.
Box is what you want when you want to put or stack elements
on top of another.
For example, if you wanted to show
an image on the bottom right corner,
stack on top of another element.
These standard layouts also accept parameters,
so you can further control how items are placed.
Taking our current implementation
of survey answer, if we want to try to run this,
an answer in the survey would actually
look something like this.
To change that, let's pass in some additional parameters
to the row.
To change the vertical alignment of items in the row,
let's pass Alignment.CenterVertically
for the vertical alignment parameter.
With this change, we should now see
the items vertically centered.
Also if we want to change the horizontal arrangement
of items, we can pass a value like Arrangement.SpaceBetween,
which will place children so that they are spaced evenly
across the row.
We won't see much of an effect yet with this change,
but we'll see why this matters in a bit.
There's so much more to lay out with layouts,
so make sure to check out the documentation
pages to learn more.
So far, we've covered styling, components, and layouts.
But how do we control things like sizing, padding,
and other appearances?
You do that by using modifiers.
Modifiers allow you to decorate or augment a composable.
Every composable function in the Compose toolkit
accepts a modifier as a parameter.
Modifiers can be chained together
until you achieve your desired customization.
Modifiers allow you to do all sorts of things,
like set a background color, change the size,
add padding of an element, change the alpha of an element.
Modifiers allow to process inputs,
like making an element clickable.
Additional modifiers might also be available to you,
depending on the scope of a composable function.
For instance, if you are within the scope of a box,
the Align modifier allows you to position an element
relative to the containing box.
Here, we're changing the alignment of the text element
to be bottom end, so that it aligns the bottom right
corner of the containing box.
This modifier wouldn't be accessible
outside of the box composable and its scope, which
makes modifiers type safe.
Using modifiers, we can further customize the survey answer
composable to match our designs.
Let's go ahead and do that.
I'm assuming here that the composable is called
within our app's theme, so that the typography, shapes,
and colors match our brand.
First, let's further customize the row
by passing in a modifier.
Since we want the item to occupy the maximum allotted horizontal
space, let's call fillMaxWidth.
The item has a padding of 16 DP, so let's chain
it padding modifier.
These modifications are answer item
is looking a lot closer to our desired output.
Notice, though, there are a few more styling tweaks
that we need to make.
To add a border around our item and change its shape,
let's wrap the row composable around a surface composable.
Doing so, we can change the shape.
Let's set that to Small.
And we can change the border by setting it
to 1 DP, as well as its color.
And that's it.
We've only covered a few modifiers,
and there are bunch more that you
can use to modify your composable functions.
So make sure to check out the documentation pages
by following this link to learn more.
In-- what was it?
A couple of minutes?
We were able to build a simple screen using material theme,
the material components provided out of the box,
and we saw how we can layout composables using row, column,
and box and how to build that pixel-perfect UI
with modifiers.
In the next video in the series, we'll cover Compose tooling
and show how these tools can help
accelerate your development.
Make sure to hit Subscribe so you don't miss it.
I'll see you in the next one.
[AUDIO LOGO]