# Customize Route Line Style

This example shows:

-   How to customize the styling of Route line

    -   routeColor

    -   routeScale

    -   alternativeRouteScale

    -   routeShieldColor

    -   routeFloatDurationBackgroundPrimary

    -   maneuverArrowColor

    -   maneuverArrowBorderColor

    -   routeWayNameBackGroundColor

    -   routeWayNameTextColor

-   How to config custom navigation style using NavLauncherConfig.Builder


![documentation image](https://static.nextbillion.io/docs-next/docs/navigation/android/customize-route-line-style.jpg)

For all code examples, refer to [Navigation Code Examples](https://github.com/nextbillion-ai/nb-navigation-android-demo)

**activity_route_line_style.xml [view source](https://github.com/nextbillion-ai/nb-navigation-android-demo/blob/main/app/src/main/res/layout/activity_route_line_style.xml)**

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/fetchRoute"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:text="@string/fetch_route"/>

        <Button
            android:id="@+id/startNav"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:text="@string/start_navigation_with_custom_route_line"/>
    </LinearLayout>

    <TextView
        android:id="@+id/routeGeometry"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"/>

    <ProgressBar
        android:id="@+id/progress"
        android:visibility="gone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

</LinearLayout>
```

**themes.xml [view source](https://github.com/nextbillion-ai/nb-navigation-android-demo/blob/main/app/src/main/res/values/themes.xml)**

```xml
<style name="Theme.CustomNavigationRouteLine" parent="NavigationViewLight">
        <!-- You can customize your navigation style here-->
        <item name="navViewRouteStyle">@style/CustomRouteStyle</item>
</style>

<style name="Theme.CustomNavigationRouteLineDark" parent="NavigationViewDark">
   <!-- You can customize your navigation style here-->
   <item name="navViewRouteStyle">@style/CustomRouteStyle</item>
</style>

<style name="CustomRouteStyle" parent="NavigationMapRoute">
        <item name="routeColor">#FFE97F2F</item>
        <item name="routeScale">1.0</item>
        <item name="alternativeRouteScale">1.0</item>
        <item name="routeShieldColor">#FF54E910</item>
        <item name="routeFloatDurationBackgroundPrimary">#FFE97F2F</item>
        <item name="maneuverArrowColor">#FFFF0106</item>
        <item name="maneuverArrowBorderColor">#FF70C35D</item>
        <item name="routeWayNameBackGroundColor">#FFE97F2F</item>
        <item name="routeWayNameTextColor">@color/white</item>
</style>
```

**CustomRouteLineStyleActivity [view source](https://github.com/nextbillion-ai/nb-navigation-android-demo/blob/main/app/src/main/java/ai/nextbillion/navigation/demo/activity/CustomRouteLineStyleActivity.java)**

```java
package ai.nextbillion.navigation.demo.activity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

import ai.nextbillion.kits.directions.models.DirectionsResponse;
import ai.nextbillion.kits.directions.models.DirectionsRoute;
import ai.nextbillion.kits.geojson.Point;
import ai.nextbillion.maps.location.modes.RenderMode;
import ai.nextbillion.navigation.core.navigation.NavigationConstants;
import ai.nextbillion.navigation.demo.R;
import ai.nextbillion.navigation.ui.NBNavigation;
import ai.nextbillion.navigation.ui.NavLauncherConfig;
import ai.nextbillion.navigation.ui.NavigationLauncher;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;

public class CustomRouteLineStyleActivity extends AppCompatActivity implements View.OnClickListener {
    private Button fetchRoute;
    private Button startNav;
    private TextView routeGeometry;
    private DirectionsRoute directionsRoute;
    private ProgressBar progress;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_route_line_style);
        fetchRoute = findViewById(R.id.fetchRoute);
        startNav = findViewById(R.id.startNav);
        routeGeometry = findViewById(R.id.routeGeometry);
        progress = findViewById(R.id.progress);
        fetchRoute.setOnClickListener(this);
        startNav.setOnClickListener(this);
        startNav.setEnabled(false);

    }

    @Override
    public void onClick(View view) {
        if (view.getId() == R.id.fetchRoute) {
            progress.setVisibility(View.VISIBLE);
            Point origin = Point.fromLngLat(103.75986708439264, 1.312533169133601);
            Point destination = Point.fromLngLat(103.77982271935586, 1.310473772283314);

            NBNavigation.fetchRoute(origin, destination, new Callback<DirectionsResponse>() {
                @Override
                public void onResponse(@NonNull Call<DirectionsResponse> call, @NonNull Response<DirectionsResponse> response) {
                    progress.setVisibility(View.GONE);
                    //start navigation with the route we just fetched.
                    if (response.body() != null && !response.body().routes().isEmpty()) {
                        directionsRoute = response.body().routes().get(0);
                        routeGeometry.setText(String.format("Route Geometry: %s", directionsRoute.geometry()));
                        startNav.setEnabled(true);
                    }
                }

                @Override
                public void onFailure(@NonNull Call<DirectionsResponse> call, @NonNull Throwable t) {
                    progress.setVisibility(View.GONE);
                }
            });
        } else if (view.getId() == R.id.startNav) {
            NavLauncherConfig.Builder configBuilder = NavLauncherConfig.builder(directionsRoute);
            configBuilder.locationLayerRenderMode(RenderMode.GPS);
            configBuilder.shouldSimulateRoute(true);
            configBuilder.lightThemeResId(R.style.Theme_CustomNavigationRouteLine);
configBuilder.darkThemeResId(R.style.Theme_CustomNavigationRouteLineDark);
            NavigationLauncher.startNavigation(CustomRouteLineStyleActivity.this, configBuilder.build());
        }
    }
}
```

### Code Highlights

This code example shows how to customize the navigation view route line style via _themes.xml_ configuration file, the color of route line-related UI elements are defined in the file.

In the above theme file, we have customized some route line color in style with name `CustomRouteStyle`, then we applied the `CustomRouteStyle` in `Theme.CustomNavigationRouteLine` for day style and `Theme.CustomNavigationRouteLineDark` for night style. We can also do some further customizations in `Theme.CustomNavigationRouteLine` and `Theme.CustomNavigationRouteLineDark` based on needs (e.g. show different UI color during day/night).

In code we use `configBuilder.lightThemeResId()` and `configBuilder.darkThemeResId()` to specify the theme for the Navigation view in day style and night style respectively.

### Code summary

This code example defined the theme styles _Theme_CustomNavigationRouteLine_ based on NavigationViewLight and _Theme_CustomNavigationRouteLineDark_ based on NavigationViewDark

The _navViewRouteStyle_ item is set to _@style/CustomRouteStyle_. The _CustomRouteStyle_ customizes the appearance of the navigation route line in the navigation view.

The following items are defined within _CustomRouteStyle_:

-   routeColor to specify the color of the route line

-   routeScale and alternativeRouteScale to determine the scale of the route line and alternative route lines respectively

-   routeShieldColor to set the color of the shields along the route

-   maneuverArrowColor and maneuverArrowBorderColor to define the colors of the maneuver arrows

-   routeWayNameBackGroundColor and routeWayNameTextColor to specify the background color and text color of the route way names.


`configBuilder.lightThemeResId(R.style.Theme_CustomNavigationRouteLine)` sets the light theme for the navigation UI, using the Theme_CustomNavigationRouteLine style defined earlier. This style determines the appearance of the route line in the navigation view.

`configBuilder.darkThemeResId(R.style.Theme_CustomNavigationRouteLineDark)` sets the dark theme for the navigation UI, using the Theme_CustomNavigationRouteLineDark style defined earlier. This style is applied when the device's dark mode is enabled.

Besides, the action after clicking the fetch route button shows how to fetch a route using `NBNavigation.fetchRoute(origin, destination, new Callback<DirectionsResponse>() { ... });` The origin and destination points are passed as parameters, along with a callback to handle the response asynchronously.