Welcome back.
In this video we're going to create a custom control panel overlay.
So we're going to create icons over the map that do different jobs.
Okay.
So it would be a very exciting thing that we do for our Google map.
Instead of using a floating action button, I'm going to use inside the box a Google map and replace
the floating action button with something special called surface.
Surface is a layout composable that provides material theming and material styling.
Background color.
Elevation.
Shape.
Border defines the visual container for UI elements, automatically applies elevation shadows and ripple
effects when needed, and is used to represent a surface in material Design like cards, sheets on,
or the screen background to apply consistent material design principles.
It's very, very necessary to use the surface composable.
You can easily control background color, shape, elevation, and border, and you can group UI elements
with common visual behavior.
Let's start.
So here we can define the surface.
And inside the surface set the modifier.
Modifier.
Set the padding 16 and set the alignment to alignment dot top center.
Set the color to white.
Set the shape to rounded corner eight dpi and elevation four dpi.
We can set the toner elevation for the now inside the surface go and create another row, another composable,
which is the row.
Set the modifier ATP vertical alignment center vertically horizontal arrangement arrangement dot spaced
by ATP.
Then we need to add the icons.
For example map type selector.
This is the first icon.
Map type button or selector.
Create an icon toggle button.
Set some parameters checked to map type map type normal.
You can set it to Satellite view.
Uncheck the change.
Go and check the map type.
If it's map type, specify here map type equals to if it so if it is checked you can.
For better understanding, I'm going to use the checked parameter and use checked.
If it is checked, Set the map type to satellite, otherwise set it to map type dot normal.
Okay, if the user checked this toggle button, go and set the type map type to satellite.
Otherwise set it to map type normal okay.
And in order to display this toggle button, I'm going to use another composable which is the icon.
So here icon icon.
And let me make uh also a logic check if map type equals to map type to satellite, then create and
set the icon to map.
So default dot map you can make uh and use those icons.
Set the location for example place.
Else go and set the icons dot default to satellite, which is here.
Um.
The warning.
Okay, then use toggle map type.
Okay.
This is the icon included inside the icon toggle or toggle button.
I missed this and here we go.
Okay this is our toggle button.
Then we can add another icons inside this row.
For example current location button icon button onClick.
Implement location request logic.
Later we're going to implement this logic.
Set an icon.
Also, you can include another icon which is for resetting the birding and camera.
You can set the camera of course another icon button on click.
What we need to do.
We need to reset the camera scope dot launch.
Let's reset the camera and bearing using this button.
So the new position value position equals to camera position.
We need to specify four parameters.
The left lungs the zoom tilt and bearing.
I'm gonna set it to zero degrees.
And here zero degrees.
And the zoom level would be like one one for setting everything 0.00.0 okay.
Reset bearing to north.
Now set the camera position dot animate camera update factory new camera position.
Set the new position and make the duration like five seconds.
Okay.
And include inside this icon button a text composable reset camera.
Okay, this is our example.
Now we can use, of course, a text.
Also we can use an icon I'm icons dot default dot reset camera.
We can use another uh like for example favorite for example.
And here we go.
Okay.
Now remove all the previous things of the floating action button.
Run the application and let's see the surface that we just created.
Now here we go.
This is our surface.
Let's create the first and handle the click events.
You can notice that that map type is changed.
The first icon is for toggling that map type.
So the first type is normal.
I'm going to make it as satellite.
So click on it and here I change it to Satellite view.
The second icon is for current location.
It's not active now because we need to implement the location request logic later on.
And the third thing is resetting camera and burning button.
So if we zoom in here and we add markers for example when we click adding this adding this icon again
I need to reset the camera.
So click this and here we go.
Our map is reset to zero zero latitude and longitude okay.
This is how we control the map.
How we can add um the custom icons and how to move the camera, how to control the camera, how to add
overlays on the map.