[android] - example on converting an Android SDK view to a Bitmap to be used as SymbolAnnotation (#8258)

3 files changed, 57 insertions, 17 deletions

diff --git a/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/annotation/AddRemoveMarkerActivity.java b/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/annotation/AddRemoveMarkerActivity.java
index abadc3e5d9..27958c3d0c 100644
--- a/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/annotation/AddRemoveMarkerActivity.java
+++ b/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/annotation/AddRemoveMarkerActivity.java
@@ -1,10 +1,18 @@
 package com.mapbox.mapboxsdk.testapp.activity.annotation;
 
+import android.annotation.SuppressLint;
+import android.graphics.Bitmap;
+import android.graphics.Color;
 import android.os.Bundle;
-import android.support.v4.content.ContextCompat;
+import android.support.annotation.DrawableRes;
 import android.support.v7.app.AppCompatActivity;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.widget.ImageView;
+import android.widget.TextView;
 
 import com.mapbox.mapboxsdk.annotations.Icon;
+import com.mapbox.mapboxsdk.annotations.IconFactory;
 import com.mapbox.mapboxsdk.annotations.Marker;
 import com.mapbox.mapboxsdk.annotations.MarkerOptions;
 import com.mapbox.mapboxsdk.camera.CameraPosition;
@@ -14,7 +22,7 @@ import com.mapbox.mapboxsdk.maps.MapView;
 import com.mapbox.mapboxsdk.maps.MapboxMap;
 import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
 import com.mapbox.mapboxsdk.testapp.R;
-import com.mapbox.mapboxsdk.testapp.utils.IconUtils;
+import com.mapbox.mapboxsdk.testapp.utils.ViewToBitmapUtil;
 
 import timber.log.Timber;
 
@@ -40,20 +48,20 @@ public class AddRemoveMarkerActivity extends AppCompatActivity {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_add_remove_marker);
 
-    // ShapeDrawable to Icon
-    final Icon shapeDrawableIcon = IconUtils.drawableToIcon(this, R.drawable.ic_circle,
-      ContextCompat.getColor(this, R.color.redAccent));
-
-    // VectorDrawable to Icon
-    final Icon vectorDrawableIcon = IconUtils.drawableToIcon(this, R.drawable.ic_layers,
-      ContextCompat.getColor(this, R.color.blueAccent));
+    View lowThresholdView = generateView("Low", R.drawable.ic_circle);
+    Bitmap lowThresholdBitmap = ViewToBitmapUtil.convertToBitmap(lowThresholdView);
+    Icon lowThresholdIcon = IconFactory.getInstance(this).fromBitmap(lowThresholdBitmap);
 
     lowThresholdMarker = new MarkerOptions()
-      .icon(shapeDrawableIcon)
-      .position(new LatLng(-0.1, 0));
+      .icon(lowThresholdIcon)
+      .position(new LatLng(0.1, 0));
+
+    View highThesholdView = generateView("High", R.drawable.ic_circle);
+    Bitmap highThresholdBitmap = ViewToBitmapUtil.convertToBitmap(highThesholdView);
+    Icon highThresholdIcon = IconFactory.getInstance(this).fromBitmap(highThresholdBitmap);
 
     highThresholdMarker = new MarkerOptions()
-      .icon(vectorDrawableIcon)
+      .icon(highThresholdIcon)
       .position(new LatLng(0.1, 0));
 
     mapView = (MapView) findViewById(R.id.mapView);
@@ -74,6 +82,17 @@ public class AddRemoveMarkerActivity extends AppCompatActivity {
     });
   }
 
+  @SuppressLint("InflateParams")
+  private View generateView(String text, @DrawableRes int drawableRes) {
+    View view = LayoutInflater.from(this).inflate(R.layout.view_custom_marker, null);
+    TextView textView = (TextView) view.findViewById(R.id.textView);
+    textView.setText(text);
+    textView.setTextColor(Color.WHITE);
+    ImageView imageView = (ImageView) view.findViewById(R.id.imageView);
+    imageView.setImageResource(drawableRes);
+    return view;
+  }
+
   private void updateZoom(double zoom) {
     if (lastZoom == zoom) {
       return;
diff --git a/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/utils/ViewToBitmapUtil.java b/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/utils/ViewToBitmapUtil.java
new file mode 100644
index 0000000000..e8091248f4
--- /dev/null
+++ b/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/utils/ViewToBitmapUtil.java
@@ -0,0 +1,22 @@
+package com.mapbox.mapboxsdk.testapp.utils;
+
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
+import android.support.annotation.NonNull;
+import android.view.View;
+
+/**
+ * Converts a View to a Bitmap so we can use an Android SDK View as a Symbol.
+ */
+public class ViewToBitmapUtil {
+
+  public static Bitmap convertToBitmap(@NonNull View view) {
+    view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
+      View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
+    view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
+    Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
+    Canvas canvas = new Canvas(bitmap);
+    view.draw(canvas);
+    return bitmap;
+  }
+}
diff --git a/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/view_custom_marker.xml b/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/view_custom_marker.xml
index c2bbdae775..324a4861c3 100644
--- a/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/view_custom_marker.xml
+++ b/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/view_custom_marker.xml
@@ -11,11 +11,10 @@
     <TextView
         android:id="@id/textView"
         android:layout_width="wrap_content"
-        android:textColor="@android:color/white"
         android:layout_height="wrap_content"
-        android:textStyle="bold"
-        android:layout_alignBottom="@id/imageView"
-        android:layout_centerHorizontal="true"
-        android:padding="2dp"/>
+        android:layout_centerInParent="true"
+        android:padding="2dp"
+        android:textColor="@android:color/white"
+        android:textStyle="bold"/>
 
 </RelativeLayout>