[android] - Update CircleLayerActivity with style switching. (#8274)

2 files changed, 170 insertions, 72 deletions

diff --git a/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/style/CircleLayerActivity.java b/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/style/CircleLayerActivity.java
index 7628d6391e..2238d1d5fe 100644
--- a/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/style/CircleLayerActivity.java
+++ b/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/style/CircleLayerActivity.java
@@ -10,6 +10,7 @@ import android.view.View;
 
 import com.mapbox.mapboxsdk.camera.CameraPosition;
 import com.mapbox.mapboxsdk.camera.CameraUpdateFactory;
+import com.mapbox.mapboxsdk.constants.Style;
 import com.mapbox.mapboxsdk.geometry.LatLng;
 import com.mapbox.mapboxsdk.maps.MapView;
 import com.mapbox.mapboxsdk.maps.MapboxMap;
@@ -34,18 +35,19 @@ import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.circleRadius;
  * Uses bus stop data from Singapore as a source and allows to filter into 1 specific route with a line layer.
  * </p>
  */
-public class CircleLayerActivity extends AppCompatActivity {
-
-  private static final String[] STOPS_FOR_ROUTE = new String[] {"99009", "99131", "99049", "99039", "99029", "99019",
-    "98079", "98069", "97099", "97089", "97079", "97069", "97209", "97059", "97049", "97039", "97019", "96069",
-    "96059", "96049", "96099", "96089", "96079", "85079", "85089", "85069", "85059", "85099", "84069", "84059",
-    "84049", "84039", "84029", "84019", "83099", "83079", "83059", "83049", "83029", "82069", "82049", "82029",
-    "82109", "81069", "81049", "81029", "80089", "80069", "80049", "80039", "80029", "01319", "01219", "01129",
-    "01059", "01119", "01019", "04159", "04149", "04229", "04239", "05059", "05049", "05039", "05019", "10589"};
+public class CircleLayerActivity extends AppCompatActivity implements View.OnClickListener {
 
   private MapView mapView;
   private MapboxMap mapboxMap;
+
+  private FloatingActionButton styleFab;
+  private FloatingActionButton routeFab;
+
   private CircleLayer layer;
+  private GeoJsonSource source;
+
+  private int currentStyleIndex = 0;
+  private boolean isLoadingStyle = true;
 
   @Override
   public void onCreate(Bundle savedInstanceState) {
@@ -56,58 +58,131 @@ public class CircleLayerActivity extends AppCompatActivity {
     mapView.onCreate(savedInstanceState);
     mapView.getMapAsync(new OnMapReadyCallback() {
       @Override
-      public void onMapReady(@NonNull final MapboxMap map) {
+      public void onMapReady(@NonNull
+                             final MapboxMap map) {
         mapboxMap = map;
-        try {
-          mapboxMap.addSource(new GeoJsonSource("bus_stop",
-            new URL("https://raw.githubusercontent.com/cheeaun/busrouter-sg/master/data/2/bus-stops.geojson")));
-        } catch (MalformedURLException malformedUrlException) {
-          Timber.e("That's not an url... ", malformedUrlException);
-        }
-
-        layer = new CircleLayer("stops_layer", "bus_stop");
-        layer.setProperties(
-          circleColor(Color.parseColor("#FF9800")),
-          circleRadius(1.0f)
-        );
-
-        mapboxMap.addLayer(layer);
-
-        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
-        fab.setColorFilter(ContextCompat.getColor(CircleLayerActivity.this, R.color.primary));
-        fab.setOnClickListener(new View.OnClickListener() {
-          @Override
-          public void onClick(View view) {
-
-            // filter out stops for our route
-            layer.setFilter(in("number", (Object[]) STOPS_FOR_ROUTE));
-
-            // add route as a line
-            try {
-              mapboxMap.addSource(new GeoJsonSource("bus_route",
-                new URL("https://gist.githubusercontent.com/tobrun/7fbc0fe7e9ffea509f7608cda2601d5d/raw/"
-                  + "a4b8cc289020f91fa2e1553524820054395e36f5/line.geojson")));
-            } catch (MalformedURLException malformedUrlException) {
-              Timber.e("That's not an url... ", malformedUrlException);
-            }
-            LineLayer lineLayer = new LineLayer("route_layer", "bus_route");
-            mapboxMap.addLayerBelow(lineLayer, "stops_layer");
-
-            // move camera to start route
-            mapboxMap.animateCamera(CameraUpdateFactory.newCameraPosition(
-              new CameraPosition.Builder()
-                .target(new LatLng(1.3896777, 103.9874997))
-                .bearing(225)
-                .tilt(45)
-                .zoom(13)
-                .build()
-            ), 1750);
-          }
-        });
+        addBusStopSource();
+        addBusStopCircleLayer();
+        initFloatingActionButtons();
+        isLoadingStyle = false;
       }
     });
   }
 
+  private void addBusStopSource() {
+    try {
+      source = new GeoJsonSource("bus_stop",
+        new URL("https://raw.githubusercontent.com/cheeaun/busrouter-sg/master/data/2/bus-stops.geojson"));
+    } catch (MalformedURLException exception) {
+      Timber.e("That's not an url... ", exception);
+    }
+    mapboxMap.addSource(source);
+  }
+
+  private void addBusStopCircleLayer() {
+    layer = new CircleLayer("stops_layer", "bus_stop");
+    layer.setProperties(
+      circleColor(Color.parseColor("#FF9800")),
+      circleRadius(2.0f)
+    );
+    mapboxMap.addLayer(layer);
+  }
+
+  private void initFloatingActionButtons() {
+    routeFab = (FloatingActionButton) findViewById(R.id.fab_route);
+    routeFab.setColorFilter(ContextCompat.getColor(CircleLayerActivity.this, R.color.primary));
+    routeFab.setOnClickListener(CircleLayerActivity.this);
+
+    styleFab = (FloatingActionButton) findViewById(R.id.fab_style);
+    styleFab.setOnClickListener(CircleLayerActivity.this);
+  }
+
+  @Override
+  public void onClick(View view) {
+    if (isLoadingStyle) {
+      return;
+    }
+
+    if (view.getId() == R.id.fab_route) {
+      showBusRoute();
+    } else if (view.getId() == R.id.fab_style) {
+      changeMapStyle();
+    }
+  }
+
+  private void showBusRoute() {
+    removeFabs();
+    applyBusRouteFilterToBusStopSource();
+    addBusRouteSource();
+    addBusRouteLayer();
+  }
+
+  private void removeFabs() {
+    routeFab.setVisibility(View.GONE);
+    styleFab.setVisibility(View.GONE);
+  }
+
+  private void applyBusRouteFilterToBusStopSource() {
+    layer.setFilter(in("number", (Object[]) Data.STOPS_FOR_ROUTE));
+  }
+
+  private void addBusRouteSource() {
+    try {
+      mapboxMap.addSource(new GeoJsonSource("bus_route",
+        new URL("https://gist.githubusercontent.com/tobrun/7fbc0fe7e9ffea509f7608cda2601d5d/raw/"
+          + "a4b8cc289020f91fa2e1553524820054395e36f5/line.geojson")));
+    } catch (MalformedURLException malformedUrlException) {
+      Timber.e("That's not an url... ", malformedUrlException);
+    }
+  }
+
+  private void addBusRouteLayer() {
+    LineLayer lineLayer = new LineLayer("route_layer", "bus_route");
+    mapboxMap.addLayerBelow(lineLayer, "stops_layer");
+    mapboxMap.animateCamera(CameraUpdateFactory.newCameraPosition(
+      new CameraPosition.Builder()
+        .target(new LatLng(1.3896777, 103.9874997))
+        .bearing(225)
+        .tilt(45)
+        .zoom(13)
+        .build()
+    ), 1750);
+  }
+
+  private void changeMapStyle() {
+    isLoadingStyle = true;
+    removeBusStop();
+    loadNewStyle();
+  }
+
+  private void removeBusStop() {
+    mapboxMap.removeLayer(layer);
+    mapboxMap.removeSource(source);
+  }
+
+  private void loadNewStyle() {
+    mapboxMap.setStyleUrl(getNextStyle(), new MapboxMap.OnStyleLoadedListener() {
+      @Override
+      public void onStyleLoaded(String style) {
+        addBusStop();
+        isLoadingStyle = false;
+      }
+    });
+  }
+
+  private void addBusStop() {
+    mapboxMap.addLayer(layer);
+    mapboxMap.addSource(source);
+  }
+
+  private String getNextStyle() {
+    currentStyleIndex++;
+    if (currentStyleIndex == Data.STYLES.length) {
+      currentStyleIndex = 0;
+    }
+    return Data.STYLES[currentStyleIndex];
+  }
+
   @Override
   protected void onStart() {
     super.onStart();
@@ -149,4 +224,22 @@ public class CircleLayerActivity extends AppCompatActivity {
     super.onDestroy();
     mapView.onDestroy();
   }
+
+  private static class Data {
+    private static final String[] STOPS_FOR_ROUTE = new String[] {"99009", "99131", "99049", "99039", "99029", "99019",
+      "98079", "98069", "97099", "97089", "97079", "97069", "97209", "97059", "97049", "97039", "97019", "96069",
+      "96059", "96049", "96099", "96089", "96079", "85079", "85089", "85069", "85059", "85099", "84069", "84059",
+      "84049", "84039", "84029", "84019", "83099", "83079", "83059", "83049", "83029", "82069", "82049", "82029",
+      "82109", "81069", "81049", "81029", "80089", "80069", "80049", "80039", "80029", "01319", "01219", "01129",
+      "01059", "01119", "01019", "04159", "04149", "04229", "04239", "05059", "05049", "05039", "05019", "10589"};
+
+    private static final String[] STYLES = new String[] {
+      Style.MAPBOX_STREETS,
+      Style.OUTDOORS,
+      Style.LIGHT,
+      Style.DARK,
+      Style.SATELLITE,
+      Style.SATELLITE_STREETS
+    };
+  }
 }
diff --git a/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/activity_circle_layer.xml b/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/activity_circle_layer.xml
index 8a21bef8a8..6e8a4e5eb2 100644
--- a/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/activity_circle_layer.xml
+++ b/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/activity_circle_layer.xml
@@ -1,36 +1,41 @@
 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:orientation="vertical">
-
-    <android.support.v7.widget.Toolbar
-        android:id="@+id/toolbar"
-        android:layout_width="match_parent"
-        android:layout_height="?attr/actionBarSize"
-        android:background="@color/primary"
-        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
+                xmlns:app="http://schemas.android.com/apk/res-auto"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:orientation="vertical">
 
     <com.mapbox.mapboxsdk.maps.MapView
         android:id="@id/mapView"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:layout_below="@id/toolbar"
         app:mapbox_cameraTargetLat="1.350057"
         app:mapbox_cameraTargetLng="103.849218"
-        app:mapbox_styleUrl="@string/mapbox_style_dark"
-        app:mapbox_cameraZoom="10"/>
+        app:mapbox_cameraZoom="10"
+        app:mapbox_styleUrl="@string/mapbox_style_mapbox_streets"/>
 
     <android.support.design.widget.FloatingActionButton
-        android:id="@id/fab"
+        android:id="@+id/fab_route"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:layout_alignParentEnd="true"
         android:layout_alignParentRight="true"
-        android:layout_margin="@dimen/fab_margin"
+        android:layout_marginBottom="@dimen/fab_margin"
+        android:layout_marginRight="@dimen/fab_margin"
         android:src="@drawable/ic_directions_bus_black"
-        app:backgroundTint="@android:color/white" />
+        app:backgroundTint="@android:color/white"/>
+
+    <android.support.design.widget.FloatingActionButton
+        android:id="@+id/fab_style"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_above="@id/fab_route"
+        android:layout_alignParentEnd="true"
+        android:layout_alignParentRight="true"
+        android:layout_marginBottom="@dimen/fab_margin"
+        android:layout_marginRight="@dimen/fab_margin"
+        android:src="@drawable/ic_layers"
+        app:backgroundTint="@color/primary"/>
 
 </RelativeLayout>