Skip to main content

Trip summary view customization

Additional Developer Resources

You can customize the trip summary UI component by providing your layout written in Jetpack Compose.

Customization Process​

The DashNavigationFragment provides the setTripSummary() function, allowing you to define custom content for the trip summary UI component. This function accepts a TripSummaryUiComposer, a composable function with two parameters: modifier and state. The modifier is an instance of Modifier, used for layout configurations. The state is an instance of TripSummaryUiComposer, containing all necessary data for the trip summary layout.

TripSummaryUiComposer Modifier​

Modifier contains predefined constraints from the parent layout to align the trip summary component with the other UI layouts. It can be applied to the top layout of the trip summary or specific children or ignored.

TripSummaryUiState​

The TripSummaryUIState class provides the UI state for rendering a list of places. It includes the following parameters:

  • tripSummaryModel: The data class with progress details for the current trip.

  • tripOverviewItems: The list of key points for the current trip. There are 5 main types of items:

    • TripOverviewItem.YourLocation - Current location in the context of the trip items.
    • TripOverivewItem.Waypoint - Any trip waypoint.
    • TripOverivewItem.NoBatteryCharge- For the EV, approximate time of the battery discharge in the context of the trip plan.
    • TripOverivewItem.ChargingStation- For the EV, charging station.
    • TripOverivewItem.Destination- Extended destination point data.

    Every TripOverviewItem contains its specific data for advanced visualization.

  • onEndActiveGuidanceClick: Function needs to be invoked when the "End active guidance" button is clicked.

  • onEditTripClick: Function needs to be invoked when the "Edit trip" button is clicked.

  • onOpenSearchForChargeClick: Function needs to be invoked with TripOverivewItem.NoBatteryCharge.routePoints when the TripOverivewItem.NoBatteryCharge item is clicked.

  • onWaypointClick: Function needs to be invoked with DashSearchResult for the waypoint when the TripOverivewItem.Waypoint item is clicked.

TripSummaryModel​

The TripSummaryModel class provides details of the trip's progress.

  • traveledToRemainingRatio: Ratio = traveled / remaining distance. It gives the relative position to draw a point on the trip x-axis visualization line.
  • legDistanceRemaining: The remaining distance until the next waypoint or the destination.
  • legTimeRemaining: The remaining time until the next waypoint or destination.
  • legArrivalTime: The arrival time to the next waypoint/destination.
  • isOffline: Status of the trip, online or offline.
  • legStateOfCharge: For EV, the state of charge by the end of the leg.
  • trafficGradientStops: Map with ratio-> to -> color matching to draw traffic gradient on the trip x-axis visualization line.
  • waypointsData: Stops list to draw on the trip x-axis visualization line.

Example Usage​

To set a custom trip summary view:

fragment.setTripSummary { modifier, tripSummaryUiState ->
    CustomTripSummaryView(modifier, tripSummaryUiState)
}

The CustomTripSummaryView composable handles the rendering of the trip summary view based on the provided TripSummaryUiState.

You can hide the trip summary by setting empty lambda:

fragment.setTripSummary { _, _ -> }

For real-world examples of customizing the trip summary view, visit our GitHub repository.

Additional Developer Resources
Was this page helpful?