WEBVTT

00:00.080 --> 00:00.960
Welcome back.

00:01.000 --> 00:05.080
In this video we're going to create a custom control panel overlay.

00:05.280 --> 00:11.560
So we're going to create icons over the map that do different jobs.

00:11.960 --> 00:12.400
Okay.

00:12.600 --> 00:18.920
So it would be a very exciting thing that we do for our Google map.

00:18.960 --> 00:27.880
Instead of using a floating action button, I'm going to use inside the box a Google map and replace

00:27.880 --> 00:33.320
the floating action button with something special called surface.

00:33.520 --> 00:40.640
Surface is a layout composable that provides material theming and material styling.

00:40.640 --> 00:41.720
Background color.

00:41.720 --> 00:42.360
Elevation.

00:42.360 --> 00:42.760
Shape.

00:42.760 --> 00:50.280
Border defines the visual container for UI elements, automatically applies elevation shadows and ripple

00:50.280 --> 00:57.800
effects when needed, and is used to represent a surface in material Design like cards, sheets on,

00:57.840 --> 01:03.590
or the screen background to apply consistent material design principles.

01:03.710 --> 01:09.470
It's very, very necessary to use the surface composable.

01:09.470 --> 01:15.430
You can easily control background color, shape, elevation, and border, and you can group UI elements

01:15.430 --> 01:17.950
with common visual behavior.

01:17.990 --> 01:19.150
Let's start.

01:19.190 --> 01:22.590
So here we can define the surface.

01:22.750 --> 01:26.110
And inside the surface set the modifier.

01:26.310 --> 01:27.510
Modifier.

01:27.750 --> 01:36.510
Set the padding 16 and set the alignment to alignment dot top center.

01:36.670 --> 01:39.310
Set the color to white.

01:39.350 --> 01:47.230
Set the shape to rounded corner eight dpi and elevation four dpi.

01:47.350 --> 01:58.510
We can set the toner elevation for the now inside the surface go and create another row, another composable,

01:58.510 --> 01:59.590
which is the row.

01:59.790 --> 02:09.710
Set the modifier ATP vertical alignment center vertically horizontal arrangement arrangement dot spaced

02:09.710 --> 02:11.310
by ATP.

02:11.470 --> 02:15.590
Then we need to add the icons.

02:15.790 --> 02:19.190
For example map type selector.

02:19.230 --> 02:21.310
This is the first icon.

02:21.310 --> 02:23.910
Map type button or selector.

02:24.030 --> 02:26.910
Create an icon toggle button.

02:26.910 --> 02:31.670
Set some parameters checked to map type map type normal.

02:31.910 --> 02:34.910
You can set it to Satellite view.

02:35.190 --> 02:36.710
Uncheck the change.

02:36.830 --> 02:39.270
Go and check the map type.

02:39.310 --> 02:48.110
If it's map type, specify here map type equals to if it so if it is checked you can.

02:48.150 --> 02:54.430
For better understanding, I'm going to use the checked parameter and use checked.

02:54.510 --> 03:05.420
If it is checked, Set the map type to satellite, otherwise set it to map type dot normal.

03:05.460 --> 03:12.980
Okay, if the user checked this toggle button, go and set the type map type to satellite.

03:12.980 --> 03:16.340
Otherwise set it to map type normal okay.

03:16.580 --> 03:24.260
And in order to display this toggle button, I'm going to use another composable which is the icon.

03:24.260 --> 03:27.940
So here icon icon.

03:27.940 --> 03:38.900
And let me make uh also a logic check if map type equals to map type to satellite, then create and

03:38.900 --> 03:41.620
set the icon to map.

03:41.620 --> 03:48.300
So default dot map you can make uh and use those icons.

03:48.340 --> 03:51.460
Set the location for example place.

03:51.460 --> 03:59.690
Else go and set the icons dot default to satellite, which is here.

03:59.810 --> 04:00.210
Um.

04:00.730 --> 04:01.570
The warning.

04:01.850 --> 04:05.690
Okay, then use toggle map type.

04:05.730 --> 04:06.210
Okay.

04:06.490 --> 04:12.330
This is the icon included inside the icon toggle or toggle button.

04:12.370 --> 04:15.330
I missed this and here we go.

04:15.410 --> 04:18.010
Okay this is our toggle button.

04:18.130 --> 04:24.170
Then we can add another icons inside this row.

04:24.210 --> 04:30.650
For example current location button icon button onClick.

04:30.770 --> 04:34.050
Implement location request logic.

04:34.210 --> 04:37.690
Later we're going to implement this logic.

04:37.690 --> 04:38.810
Set an icon.

04:40.930 --> 04:48.930
Also, you can include another icon which is for resetting the birding and camera.

04:48.970 --> 04:54.360
You can set the camera of course another icon button on click.

04:54.400 --> 04:55.440
What we need to do.

04:55.480 --> 04:59.920
We need to reset the camera scope dot launch.

05:00.360 --> 05:04.320
Let's reset the camera and bearing using this button.

05:04.600 --> 05:11.240
So the new position value position equals to camera position.

05:11.240 --> 05:14.000
We need to specify four parameters.

05:14.160 --> 05:17.680
The left lungs the zoom tilt and bearing.

05:17.920 --> 05:21.120
I'm gonna set it to zero degrees.

05:21.120 --> 05:23.600
And here zero degrees.

05:23.920 --> 05:34.000
And the zoom level would be like one one for setting everything 0.00.0 okay.

05:34.120 --> 05:36.240
Reset bearing to north.

05:36.280 --> 05:42.520
Now set the camera position dot animate camera update factory new camera position.

05:42.520 --> 05:47.240
Set the new position and make the duration like five seconds.

05:47.480 --> 05:48.040
Okay.

05:48.080 --> 05:54.950
And include inside this icon button a text composable reset camera.

05:54.990 --> 05:58.070
Okay, this is our example.

05:58.310 --> 06:01.150
Now we can use, of course, a text.

06:01.150 --> 06:09.310
Also we can use an icon I'm icons dot default dot reset camera.

06:09.350 --> 06:15.230
We can use another uh like for example favorite for example.

06:15.230 --> 06:16.190
And here we go.

06:16.350 --> 06:16.870
Okay.

06:17.030 --> 06:22.470
Now remove all the previous things of the floating action button.

06:22.470 --> 06:27.950
Run the application and let's see the surface that we just created.

06:28.230 --> 06:29.550
Now here we go.

06:29.590 --> 06:31.470
This is our surface.

06:31.510 --> 06:35.630
Let's create the first and handle the click events.

06:35.630 --> 06:39.510
You can notice that that map type is changed.

06:39.550 --> 06:44.430
The first icon is for toggling that map type.

06:44.630 --> 06:47.950
So the first type is normal.

06:47.950 --> 06:51.150
I'm going to make it as satellite.

06:51.150 --> 06:55.990
So click on it and here I change it to Satellite view.

06:56.150 --> 06:59.430
The second icon is for current location.

06:59.470 --> 07:05.390
It's not active now because we need to implement the location request logic later on.

07:05.390 --> 07:09.310
And the third thing is resetting camera and burning button.

07:09.310 --> 07:19.830
So if we zoom in here and we add markers for example when we click adding this adding this icon again

07:20.070 --> 07:21.910
I need to reset the camera.

07:21.910 --> 07:24.510
So click this and here we go.

07:24.750 --> 07:31.590
Our map is reset to zero zero latitude and longitude okay.

07:31.830 --> 07:34.710
This is how we control the map.

07:34.710 --> 07:45.790
How we can add um the custom icons and how to move the camera, how to control the camera, how to add

07:45.790 --> 07:48.070
overlays on the map.