Creación de una pantalla de mapa con Intents y estados en Jetpack Compose

Starting the development of a main screen for Android map applications involves carefully defining inputs and outputs through the use of Intents and states. This approach facilitates clear and organized management within the application using Jetpack Compose, as we will see in detail.

What is an Intent and why is it important in our application?

An Intent in Android is a user action or intent expressed within a screen. Specifically, we work with Tracking Intent, which defines actions such as start, pause and resume a tracking process:

• Start: First action to begin tracking.
• Pause: Temporary pause action of the tracing.
• Resume: Resume a trace that has been previously started.

If you are not yet familiar with this term, it is recommended to consult basic courses such as Jetpack Compose or MVVM on Android beforehand.

How do we define the states for our map interface?

In Jetpack Compose we will use a dataclass called Tracking Location State to handle the different situations or visual outputs on our map screen. This state will include:

• isTracking: Indicates whether tracking is currently being performed(boolean, false initially).
• isPaused: Status of the tracking pause (boolean, false initially).
• currentLocation: Current location(starts at null**).
• selectedLocation: Selected location including a timestamp(for future use not yet implemented).
• trackingDataSegments: List that stores location data segments(initializes empty).

This structured scheme allows an agile and clear management of the information during the use of the app.

How do we implement a basic screen in Jetpack Compose?

The main screen called MapScreen is a composable function, not a class, allowing its simple and dynamic integration into the application. The basic construction involves:

• Create a Scaffold that will contain UI elements.
• Insert a Floating Action Button located in a central position(FabPosition.Center).
• Change the button icon according to the current state(Play or Pause):
• If paused, it will display the beach icon indicating that it can be continued.
• If active, the button will show the pause icon.

FloatingActionButton(onClick  =  {  /* action pending */  })  {    if (state.isPaused)  {        Image(imageVector  =  Icons.Default.PlayArrow,              modifier  = Modifier.size(36.dp))     } else  {        Image(imageVector  =  Icons.Default.Pause,              modifier  = Modifier.size(36.dp))     } }}

We use PaddingValues to avoid overlapping content with the status bar and navigation, adjusting the interface for a better user experience.

Box(modifier  = Modifier.fillMaxSize().padding(paddingValues))  {    MapSection(        currentLocation  = state.currentLocation,        isTrackingFinish  = false,        locations  = state.trackingDataSegments,        modifier  = Modifier.fillMaxSize()     )}

Proper implementation of these elements contributes to more order and efficiency in practical development with Jetpack Compose.

Interested in sharing your experience or have a specific question about this process in Jetpack Compose? Let us know and keep learning!