Customize Floating Buttons

Customize styling of floating buttons

This example shows:

How to customize the styling of Navigation floating buttons
- navigationViewReCentreInfoColor
- navigationViewReCentreBackgroundDrawable
- navViewSoundColor
- navViewSoundBackgroundColor
- navViewPauseColor
- navViewPauseBackgroundColor
- navViewRestartColor
- navViewRestartBackgroundColor
- navigationCurrentSpeedBackgroundColor
- navigationCurrentSpeedTextColor
- navigationCurrentSpeedUnitTextColor
How to config custom navigation style using NavLauncherConfig.Builder

For all code examples, refer to Navigation Code Examples

activity_custom_floating_buttons_style.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_floating_button"/>
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.CustomNavFloatingButtons" parent="NavigationViewLight">
2
        <!-- You can customize your navigation style here-->
3
        <item name="navigationViewReCentreInfoColor">#FFA90403</item>
4
        <item name="navigationViewReCentreBackgroundDrawable">@drawable/recenter_btn_background</item>
5
        <item name="navViewSoundColor">#FFA90403</item>
6
        <item name="navViewSoundBackgroundColor">#FF6E7ACA</item>
7
        <item name="navViewPauseColor">#FFFFC0A8</item>
8
        <item name="navViewPauseBackgroundColor">@color/white</item>
9
        <item name="navViewRestartColor">#FFFFC0A8</item>
10
        <item name="navViewRestartBackgroundColor">@color/white</item>
11
        <item name="navigationCurrentSpeedBackgroundColor">#FF6E7ACA</item>
12
        <item name="navigationCurrentSpeedTextColor">@color/black</item>
13
        <item name="navigationCurrentSpeedUnitTextColor">#FF9E10FF</item>
14
</style>
15

16
<style name="Theme.CustomNavFloatingButtonsDark" parent="NavigationViewDark">
17
        <!-- You can customize your navigation style here-->
18
        <item name="navigationViewReCentreInfoColor">#FFA90403</item>
19
        <item name="navigationViewReCentreBackgroundDrawable">@drawable/recenter_btn_background</item>
20
        <item name="navViewSoundColor">#FFA90403</item>
21
        <item name="navViewSoundBackgroundColor">#FF6E7ACA</item>
22
        <item name="navViewPauseColor">#FFFFC0A8</item>
23
        <item name="navViewPauseBackgroundColor">@color/white</item>
24
        <item name="navViewRestartColor">#FFFFC0A8</item>
25
        <item name="navViewRestartBackgroundColor">@color/white</item>
26
        <item name="navigationCurrentSpeedBackgroundColor">#FF6E7ACA</item>
27
        <item name="navigationCurrentSpeedTextColor">@color/black</item>
28
        <item name="navigationCurrentSpeedUnitTextColor">#FF9E10FF</item>
29
</style>

CustomFloatingButtonsStyleActivity 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.demo.R;
14
import ai.nextbillion.navigation.ui.NBNavigation;
15
import ai.nextbillion.navigation.ui.NavLauncherConfig;
16
import ai.nextbillion.navigation.ui.NavigationLauncher;
17
import androidx.annotation.NonNull;
18
import androidx.appcompat.app.AppCompatActivity;
19
import retrofit2.Call;
20
import retrofit2.Callback;
21
import retrofit2.Response;
22

23
public class CustomFloatingButtonsStyleActivity extends AppCompatActivity implements View.OnClickListener {
24

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_floating_buttons_style);
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.showSpeedometer(true);
74
            configBuilder.lightThemeResId(R.style.Theme_CustomNavFloatingButtons);
75
            configBuilder.darkThemeResId(R.style.Theme_CustomNavFloatingButtonsDark);
76
            NavigationLauncher.startNavigation(CustomFloatingButtonsStyleActivity.this, configBuilder.build());
77
        }
78
    }
79
}

Code Highlights

This code example shows how to customize the navigation view floating buttons via themes.xml configuration file.

The key part of the code example is the definition of the theme styles Theme.CustomNavFloatingButtons based on NavigationViewLight and Theme.CustomNavFloatingButtonsDark based on NavigationViewDark These styles are used to customize the appearance of the floating buttons in the navigation view.

The customized styles are applied to the navigation view by setting the lightThemeResId and darkThemeResId to NavLauncherConfig before start navigation

Code summary

In this code example:

configBuilder.lightThemeResId(R.style.Theme_CustomNavFloatingButtons) sets the light theme for the navigation UI, using the Theme_CustomNavFloatingButtons style defined earlier. This style determines the appearance of the floating buttons in the navigation view.
configBuilder.darkThemeResId(R.style.Theme_CustomNavFloatingButtonsDark) sets the dark theme for the navigation UI, using the Theme_CustomNavFloatingButtonsDark style defined earlier. This style is applied when the device's dark mode is enabled.
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.