Custom Controls

Using custom controls, you can add your own UI elements on top of the navigation view. The Navigation SDK automatically repositions your custom controls as the built-in layout changes.

For each position, you can set one custom control. The custom control can be one UI element or, if your design requires more, you can use a ViewGroup with multiple UI elements.

The setCustomControl method provides positions as defined in the CustomControlPosition enum:

• SECONDARY_HEADER (appears in portrait mode only)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW

In the image below, you can see examples of each position in the placement of a UI control informing the driver of the location of a rider.

Add a custom control below the primary header

By default, layouts display a Then arrow or lane guidance below the primary header. Your app can replace the default layout with a custom control set in the secondary header position. This control replaces the default content on top of the navigation view. If your view has a background, that background remains in place. When your app removes the custom content, the default content appears in its place.

This position is below the primary map header, with the top edge aligned with bottom edge of the primary header. The default secondary header is hidden. This position is only supported in portrait mode. In landscape mode, the secondary header is unavailable, and the layout does not change.

1. Create an Android View with the custom UI element or ViewGroup.
2. Inflate the xml or instantiate the custom view to get an instance of the view to add as a secondary header.

3. Use NavigationView.setCustomControl or NavigationFragment.setCustomControl with CustomControlPosition as SECONDARY_HEADER.

   The example below creates a fragment and adds custom control in the secondary header position.

    mNavFragment.setCustomControl(getLayoutInflater().
      inflate(R.layout.your_custom_control, null),
         CustomControlPosition.SECONDARY_HEADER);
   

Remove a secondary header

When you want to remove the secondary header and return to the default content, use the setCustomControl method.

• Set the view to null to remove the view.

  mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);
  

Add a custom control on top of the navigation view

Your app can specify a custom control aligned with the bottom edge of the view. When your app adds the custom control, the re-center button and the Google logo move up to accommodate the custom control.

1. Create an Android View with the UI element or view group you want to add.
2. Create the navigation view or fragment.
3. Call the setCustomControl method on the navigation view or fragment, and specify the control and the position to use.

The following example shows a custom View added to a NavigationFragment:

  private NavigationFragment mNavFragment;
    mNavFragment = (NavigationFragment)
      getFragmentManager().findFragmentById(R.id.navigation_fragment);

    // Create the custom control view.
    MyCustomView myCustomView = new MyCustomView();

    // Add the custom control to the bottom end corner of the layout.
    mNavFragment.setCustomControl(myCustomView, CustomControlPosition.
       BOTTOM_END_BELOW);

Remove a custom control

When you want to remove the custom control, use the setCustomControl method and specify the position of the control you want to remove.

• Set the view to null for that position.

  mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);