Skip to content
This repository was archived by the owner on Oct 7, 2024. It is now read-only.

Commit 04f7048

Browse files
author
Langston Smith
authored
Transparent background + video example (#820)
* initial setup * onDestroy adjustment
1 parent 3c14c00 commit 04f7048

9 files changed

Lines changed: 233 additions & 0 deletions

File tree

‎MapboxAndroidDemo/src/main/AndroidManifest.xml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -426,6 +426,14 @@
426426
android:name="android.support.PARENT_ACTIVITY"
427427
android:value="com.mapbox.mapboxandroiddemo.MainActivity" />
428428
</activity>
429+
<activity
430+
android:name=".examples.styles.TransparentBackgroundActivity"
431+
android:label="@string/activity_styles_transparent_background_title"
432+
android:screenOrientation="portrait">
433+
<meta-data
434+
android:name="android.support.PARENT_ACTIVITY"
435+
android:value="com.mapbox.mapboxandroiddemo.MainActivity" />
436+
</activity>
429437
<activity
430438
android:name=".examples.labs.PulsingLayerOpacityColorActivity"
431439
android:label="@string/activity_lab_pulsing_layer_opacity_color_title">

‎MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/MainActivity.java‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@
110110
import com.mapbox.mapboxandroiddemo.examples.styles.MapboxStudioStyleActivity;
111111
import com.mapbox.mapboxandroiddemo.examples.styles.ShowHideLayersActivity;
112112
import com.mapbox.mapboxandroiddemo.examples.styles.StyleFadeSwitchActivity;
113+
import com.mapbox.mapboxandroiddemo.examples.styles.TransparentBackgroundActivity;
113114
import com.mapbox.mapboxandroiddemo.examples.styles.VectorSourceActivity;
114115
import com.mapbox.mapboxandroiddemo.examples.styles.ZoomDependentFillColorActivity;
115116
import com.mapbox.mapboxandroiddemo.labs.CalendarIntegrationActivity;
@@ -374,6 +375,13 @@ private void listItems(int id) {
374375
R.string.activity_styles_fade_switch_description,
375376
new Intent(MainActivity.this, StyleFadeSwitchActivity.class),
376377
R.string.activity_styles_fade_switch_url, false, BuildConfig.MIN_SDK_VERSION));
378+
379+
exampleItemModels.add(new ExampleItemModel(
380+
R.string.activity_styles_transparent_background_title,
381+
R.string.activity_styles_transparent_background_description,
382+
new Intent(MainActivity.this, TransparentBackgroundActivity.class),
383+
R.string.activity_styles_transparent_background_url, false, BuildConfig.MIN_SDK_VERSION));
384+
377385
currentCategory = R.id.nav_styles;
378386
break;
379387
case R.id.nav_extrusions:

‎MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/examples/styles/TransparentBackgroundActivity.java‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
package com.mapbox.mapboxandroiddemo.examples.styles;
2+
3+
// #-code-snippet: transparent-surface-activity full-java
4+
5+
import android.content.Context;
6+
import android.net.Uri;
7+
import android.os.Bundle;
8+
import android.support.annotation.RawRes;
9+
import android.support.v7.app.AppCompatActivity;
10+
import android.widget.VideoView;
11+
12+
import com.mapbox.mapboxandroiddemo.R;
13+
import com.mapbox.mapboxsdk.Mapbox;
14+
import com.mapbox.mapboxsdk.maps.MapView;
15+
import com.mapbox.mapboxsdk.maps.MapboxMap;
16+
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
17+
18+
import java.io.BufferedReader;
19+
import java.io.IOException;
20+
import java.io.InputStream;
21+
import java.io.InputStreamReader;
22+
import java.io.Reader;
23+
import java.io.StringWriter;
24+
import java.io.Writer;
25+
26+
import timber.log.Timber;
27+
28+
/**
29+
* Create a transparent render surface and add whatever you want to the background. This example
30+
* has a video of moving water behind Earth's land.
31+
*/
32+
public class TransparentBackgroundActivity extends AppCompatActivity implements OnMapReadyCallback {
33+
34+
private MapView mapView;
35+
private VideoView backgroundWaterVideoView;
36+
37+
@Override
38+
protected void onCreate(Bundle savedInstanceState) {
39+
super.onCreate(savedInstanceState);
40+
41+
// Mapbox access token is configured here. This needs to be called either in your application
42+
// object or in the same activity which contains the mapview.
43+
Mapbox.getInstance(this, getString(R.string.access_token));
44+
45+
// This contains the MapView in XML and needs to be called after the access token is configured.
46+
setContentView(R.layout.activity_style_transparent_render_background);
47+
48+
mapView = findViewById(R.id.mapView);
49+
mapView.onCreate(savedInstanceState);
50+
mapView.getMapAsync(this);
51+
}
52+
53+
@Override
54+
public void onMapReady(MapboxMap mapboxMap) {
55+
try {
56+
// Switch the map to a style that has no background
57+
mapboxMap.setStyleJson(readRawResource(this, R.raw.no_bg_style));
58+
initVideoView();
59+
} catch (IOException exception) {
60+
Timber.e(exception);
61+
}
62+
}
63+
64+
/**
65+
* Place the video of moving water behind the map
66+
*/
67+
private void initVideoView() {
68+
backgroundWaterVideoView = findViewById(R.id.videoView);
69+
String path = "android.resource://" + getPackageName() + "/" + R.raw.moving_background_water;
70+
backgroundWaterVideoView.setVideoURI(Uri.parse(path));
71+
backgroundWaterVideoView.start();
72+
backgroundWaterVideoView.setOnCompletionListener(mediaPlayer ->
73+
backgroundWaterVideoView.start()
74+
);
75+
}
76+
77+
// Add the mapView lifecycle to the activity's lifecycle methods
78+
@Override
79+
public void onResume() {
80+
super.onResume();
81+
mapView.onResume();
82+
}
83+
84+
@Override
85+
protected void onStart() {
86+
super.onStart();
87+
mapView.onStart();
88+
}
89+
90+
@Override
91+
protected void onStop() {
92+
super.onStop();
93+
mapView.onStop();
94+
}
95+
96+
@Override
97+
public void onPause() {
98+
super.onPause();
99+
mapView.onPause();
100+
}
101+
102+
@Override
103+
public void onLowMemory() {
104+
super.onLowMemory();
105+
mapView.onLowMemory();
106+
}
107+
108+
@Override
109+
protected void onDestroy() {
110+
if (backgroundWaterVideoView != null) {
111+
backgroundWaterVideoView.stopPlayback();
112+
}
113+
super.onDestroy();
114+
mapView.onDestroy();
115+
}
116+
117+
@Override
118+
protected void onSaveInstanceState(Bundle outState) {
119+
super.onSaveInstanceState(outState);
120+
mapView.onSaveInstanceState(outState);
121+
}
122+
123+
/**
124+
* Get the map style JSON from the raw file in the app's raw folder
125+
*/
126+
public static String readRawResource(Context context, @RawRes int rawResource) throws IOException {
127+
String json = "";
128+
if (context != null) {
129+
Writer writer = new StringWriter();
130+
char[] buffer = new char[1024];
131+
try (InputStream is = context.getResources().openRawResource(rawResource)) {
132+
Reader reader = new BufferedReader(new InputStreamReader(is, "UTF-8"));
133+
int numRead;
134+
while ((numRead = reader.read(buffer)) != -1) {
135+
writer.write(buffer, 0, numRead);
136+
}
137+
}
138+
json = writer.toString();
139+
}
140+
return json;
141+
}
142+
}
143+
// #-end-code-snippet: transparent-surface-activity full-java

‎MapboxAndroidDemo/src/main/res/layout/activity_style_transparent_render_background.xml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:app="http://schemas.android.com/apk/res-auto"
4+
android:id="@+id/coordinator_layout"
5+
android:layout_width="match_parent"
6+
android:layout_height="match_parent">
7+
8+
<VideoView
9+
android:id="@+id/videoView"
10+
android:layout_width="match_parent"
11+
android:scaleX="1.8"
12+
android:scaleY="1.8"
13+
android:layout_height="match_parent"
14+
android:layout_gravity="center" />
15+
16+
<com.mapbox.mapboxsdk.maps.MapView
17+
android:id="@+id/mapView"
18+
android:layout_width="match_parent"
19+
android:layout_height="match_parent"
20+
app:mapbox_cameraTargetLat="48.507879"
21+
app:mapbox_cameraTargetLng="8.363795"
22+
app:mapbox_cameraZoom="2"
23+
app:mapbox_cameraZoomMin="1.3"
24+
app:mapbox_renderTextureMode="true"
25+
app:mapbox_renderTextureTranslucentSurface="true" />
26+
27+
</android.support.design.widget.CoordinatorLayout>
28+

‎MapboxAndroidDemo/src/main/res/raw/moving_background_water.mp4‎

1.51 MB
Binary file not shown.

‎MapboxAndroidDemo/src/main/res/raw/no_bg_style.json‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"version": 8,
3+
"name": "Land",
4+
"metadata": {
5+
"mapbox:autocomposite": true
6+
},
7+
"sources": {
8+
"composite": {
9+
"url": "mapbox://mapbox.mapbox-terrain-v2",
10+
"type": "vector"
11+
}
12+
},
13+
"sprite": "mapbox://sprites/mapbox/mapbox-terrain-v2",
14+
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
15+
"layers": [
16+
{
17+
"layout": {
18+
"visibility": "visible"
19+
},
20+
"type": "fill",
21+
"source": "composite",
22+
"id": "admin",
23+
"paint": {
24+
"fill-color": "hsl(359, 100%, 50%)",
25+
"fill-opacity": 1
26+
},
27+
"source-layer": "landcover"
28+
},
29+
{
30+
"layout": {
31+
"visibility": "visible"
32+
},
33+
"type": "fill",
34+
"source": "composite",
35+
"id": "layer-0",
36+
"paint": {
37+
"fill-opacity": 1,
38+
"fill-color": "hsl(359, 100%, 50%)"
39+
},
40+
"source-layer": "Layer_0"
41+
}
42+
]
43+
}

‎MapboxAndroidDemo/src/main/res/values/descriptions_strings.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<string name="activity_style_image_source_description">Use an image source to easily display images on the map.</string>
2929
<string name="activity_style_hillshade_description">Use elevation data to show and customize hills and mountains.</string>
3030
<string name="activity_styles_fade_switch_description">Fade map styles in and out based on zoom level.</string>
31+
<string name="activity_styles_transparent_background_description">Create a transparent background and fill it with something such as moving water.</string>
3132
<string name="activity_extrusions_catalina_marathon_extrusions_description">Use data-driven styling and GeoJSON data to set extrusions\' heights.</string>
3233
<string name="activity_extrusions_population_density_extrusions_description">Use extrusions to display 3D building height based on imported vector data.</string>
3334
<string name="activity_extrusions_adjust_extrusions_description">Change the location and color of the light shined on extrusions.</string>

‎MapboxAndroidDemo/src/main/res/values/titles_strings.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
<string name="activity_style_image_source_title">Use an image source</string>
2727
<string name="activity_styles_hillshade_title">Hillshading</string>
2828
<string name="activity_styles_fade_switch_title">Switch map styles with fade</string>
29+
<string name="activity_styles_transparent_background_title">Transparent render surface</string>
2930
<string name="activity_extrusions_catalina_marathon_extrusions_title">Use GeoJSON data to set extrusion height</string>
3031
<string name="activity_extrusions_population_density_extrusions_title">Display 3D building height based on vector data</string>
3132
<string name="activity_extrusions_adjust_extrusions_title">Adjust light location and color</string>

‎MapboxAndroidDemo/src/main/res/values/urls_strings.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<string name="activity_style_image_source_url" translatable="false">https://i.imgur.com/I6B6cCE.png</string>
2929
<string name="activity_style_hillshade_url" translatable="false">https://i.imgur.com/U2OKixV.png</string>
3030
<string name="activity_styles_fade_switch_url" translatable="false">https://i.imgur.com/1sPnDx5.png</string>
31+
<string name="activity_styles_transparent_background_url" translatable="false">https://i.imgur.com/5bYnlp5.png</string>
3132
<string name="activity_extrusions_population_density_extrusions_url" translatable="false">http://i.imgur.com/se1z8Wb.png</string>
3233
<string name="activity_extrusions_catalina_marathon_extrusions_url" translatable="false">http://i.imgur.com/6j848JL.jpg</string>
3334
<string name="activity_extrusions_adjust_extrusions_url" translatable="false">http://i.imgur.com/XNTyIO5.png</string>

0 commit comments

Comments
 (0)