# Pulsing layer opacity

> **Note (legacy): A newer version of the Maps SDK is available**
> 
> This page uses v9.7.1 of the Mapbox Maps SDK. A newer version of the SDK is available. Learn about the latest version, v11.29.0, in the [Maps SDK documentation](https://docs.mapbox.com/android/maps/guides/).

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/android/android/assets/medias/maps-example-pulsing-layer-opacity-color-activity-15faf18cae4dc448db1b6d00b6895e6e.mp4).

> **Note**
> 
> This example is a part of the [Mapbox Android Demo app](https://github.com/mapbox/mapbox-android-demo). You can find the values for all referenced resources in the [`res`](https://github.com/mapbox/mapbox-android-demo/tree/master/MapboxAndroidDemo/src/main/res) directory. For example, see [`res/values/activity_strings.xml`](https://github.com/mapbox/mapbox-android-demo/tree/master/MapboxAndroidDemo/src/main/res/values/activity_strings.xml) for `R.string.*` references used in this example. The dependencies can be found [here.](https://github.com/mapbox/mapbox-navigation-android-examples/blob/main/app/build.gradle) The examples use View binding. [See setup documention if necessary.](https://developer.android.com/topic/libraries/view-binding)

Title: `activity_lab_pulsing_layer_opacity_color`

[View on GitHub](https://github.com/mapbox/mapbox-android-demo/tree/master/MapboxAndroidDemo/src/main/res/layout/activity_lab_pulsing_layer_opacity_color.xml)

```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:mapbox="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        mapbox:mapbox_cameraTargetLat="34.0444"
        mapbox:mapbox_cameraTargetLng="-118.2536"
        mapbox:mapbox_cameraZoom="15"
        />

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions_parent_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        fab:fab_addButtonColorNormal="@color/mapboxRed"
        fab:fab_addButtonColorPressed="@color/mapboxWhite"
        fab:fab_addButtonPlusIconColor="@color/mapboxWhite"
        fab:fab_labelStyle="@style/menu_labels_style">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_toggle_hotels"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/mapboxBlue"
            fab:fab_colorPressed="@color/mapboxWhite"
            fab:fab_size="mini"
            fab:fab_title="@string/fab_title_hotels"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_toggle_parks"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/mapboxGreen"
            fab:fab_colorPressed="@color/mapboxWhite"
            fab:fab_size="mini"
            fab:fab_title="@string/fab_title_parks"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_toggle_attractions"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/mapboxRed"
            fab:fab_colorPressed="@color/mapboxWhite"
            fab:fab_size="mini"
            fab:fab_title="@string/fab_title_attractions"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

**Java**

Title: `PulsingLayerOpacityColorActivity.java`

[View on GitHub](https://github.com/mapbox/mapbox-android-demo/tree/master/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/examples/labs/PulsingLayerOpacityColorActivity.java)

```java
package com.mapbox.mapboxandroiddemo.examples.labs;

import android.animation.ArgbEvaluator;
import android.animation.ValueAnimator;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;

import com.getbase.floatingactionbutton.FloatingActionButton;
import com.mapbox.mapboxandroiddemo.R;
import com.mapbox.mapboxsdk.Mapbox;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.MapboxMap;
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
import com.mapbox.mapboxsdk.maps.Style;
import com.mapbox.mapboxsdk.style.layers.CircleLayer;
import com.mapbox.mapboxsdk.style.layers.FillLayer;
import com.mapbox.mapboxsdk.style.layers.Layer;
import com.mapbox.mapboxsdk.style.layers.Property;
import com.mapbox.mapboxsdk.style.sources.GeoJsonSource;

import java.io.IOException;
import java.io.InputStream;
import java.nio.charset.Charset;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import static com.mapbox.mapboxsdk.style.layers.Property.VISIBLE;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.circleColor;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.fillColor;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.visibility;

/**
 * Use the style API to highlight different types of data.
 * In this example, parks, hotels, and attractions are displayed.
 */
public class PulsingLayerOpacityColorActivity extends AppCompatActivity implements OnMapReadyCallback {

  private MapView mapView;
  private ValueAnimator parkColorAnimator;
  private ValueAnimator hotelColorAnimator;
  private ValueAnimator attractionsColorAnimator;

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Mapbox access token is configured here. This needs to be called either in your application
    // object or in the same activity which contains the mapview.
    Mapbox.getInstance(this, getString(R.string.access_token));

    // This contains the MapView in XML and needs to be called after the access token is configured.
    setContentView(R.layout.activity_lab_pulsing_layer_opacity_color);
    mapView = findViewById(R.id.mapView);
    mapView.onCreate(savedInstanceState);
    mapView.getMapAsync(this);
  }


  @Override
  public void onMapReady(@NonNull final MapboxMap mapboxMap) {

    mapboxMap.setStyle(Style.LIGHT, new Style.OnStyleLoaded() {
      @Override
      public void onStyleLoaded(@NonNull final Style style) {
        // Add the hotels source to the map
        GeoJsonSource hotelSource = new GeoJsonSource("hotels", loadJsonFromAsset("la_hotels.geojson"));
        style.addSource(hotelSource);

        FillLayer hotelLayer = new FillLayer("hotels", "hotels").withProperties(
          fillColor(Color.parseColor("#5a9fcf")),
          visibility(Property.NONE)
        );

        style.addLayer(hotelLayer);

        final FillLayer hotels = (FillLayer) style.getLayer("hotels");

        hotelColorAnimator = ValueAnimator.ofObject(
          new ArgbEvaluator(),
          Color.parseColor("#5a9fcf"), // Brighter shade
          Color.parseColor("#2C6B97") // Darker shade
        );
        hotelColorAnimator.setDuration(1000);
        hotelColorAnimator.setRepeatCount(ValueAnimator.INFINITE);
        hotelColorAnimator.setRepeatMode(ValueAnimator.REVERSE);
        hotelColorAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

          @Override
          public void onAnimationUpdate(ValueAnimator animator) {
            if (hotels != null) {
              hotels.setProperties(fillColor((int) animator.getAnimatedValue())
              );
            }
          }
        });

        // Add the attractions source to the map
        GeoJsonSource attractionsSource = new GeoJsonSource("attractions", loadJsonFromAsset("la_attractions.geojson"));
        style.addSource(attractionsSource);

        CircleLayer attractionsLayer = new CircleLayer("attractions", "attractions").withProperties(
          circleColor(Color.parseColor("#5a9fcf")),
          visibility(Property.NONE)
        );

        style.addLayer(attractionsLayer);

        final CircleLayer attractions = (CircleLayer) style.getLayer("attractions");

        attractionsColorAnimator = ValueAnimator.ofObject(
          new ArgbEvaluator(),
          Color.parseColor("#ec8a8a"), // Brighter shade
          Color.parseColor("#de3232") // Darker shade
        );
        attractionsColorAnimator.setDuration(1000);
        attractionsColorAnimator.setRepeatCount(ValueAnimator.INFINITE);
        attractionsColorAnimator.setRepeatMode(ValueAnimator.REVERSE);
        attractionsColorAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

          @Override
          public void onAnimationUpdate(ValueAnimator animator) {
            if (attractions != null) {
              attractions.setProperties(
                circleColor((int) animator.getAnimatedValue())
              );
            }
          }
        });

        final FillLayer parks = (FillLayer) style.getLayer("landuse");
        if (parks != null) {
          parks.setProperties(visibility(Property.NONE));
        }

        parkColorAnimator = ValueAnimator.ofObject(
          new ArgbEvaluator(),
          Color.parseColor("#7ac79c"), // Brighter shade
          Color.parseColor("#419a68") // Darker shade
        );
        parkColorAnimator.setDuration(1000);
        parkColorAnimator.setRepeatCount(ValueAnimator.INFINITE);
        parkColorAnimator.setRepeatMode(ValueAnimator.REVERSE);
        parkColorAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

          @Override
          public void onAnimationUpdate(ValueAnimator animator) {
            if (parks != null) {
              parks.setProperties(fillColor((int) animator.getAnimatedValue()));
            }
          }
        });

        FloatingActionButton toggleHotelsFab = findViewById(R.id.fab_toggle_hotels);
        toggleHotelsFab.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
            setLayerVisible("hotels", style);
          }
        });

        FloatingActionButton toggleParksFab = findViewById(R.id.fab_toggle_parks);
        toggleParksFab.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
            setLayerVisible("landuse", style);
          }
        });

        FloatingActionButton toggleAttractionsFab = findViewById(R.id.fab_toggle_attractions);
        toggleAttractionsFab.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
            setLayerVisible("attractions", style);
          }
        });

        // Start all the animation at the same time so that they are in sync when displayed.
        parkColorAnimator.start();
        hotelColorAnimator.start();
        attractionsColorAnimator.start();
      }
    });
  }

  private void setLayerVisible(String layerId,@NonNull Style loadedMapStyle) {
    Layer layer = loadedMapStyle.getLayer(layerId);
    if (layer == null) {
      return;
    }
    if (VISIBLE.equals(layer.getVisibility().getValue())) {
      // Layer is visible
      layer.setProperties(
        visibility(Property.NONE)
      );
    } else {
      // Layer isn't visible
      layer.setProperties(
        visibility(VISIBLE)
      );
    }
  }

  @Override
  public void onResume() {
    super.onResume();
    mapView.onResume();
    if (hotelColorAnimator != null) {
      hotelColorAnimator.start();
    }
    if (parkColorAnimator != null) {
      parkColorAnimator.start();
    }
    if (attractionsColorAnimator != null) {
      attractionsColorAnimator.start();
    }
  }

  @Override
  protected void onStart() {
    super.onStart();
    mapView.onStart();
  }

  @Override
  protected void onStop() {
    super.onStop();
    mapView.onStop();
  }

  @Override
  public void onPause() {
    super.onPause();
    mapView.onPause();
    if (hotelColorAnimator != null) {
      hotelColorAnimator.cancel();
    }
    if (parkColorAnimator != null) {
      parkColorAnimator.cancel();
    }
    if (attractionsColorAnimator != null) {
      attractionsColorAnimator.cancel();
    }
  }

  @Override
  public void onLowMemory() {
    super.onLowMemory();
    mapView.onLowMemory();
  }

  @Override
  protected void onDestroy() {
    super.onDestroy();
    mapView.onDestroy();
  }

  @Override
  protected void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    mapView.onSaveInstanceState(outState);
  }

  private String loadJsonFromAsset(String filename) {
    // Using this method to load in GeoJSON files from the assets folder.
    try {
      InputStream is = getAssets().open(filename);
      int size = is.available();
      byte[] buffer = new byte[size];
      is.read(buffer);
      is.close();
      return new String(buffer, Charset.forName("UTF-8"));

    } catch (IOException ex) {
      ex.printStackTrace();
      return null;
    }
  }
}
```