Customize Top Banner Panel

This example shows:

  • How to customize the styling of the Navigation Top banner panel

    • navViewBannerBackground

    • navViewBannerPrimaryText

    • navViewBannerSecondaryText

    • navViewBannerManeuverPrimary

  • How to config custom navigation style using NavLauncherConfig.Builder

docs-image

For all code examples, refer to Navigation Code Examples

activity_custom_top_banner_panel.xml view source

1
<?xml version="1.0" encoding="utf-8"?>
2
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent"
5
android:orientation="vertical"
6
android:padding="10dp">
7
8
<LinearLayout
9
android:layout_width="wrap_content"
10
android:orientation="vertical"
11
android:layout_height="wrap_content">
12
<Button
13
android:id="@+id/fetchRoute"
14
android:layout_width="wrap_content"
15
android:layout_height="wrap_content"
16
android:textSize="12sp"
17
android:text="@string/fetch_route"/>
18
19
<Button
20
android:id="@+id/startNav"
21
android:layout_width="wrap_content"
22
android:layout_height="wrap_content"
23
android:textSize="12sp"
24
android:text="@string/start_navigation_with_custom_top_panel"/>
25
</LinearLayout>
26
27
<TextView
28
android:id="@+id/routeGeometry"
29
android:layout_width="wrap_content"
30
android:layout_height="wrap_content"
31
android:layout_marginTop="10dp"/>
32
33
<ProgressBar
34
android:id="@+id/progress"
35
android:visibility="gone"
36
android:layout_width="wrap_content"
37
android:layout_height="wrap_content"
38
android:layout_gravity="center"/>
39
40
</LinearLayout>

themes.xml view source

1
<style name="Theme.CustomNavTopBannerPanel" parent="NavigationViewLight">
2
<!-- You can customise your navigation style here-->
3
<item name="navViewBannerBackground">#FFC84E0D</item>
4
<item name="navViewBannerPrimaryText">#FF9E10FF</item>
5
<item name="navViewBannerSecondaryText">#FFFA8C1C</item>
6
<item name="navViewBannerManeuverPrimary">#FF4E2EFF</item>
7
</style>
8
9
<style name="Theme.CustomNavTopBannerPanelDark" parent="NavigationViewDark">
10
<!-- You can customise your navigation style here-->
11
<item name="navViewBannerBackground">#FFC84E0D</item>
12
<item name="navViewBannerPrimaryText">#FF9E10FF</item>
13
<item name="navViewBannerSecondaryText">#FFFA8C1C</item>
14
<item name="navViewBannerManeuverPrimary">#FF4E2EFF</item>
15
</style>

CustomTopBannerPanelStyleActivity view source

1
package ai.nextbillion.navigation.demo.activity;
2
3
import android.os.Bundle;
4
import android.view.View;
5
import android.widget.Button;
6
import android.widget.ProgressBar;
7
import android.widget.TextView;
8
9
import ai.nextbillion.kits.directions.models.DirectionsResponse;
10
import ai.nextbillion.kits.directions.models.DirectionsRoute;
11
import ai.nextbillion.kits.geojson.Point;
12
import ai.nextbillion.maps.location.modes.RenderMode;
13
import ai.nextbillion.navigation.core.navigation.NavigationConstants;
14
import ai.nextbillion.navigation.demo.R;
15
import ai.nextbillion.navigation.ui.NBNavigation;
16
import ai.nextbillion.navigation.ui.NavLauncherConfig;
17
import ai.nextbillion.navigation.ui.NavigationLauncher;
18
import androidx.annotation.NonNull;
19
import androidx.appcompat.app.AppCompatActivity;
20
import retrofit2.Call;
21
import retrofit2.Callback;
22
import retrofit2.Response;
23
24
public class CustomTopBannerPanelStyleActivity extends AppCompatActivity implements View.OnClickListener {
25
26
private Button fetchRoute;
27
private Button startNav;
28
private TextView routeGeometry;
29
private DirectionsRoute directionsRoute;
30
private ProgressBar progress;
31
@Override
32
protected void onCreate(Bundle savedInstanceState) {
33
super.onCreate(savedInstanceState);
34
setContentView(R.layout.activity_custom_top_banner_panel);
35
fetchRoute = findViewById(R.id.fetchRoute);
36
startNav = findViewById(R.id.startNav);
37
routeGeometry = findViewById(R.id.routeGeometry);
38
progress = findViewById(R.id.progress);
39
fetchRoute.setOnClickListener(this);
40
startNav.setOnClickListener(this);
41
startNav.setEnabled(false);
42
43
}
44
45
@Override
46
public void onClick(View view) {
47
if (view.getId() == R.id.fetchRoute) {
48
progress.setVisibility(View.VISIBLE);
49
Point origin = Point.fromLngLat(103.75986708439264, 1.312533169133601);
50
Point destination = Point.fromLngLat(103.77982271935586, 1.310473772283314);
51
52
NBNavigation.fetchRoute(origin, destination, new Callback<DirectionsResponse>() {
53
@Override
54
public void onResponse(@NonNull Call<DirectionsResponse> call, @NonNull Response<DirectionsResponse> response) {
55
progress.setVisibility(View.GONE);
56
//start navigation with the route we just fetched.
57
if (response.body() != null && !response.body().routes().isEmpty()) {
58
directionsRoute = response.body().routes().get(0);
59
routeGeometry.setText(String.format("Route Geometry: %s", directionsRoute.geometry()));
60
startNav.setEnabled(true);
61
}
62
}
63
64
@Override
65
public void onFailure(@NonNull Call<DirectionsResponse> call, @NonNull Throwable t) {
66
progress.setVisibility(View.GONE);
67
}
68
});
69
} else if (view.getId() == R.id.startNav) {
70
NavLauncherConfig.Builder configBuilder = NavLauncherConfig.builder(directionsRoute);
71
configBuilder.locationLayerRenderMode(RenderMode.GPS);
72
configBuilder.shouldSimulateRoute(true);
73
configBuilder.lightThemeResId(R.style.Theme_CustomNavTopBannerPanel);
74
configBuilder.darkThemeResId(R.style.Theme_CustomNavTopBannerPanelDark);
75
NavigationLauncher.startNavigation(CustomTopBannerPanelStyleActivity.this, configBuilder.build());
76
}
77
}
78
}

Code Highlights

This Code example defined the theme styles Theme_CustomNavTopBannerPanel based on NavigationViewLight and Theme_CustomNavTopBannerPanelDark based on NavigationViewDark These styles are used to customize the appearance of the navigation Top Banner Panel in the navigation view.

Code summary

The following items are defined within Theme_CustomNavTopBannerPanel:

  • navViewBannerBackground to specify the background color of the navigation banner.

  • navViewBannerPrimaryText to specify the color of the primary text in the navigation banner.

  • navViewBannerSecondaryText to specify the color of the secondary text in the navigation banner.

  • navViewBannerManeuverPrimary to specify the color of the primary maneuver text in the navigation banner.

The Theme_CustomNavTopBannerPanelDark style is similar to the previous style but is based on NavigationViewDark.

configBuilder.lightThemeResId(R.style.Theme_CustomNavTopBannerPanel) sets the light theme for the navigation UI, using the Theme_CustomNavTopBannerPanel style defined earlier. This style determines the appearance of the top banner panel in the navigation view.

configBuilder.darkThemeResId(R.style.Theme_CustomNavTopBannerPanelDark) sets the dark theme for the navigation UI, using the Theme_CustomNavTopBannerPanelDark 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.

© 2024 NextBillion.ai all rights reserved.