> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/navigation/ux/llms.txt)

# Trip summary view customization

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

![Trip summary view](https://docs.mapbox.com/android/assets/ideal-img/dash-sdk-trip-summary-view.901e4be.480.png)

## 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`](https://developer.android.com/reference/kotlin/androidx/compose/ui/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:

```kotlin
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:

```kotlin
fragment.setTripSummary { _, _ -> } 
```

For real-world examples of customizing the trip summary view, visit our [GitHub repository](https://github.com/mapbox/dash-android-examples).