Pulsing layer opacity
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.3.0, in the Maps SDK documentation.
Note
This example is a part of the Mapbox Android Demo app. You can find the values for all referenced resources in the res directory. For example, see res/values/activity_strings.xml for R.string.* references used in this example.
activity_lab_pulsing_layer_opacity_color
<?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>
PulsingLayerOpacityColorActivity.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;
}
}
}