WEBVTT

00:01.340 --> 00:02.780
Jetpack Compose.

00:02.780 --> 00:10.820
The modern Android UI toolkit has revolutionized the way developers create user interfaces.

00:10.850 --> 00:18.500
One of its integral features is the scaffold, which is a powerful tool that simplifies the structuring

00:18.530 --> 00:21.080
of compose user interfaces.

00:21.110 --> 00:28.970
In this video, we'll delve into the scaffold, exploring its components, implementation, and advanced

00:28.970 --> 00:30.680
customization options.

00:30.710 --> 00:40.520
Scaffold acts as a functional and foundational structure for compose user interfaces, providing a layout

00:40.520 --> 00:47.930
that includes essential components like the top app bar, the bottom app bar, and the floating action

00:47.930 --> 00:49.400
button fab.

00:49.430 --> 00:58.430
Its primary purpose is to streamline the development process by offering a standardized layout that

00:58.430 --> 01:01.070
can be easily customized.

01:01.430 --> 01:04.100
Let's explore these components.

01:04.130 --> 01:10.980
Scaffold consists of key components, each serving a distinct purpose.

01:10.980 --> 01:16.590
The top app bar positioned at the top of the UI.

01:16.620 --> 01:24.810
It often contains application, title, navigation, actions, and other relevant items.

01:24.840 --> 01:28.650
The bottom app bar placed at the bottom.

01:28.650 --> 01:35.700
It typically houses navigation icons and other contextual actions.

01:35.700 --> 01:45.540
The Fab Floating Action button A floating circular button for primary user actions, such as adding

01:45.540 --> 01:56.340
a new item or navigating to a critical section of the app scaffold, plays a crucial role in organizing

01:56.340 --> 01:57.660
the UI structure.

01:57.660 --> 02:04.950
It ensures consistency across different screens of the app, making navigation and user interaction

02:04.950 --> 02:13.560
more intuitive by providing a predefined layout, scaffold simplifies the process of creating visually

02:13.560 --> 02:17.010
cohesive and user friendly interfaces.

02:17.010 --> 02:23.000
Now let's jump into Android Studio and start building our scaffold layout.

02:23.000 --> 02:31.910
The current state of our application is this no top app bar, no bottom app bar, or fab.

02:31.910 --> 02:37.070
We're going to use the scaffold in order to add these components.

02:37.070 --> 02:44.780
So the scaffold provides a layout that includes essential components like top app bar, bottom app bar,

02:44.780 --> 02:46.160
and fab.

02:46.160 --> 02:51.380
Inside the Setcontent, I'll start defining a new scaffold.

02:51.380 --> 02:58.640
If we go to the scaffold, we can see the modifier top app bar or top bar, bottom bar.

02:58.670 --> 02:59.420
Snack bar.

02:59.420 --> 02:59.930
Host.

02:59.930 --> 03:01.250
Floating action button.

03:01.250 --> 03:08.270
Floating action button, position container, color content, color content, window inset and content.

03:08.270 --> 03:14.360
We are interested in the top bar, bottom bar, and the floating action button.

03:14.360 --> 03:16.880
Let's start customizing the top bar.

03:16.880 --> 03:23.000
So here inside the scaffold I'm going to specify the top bar.

03:23.030 --> 03:26.520
The top bar is another top app bar.

03:26.520 --> 03:30.150
And here I'll set the title, for example.

03:30.180 --> 03:33.870
Another text top app bar.

03:36.060 --> 03:40.080
The second component is the bottom bar.

03:40.080 --> 03:46.560
So the bottom bar equals to another bottom app bar.

03:46.590 --> 03:52.350
Later in the next videos we're going to deep dive into that top app bar bottom app bar and the fab.

03:52.380 --> 03:59.580
But for now, just for illustrating the usage of the scaffold, we're going to use them like this.

03:59.580 --> 04:07.410
So here the color I'll use the bottom app bar container color equals to.

04:09.180 --> 04:13.560
And the last component is the floating action button.

04:13.560 --> 04:17.130
Here I'll specify another floating action button.

04:17.130 --> 04:23.580
So the floating action button a floating circular button for primary user actions such as adding new

04:23.580 --> 04:28.470
item or navigating to a crucial and critical section of the app.

04:28.470 --> 04:37.010
The button app placed at the button and it typically Houses, navigation icons and other contextual

04:37.010 --> 04:37.640
actions.

04:37.640 --> 04:43.700
The top app bar positions or positioned at the top of the UI.

04:43.730 --> 04:49.610
It often contains app title, navigation, actions and other relevant items.

04:49.640 --> 04:52.040
Now let's run our application.

04:52.070 --> 04:58.670
After specifying the the inside the scaffold, for example my column.

04:58.670 --> 04:59.960
And here we go.

04:59.990 --> 05:01.730
This is our application.

05:01.730 --> 05:06.080
You can see the scaffold that contains my column.

05:06.080 --> 05:08.480
And my column contains three texts.

05:08.480 --> 05:16.490
We can see the top app bar, the top app bar, the title, top app bar title here.

05:16.490 --> 05:18.950
And we can see the bottom bar.

05:18.980 --> 05:25.130
The container color is red and the floating action button which is here.

05:25.130 --> 05:27.050
So congratulations.

05:27.050 --> 05:28.700
This is the scaffold.

05:28.700 --> 05:35.120
The power of implementing scaffold in our applications In the next videos, we're going to deep dive

05:35.120 --> 05:40.430
into the top app bar, the bottom app bar and the floating action button.