Load NavigationView in Fragment

How to use NavigationView to navigate in Fragment?

  • Add NavigationView in Fragment

  • In order for your app to correctly call the MapView's lifecycle methods, you must override the following lifecycle methods in the Fragment that contains the NavigationView and call the respective NavigationView method. The following lifecycle methods must be overridden and include the matching NavigationView method.

docs-image

For all code examples, refer to Navigation Code Examples

1@Override
2public void onStart() {
3 super.onStart();
4 navigationView.onStart();
5}
6
7@Override
8public void onResume() {
9 super.onResume();
10 navigationView.onResume();
11}
12
13@Override
14public void onSaveInstanceState(@NonNull Bundle outState) {
15 navigationView.onSaveInstanceState(outState);
16 super.onSaveInstanceState(outState);
17}
18
19@Override
20public void onViewStateRestored(@Nullable Bundle savedInstanceState) {
21 super.onViewStateRestored(savedInstanceState);
22 if (savedInstanceState != null) {
23 navigationView.onRestoreInstanceState(savedInstanceState);
24 }
25}
26
27@Override
28public void onPause() {
29 super.onPause();
30 navigationView.onPause();
31}
32
33@Override
34public void onStop() {
35 super.onStop();
36 navigationView.onStop();
37}
38
39@Override
40public void onLowMemory() {
41 super.onLowMemory();
42 navigationView.onLowMemory();
43}
44
45@Override
46public void onDestroyView() {
47 super.onDestroyView();
48 navigationView.onDestroy();
49}

activity_fragment_navigation.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 android:layout_width="match_parent"
5 android:layout_height="match_parent">
6
7 <FrameLayout
8 android:id="@+id/navigation_fragment_frame"
9 android:layout_width="match_parent"
10 android:layout_height="match_parent"
11 android:layout_marginBottom="16dp"
12 android:layout_marginEnd="16dp"
13 android:layout_marginStart="16dp"
14 android:layout_marginTop="16dp"
15 app:layout_constraintBottom_toBottomOf="parent"
16 app:layout_constraintEnd_toEndOf="parent"
17 app:layout_constraintStart_toStartOf="parent"
18 app:layout_constraintTop_toTopOf="parent" />
19
20</androidx.constraintlayout.widget.ConstraintLayout>

navigation_view_fragment_layout.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 android:layout_width="match_parent"
5 android:layout_height="match_parent">
6
7 <ai.nextbillion.navigation.ui.NavigationView
8 android:id="@+id/navigation_view_fragment"
9 android:layout_width="0dp"
10 android:layout_height="0dp"
11 app:layout_constraintBottom_toBottomOf="parent"
12 app:layout_constraintEnd_toEndOf="parent"
13 app:layout_constraintStart_toStartOf="parent"
14 app:layout_constraintTop_toTopOf="parent" />
15
16</androidx.constraintlayout.widget.ConstraintLayout>

FragmentNavigationActivity view source

1public class FragmentNavigationActivity extends AppCompatActivity {
2
3 @Override
4 protected void onCreate(Bundle savedInstanceState) {
5 super.onCreate(savedInstanceState);
6 setContentView(R.layout.activity_fragment_navigation);
7
8 initializeNavigationViewFragment(savedInstanceState);
9 }
10
11 private void initializeNavigationViewFragment(@Nullable Bundle savedInstanceState) {
12 FragmentManager fragmentManager = getSupportFragmentManager();
13 if (savedInstanceState == null) {
14 FragmentTransaction transaction = fragmentManager.beginTransaction();
15 transaction.disallowAddToBackStack();
16 transaction.add(R.id.navigation_fragment_frame, new NavigationFragment()).commit();
17 }
18 }
19}

NavigationFragment view source

1public class NavigationFragment extends Fragment implements OnNavigationReadyCallback, NavigationListener {
2
3 private static final double ORIGIN_LONGITUDE = -77.04012393951416;
4 private static final double ORIGIN_LATITUDE = 38.9111117447887;
5 private static final double DESTINATION_LONGITUDE = -77.03847169876099;
6 private static final double DESTINATION_LATITUDE = 38.91113678979344;
7
8 private NavigationView navigationView;
9 private DirectionsRoute directionsRoute;
10
11 @Nullable
12 @Override
13 public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
14 @Nullable Bundle savedInstanceState) {
15 return inflater.inflate(R.layout.navigation_view_fragment_layout, container, false);
16 }
17
18 @Override
19 public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
20 super.onViewCreated(view, savedInstanceState);
21 navigationView = view.findViewById(R.id.navigation_view_fragment);
22 navigationView.onCreate(savedInstanceState);
23 navigationView.initialize(this);
24 }
25
26 @Override
27 public void onStart() {
28 super.onStart();
29 navigationView.onStart();
30 }
31
32 @Override
33 public void onResume() {
34 super.onResume();
35 navigationView.onResume();
36 }
37
38 @Override
39 public void onSaveInstanceState(@NonNull Bundle outState) {
40 navigationView.onSaveInstanceState(outState);
41 super.onSaveInstanceState(outState);
42 }
43
44 @Override
45 public void onViewStateRestored(@Nullable Bundle savedInstanceState) {
46 super.onViewStateRestored(savedInstanceState);
47 if (savedInstanceState != null) {
48 navigationView.onRestoreInstanceState(savedInstanceState);
49 }
50 }
51
52 @Override
53 public void onPause() {
54 super.onPause();
55 navigationView.onPause();
56 }
57
58 @Override
59 public void onStop() {
60 super.onStop();
61 navigationView.onStop();
62 }
63
64 @Override
65 public void onLowMemory() {
66 super.onLowMemory();
67 navigationView.onLowMemory();
68 }
69
70 @Override
71 public void onDestroyView() {
72 super.onDestroyView();
73 navigationView.onDestroy();
74 }
75
76 @Override
77 public void onNavigationReady(boolean isRunning) {
78 Point origin = Point.fromLngLat(ORIGIN_LONGITUDE, ORIGIN_LATITUDE);
79 Point destination = Point.fromLngLat(DESTINATION_LONGITUDE, DESTINATION_LATITUDE);
80 fetchRoute(origin, destination);
81 }
82
83 @Override
84 public void onCancelNavigation() {
85 navigationView.stopNavigation();
86 stopNavigation();
87 }
88
89 @Override
90 public void onNavigationFinished() {
91 // no-op
92 }
93
94 @Override
95 public void onNavigationRunning() {
96 // no-op
97 }
98
99 private void fetchRoute(Point origin, Point destination) {
100
101 Point origin1 = Point.fromLngLat(78.39382912963629, 17.49361551715865);
102 Point destination1 = Point.fromLngLat(78.39086260646582, 17.484744887695726);
103
104 NBNavigation.fetchRoute(origin1, destination1, new Callback<DirectionsResponse>() {
105 @Override
106 public void onResponse(@NonNull Call<DirectionsResponse> call, @NonNull Response<DirectionsResponse> response) {
107
108 //start navigation with the route we just fetched.
109 if (response.body() != null && !response.body().routes().isEmpty()) {
110 directionsRoute = response.body().routes().get(0);
111 startNavigation();
112 }
113 }
114
115 @Override
116 public void onFailure(@NonNull Call<DirectionsResponse> call, @NonNull Throwable t) {
117
118 }
119 });
120 }
121
122 private void startNavigation() {
123 if (directionsRoute == null) {
124 return;
125 }
126 NavViewConfig options = NavViewConfig.builder()
127 .route(directionsRoute)
128 .shouldSimulateRoute(true)
129 .navigationListener(NavigationFragment.this)
130 .build();
131 navigationView.startNavigation(options);
132 }
133
134 private void stopNavigation() {
135
136 }
137}

Code Highlights

This code example shows how to display the map view and start navigation in a fragment. Different from activity, in fragment to keep the map working normally, the following methods must be overridden:

  • onStart()

  • onResume()

  • onSaveInstanceState()

  • onViewStateRestored()

  • onPause()

  • onStop()

  • onLowMemory()

  • onDestroyView()

Code summary

The NavigationFragment class extends Fragment and implements the OnNavigationReadyCallback and NavigationListener interfaces. It uses the NextbillionMap library to display a map and navigate between two points.

The class has the following members:

  • ORIGIN_LONGITUDE: The longitude of the origin point.

  • ORIGIN_LATITUDE: The latitude of the origin point.

  • DESTINATION_LONGITUDE: The longitude of the destination point.

  • DESTINATION_LATITUDE: The latitude of the destination point.

  • navigationView: A NavigationView object that displays the map.

  • directionsRoute: A DirectionsRoute object that represents the route between the origin and destination points.

The class implements the following methods:

  • onCreateView(): This method is called when the fragment is created. It inflates the layout for the fragment and initializes the NavigationView object.

  • onViewCreated(): This method is called after the fragment's view has been created. It sets the NavigationView object's OnNavigationReadyCallback and NavigationListener interfaces to the NavigationFragment class.

  • onStart(): This method is called when the fragment starts. It calls the onStart() method of the NavigationView object.

  • onResume(): This method is called when the fragment resumes. It calls the onResume() method of the NavigationView object.

  • onSaveInstanceState(): This method is called when the fragment is saved to the savedInstanceState. It calls the onSaveInstanceState() method of the NavigationView object.

  • onViewStateRestored(): This method is called when the fragment's state is restored from the savedInstanceState. It calls the onViewStateRestored() method of the NavigationView object.

  • onPause(): This method is called when the fragment pauses. It calls the onPause() method of the NavigationView object.

  • onStop(): This method is called when the fragment stops. It calls the onStop() method of the NavigationView object.

  • onLowMemory(): This method is called when the device is low on memory. It calls the onLowMemory() method of the NavigationView object.

  • onDestroyView(): This method is called when the fragment's view is destroyed. It calls the onDestroyView() method of the NavigationView object.

  • onNavigationReady(): This method is called when the NavigationView object is ready. It fetches the route between the origin and destination points and starts navigation.

  • onCancelNavigation(): This method is called when the user cancels navigation. It stops navigation.

  • onNavigationFinished(): This method is called when navigation is finished.

  • onNavigationRunning(): This method is called when navigation is running.

  • fetchRoute(): This method fetches the route between the origin and destination points.

  • startNavigation(): This method starts navigation with the route that was fetched.

  • stopNavigation(): This method stops navigation.