Customize Navigation View UI elements

Navigation View is the UI provided to show the navigation route process. In this example we will show how to do customization on Navigation View, including:

Add a new UI element by customizing the activity layout
Show or hide existing Navigation View UI elements

As is shown in the above image, we customized the Navigation View app bar and added a switch button to it. A user tapping the switch button will change the visibility of two UI elements (Recenter Button and Sound button), which are originally existing in Navigation View.

For all code examples, refer to Navigation Code Examples

activity_custom_element_visibility.xml view source

1
<?xml version="1.0" encoding="utf-8"?>
2
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3
    xmlns:app="http://schemas.android.com/apk/res-auto"
4
    xmlns:tools="http://schemas.android.com/tools"
5
    android:layout_width="match_parent"
6
    android:layout_height="match_parent"
7
    tools:context=".activity.CustomElementVisibilityActivity">
8

9
    <ai.nextbillion.navigation.ui.NavigationView
10
        android:id="@+id/custom_element_navigation_view"
11
        android:layout_width="match_parent"
12
        android:layout_height="match_parent"/>
13

14
</androidx.constraintlayout.widget.ConstraintLayout>

CustomElementVisibilityActivity view source

1
package ai.nextbillion.navigation.demo.activity;
2

3
import android.os.Bundle;
4
import android.view.Menu;
5
import android.view.MenuItem;
6

7
import ai.nextbillion.kits.directions.models.DirectionsResponse;
8
import ai.nextbillion.kits.directions.models.RouteRequestParams;
9
import ai.nextbillion.navigation.core.routefetcher.RequestParamsWrapper;
10
import ai.nextbillion.navigation.demo.R;
11
import ai.nextbillion.navigation.ui.NavViewConfig;
12
import ai.nextbillion.navigation.ui.NavigationView;
13
import ai.nextbillion.navigation.ui.OnNavigationReadyCallback;
14
import ai.nextbillion.navigation.ui.listeners.NavigationListener;
15

16
import android.annotation.Nullable;
17
import androidx.appcompat.app.AppCompatActivity;
18
import androidx.appcompat.widget.SwitchCompat;
19

20

21
import java.io.IOException;
22
import java.io.InputStream;
23
import java.util.Scanner;
24

25
/***
26
 * This class demonstrates how to add an extra switch button on Appbar
27
 * and use the switch button to control the display of UI elements in Navigation view
28
 */
29

30
public class CustomElementVisibilityActivity extends AppCompatActivity implements OnNavigationReadyCallback, NavigationListener {
31
    private NavigationView navigationView;
32

33
    @Override
34
    protected void onCreate(@Nullable Bundle savedInstanceState) {
35
        super.onCreate(savedInstanceState);
36
        setContentView(R.layout.activity_custom_element_visibility);
37
        navigationView = findViewById(R.id.custom_element_navigation_view);
38
        navigationView.onCreate(savedInstanceState);
39
        navigationView.initialize(this);
40
    }
41

42
    @Override
43
    public boolean onCreateOptionsMenu(Menu menu) {
44
        // Inflate the menu; this adds items to the action bar if it is present.
45
        getMenuInflater().inflate(R.menu.mainmenu, menu);
46
        MenuItem item = menu.findItem(R.id.myswitch);
47
        SwitchCompat mySwitch = (SwitchCompat) item.getActionView();
48

49
        // adding this here to keep the initial display consistency of the UI elements
50
        controlDisplayOfElements(mySwitch.isChecked());
51
        // The on-click event will be triggered each time user clicks the switch button on the App bar
52
        mySwitch.setOnCheckedChangeListener((buttonView, isChecked) -> {
53
            controlDisplayOfElements(isChecked);
54
        });
55
        return true;
56
    }
57

58
    private void controlDisplayOfElements(boolean shouldDisplay) {
59
        if (shouldDisplay) {
60
            navigationView.showRecenterBtn();
61
            navigationView.retrieveSoundButton().show();
62
        } else {
63
            navigationView.hideRecenterBtn();
64
            navigationView.retrieveSoundButton().hide();
65
        }
66
    }
67

68
    @Override
69
    public void onNavigationReady(boolean b) {
70
        // read original backend response from file
71
        DirectionsResponse response = DirectionsResponse.fromJson(loadJsonFromAsset());
72
        // modify the backend response following normal api call process
73
        DirectionsResponse modifiedResponse = new RequestParamsWrapper().wrapRequestParams(response, RouteRequestParams.builder().build());
74
        NavViewConfig.Builder config =
75
                NavViewConfig.builder().route(modifiedResponse.routes().get(0))
76
                        // The visibility of speedometer can be set here before starting navigation
77
                        .showSpeedometer(true)
78
                        // add this so the exit button in Navigation view would work
79
                        .navigationListener(this)
80
                        .shouldSimulateRoute(true);
81
        navigationView.startNavigation(config.build());
82
    }
83

84
    private static String convertStreamToString(InputStream is) {
85
        Scanner s = new Scanner(is).useDelimiter("\\A");
86
        return s.hasNext() ? s.next() : "";
87
    }
88

89
    private String loadJsonFromAsset() {
90
        // Using this method to load GeoJSON files from the assets folder.
91
        try {
92
            return convertStreamToString(getApplicationContext().getAssets().open("directions-route.json"));
93
        } catch (IOException ex) {
94
            ex.printStackTrace();
95
            return null;
96
        }
97
    }
98

99
    @Override
100
    public void onStart() {
101
        super.onStart();
102
        navigationView.onStart();
103
    }
104

105
    @Override
106
    public void onResume() {
107
        super.onResume();
108
        navigationView.onResume();
109
    }
110

111
    @Override
112
    public void onLowMemory() {
113
        super.onLowMemory();
114
        navigationView.onLowMemory();
115
    }
116

117
    @Override
118
    public void onBackPressed() {
119
        // If the navigation view didn't need to do anything, call super
120
        if (!navigationView.onBackPressed()) {
121
            super.onBackPressed();
122
        }
123
    }
124

125
    @Override
126
    protected void onSaveInstanceState(Bundle outState) {
127
        navigationView.onSaveInstanceState(outState);
128
        super.onSaveInstanceState(outState);
129
    }
130

131
    @Override
132
    protected void onRestoreInstanceState(Bundle savedInstanceState) {
133
        super.onRestoreInstanceState(savedInstanceState);
134
        navigationView.onRestoreInstanceState(savedInstanceState);
135
    }
136

137

138
    @Override
139
    public void onPause() {
140
        super.onPause();
141
        navigationView.onPause();
142
    }
143

144
    @Override
145
    public void onStop() {
146
        super.onStop();
147
        navigationView.onStop();
148
    }
149

150
    @Override
151
    protected void onDestroy() {
152
        super.onDestroy();
153
        navigationView.onDestroy();
154
    }
155

156
    @Override
157
    public void onCancelNavigation() {
158
        finish();
159
    }
160

161
    @Override
162
    public void onNavigationFinished() {
163

164
    }
165

166
    @Override
167
    public void onNavigationRunning() {
168

169
    }
170
}

Code Highlights

The main logic of the code example is to use a switch button to control the visibility of the Recenter button and the Sound button in the navigation view.

The controlDisPlayOfElement() function shows how to display or hide the corresponding view during navigation.

Code summary

The code snippet is for an Android activity that allows users to control the visibility of elements in a navigation view. The activity extends the AppCompatActivity class and implements the OnNavigationReadyCallback and NavigationListener interfaces.

The activity's onCreate() method first inflates the activity_custom_element_visibility layout. It then finds the navigationView view in the layout and calls its onCreate() method. Finally, it calls the initialize() method on the navigationView to initialize it.

The activity's onCreateOptionsMenu() method inflates the mainmenu menu. It then finds the myswitch menu item and gets its SwitchCompat view. The activity then calls the controlDisplayOfElements() method to set the initial visibility of the elements in the navigation view. The activity also sets a listener on the myswitch view so that it can be updated when the user changes the switch's state.

The controlDisplayOfElements() method takes a boolean value as input. If the value is true, the method shows the Recenter button and the Sound button in the navigation view. If the value is false, the method hides the buttons.

The onNavigationReady() method is called when the navigation view is ready. The method reads the original backend response from a file. It then modifies the response and creates a NavViewConfig object. The NavViewConfig object specifies the route that will be navigated, whether the speedometer will be shown and whether the navigation listener will be used. The method then calls the startNavigation() method on the navigation view to start navigation.

The convertStreamToString() method converts an input stream to a string. The method uses a Scanner object to read the stream and a delimiter to determine where the stream ends.

The loadJsonFromAsset() method loads a GeoJSON file from the assets folder. The method tries to open the file and read its contents. If the file cannot be opened, the method returns null.

The activity uses the NavigationView class to display a navigation view in the user interface. The activity also uses the OnNavigationReadyCallback and NavigationListener interfaces to interact with the navigation view.

Customize Navigation View UI elements

Code Highlights

Code summary

PRODUCTS

SOLUTIONS

COMPARE

DEVELOPERS

GUIDES

RESOURCES

COMPANY

UNITED STATES

SINGAPORE