# 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


![documentation image](https://static.nextbillion.io/docs-next/docs/navigation/android/customize-floating-buttons.jpg)

For all code examples, refer to [Navigation Code Examples](https://github.com/nextbillion-ai/nb-navigation-android-demo)

**activity_custom_floating_buttons_style.xml [view source](https://github.com/nextbillion-ai/nb-navigation-android-demo/blob/main/app/src/main/res/layout/activity_custom_floating_buttons_style.xml)**

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/fetchRoute"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:text="@string/fetch_route"/>

        <Button
            android:id="@+id/startNav"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:text="@string/start_navigation_with_custom_floating_button"/>
    </LinearLayout>

    <TextView
        android:id="@+id/routeGeometry"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"/>

    <ProgressBar
        android:id="@+id/progress"
        android:visibility="gone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

</LinearLayout>
```

**themes.xml [view source](https://github.com/nextbillion-ai/nb-navigation-android-demo/blob/main/app/src/main/res/values/themes.xml)**

```xml
<style name="Theme.CustomNavFloatingButtons" parent="NavigationViewLight">
        <!-- You can customize your navigation style here-->
        <item name="navigationViewReCentreInfoColor">#FFA90403</item>
        <item name="navigationViewReCentreBackgroundDrawable">@drawable/recenter_btn_background</item>
        <item name="navViewSoundColor">#FFA90403</item>
        <item name="navViewSoundBackgroundColor">#FF6E7ACA</item>
        <item name="navViewPauseColor">#FFFFC0A8</item>
        <item name="navViewPauseBackgroundColor">@color/white</item>
        <item name="navViewRestartColor">#FFFFC0A8</item>
        <item name="navViewRestartBackgroundColor">@color/white</item>
        <item name="navigationCurrentSpeedBackgroundColor">#FF6E7ACA</item>
        <item name="navigationCurrentSpeedTextColor">@color/black</item>
        <item name="navigationCurrentSpeedUnitTextColor">#FF9E10FF</item>
</style>

<style name="Theme.CustomNavFloatingButtonsDark" parent="NavigationViewDark">
        <!-- You can customize your navigation style here-->
        <item name="navigationViewReCentreInfoColor">#FFA90403</item>
        <item name="navigationViewReCentreBackgroundDrawable">@drawable/recenter_btn_background</item>
        <item name="navViewSoundColor">#FFA90403</item>
        <item name="navViewSoundBackgroundColor">#FF6E7ACA</item>
        <item name="navViewPauseColor">#FFFFC0A8</item>
        <item name="navViewPauseBackgroundColor">@color/white</item>
        <item name="navViewRestartColor">#FFFFC0A8</item>
        <item name="navViewRestartBackgroundColor">@color/white</item>
        <item name="navigationCurrentSpeedBackgroundColor">#FF6E7ACA</item>
        <item name="navigationCurrentSpeedTextColor">@color/black</item>
        <item name="navigationCurrentSpeedUnitTextColor">#FF9E10FF</item>
</style>
```

**CustomFloatingButtonsStyleActivity [view source](https://github.com/nextbillion-ai/nb-navigation-android-demo/blob/main/app/src/main/java/ai/nextbillion/navigation/demo/activity/CustomFloatingButtonsStyleActivity.java)**

```java
package ai.nextbillion.navigation.demo.activity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

import ai.nextbillion.kits.directions.models.DirectionsResponse;
import ai.nextbillion.kits.directions.models.DirectionsRoute;
import ai.nextbillion.kits.geojson.Point;
import ai.nextbillion.maps.location.modes.RenderMode;
import ai.nextbillion.navigation.demo.R;
import ai.nextbillion.navigation.ui.NBNavigation;
import ai.nextbillion.navigation.ui.NavLauncherConfig;
import ai.nextbillion.navigation.ui.NavigationLauncher;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;

public class CustomFloatingButtonsStyleActivity extends AppCompatActivity implements View.OnClickListener {

    private Button fetchRoute;
    private Button startNav;
    private TextView routeGeometry;
    private DirectionsRoute directionsRoute;
    private ProgressBar progress;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_floating_buttons_style);
        fetchRoute = findViewById(R.id.fetchRoute);
        startNav = findViewById(R.id.startNav);
        routeGeometry = findViewById(R.id.routeGeometry);
        progress = findViewById(R.id.progress);
        fetchRoute.setOnClickListener(this);
        startNav.setOnClickListener(this);
        startNav.setEnabled(false);

    }

    @Override
    public void onClick(View view) {
        if (view.getId() == R.id.fetchRoute) {
            progress.setVisibility(View.VISIBLE);
            Point origin = Point.fromLngLat(103.75986708439264, 1.312533169133601);
            Point destination = Point.fromLngLat(103.77982271935586, 1.310473772283314);

            NBNavigation.fetchRoute(origin, destination, new Callback<DirectionsResponse>() {
                @Override
                public void onResponse(@NonNull Call<DirectionsResponse> call, @NonNull Response<DirectionsResponse> response) {
                    progress.setVisibility(View.GONE);
                    //start navigation with the route we just fetched.
                    if (response.body() != null && !response.body().routes().isEmpty()) {
                        directionsRoute = response.body().routes().get(0);
                        routeGeometry.setText(String.format("Route Geometry: %s", directionsRoute.geometry()));
                        startNav.setEnabled(true);
                    }
                }

                @Override
                public void onFailure(@NonNull Call<DirectionsResponse> call, @NonNull Throwable t) {
                    progress.setVisibility(View.GONE);
                }
            });
        } else if (view.getId() == R.id.startNav) {
            NavLauncherConfig.Builder configBuilder = NavLauncherConfig.builder(directionsRoute);
            configBuilder.locationLayerRenderMode(RenderMode.GPS);
            configBuilder.shouldSimulateRoute(true);
            configBuilder.showSpeedometer(true);
            configBuilder.lightThemeResId(R.style.Theme_CustomNavFloatingButtons);
            configBuilder.darkThemeResId(R.style.Theme_CustomNavFloatingButtonsDark);
            NavigationLauncher.startNavigation(CustomFloatingButtonsStyleActivity.this, configBuilder.build());
        }
    }
}
```

### 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.