Read symbols mobile style file

View on GitHubSample viewer app

Combine multiple symbols from a mobile style file into a single symbol.

Image of read symbols from mobile style file

Use case

You may choose to display individual elements of a dataset like a water infrastructure network (such as valves, nodes, or endpoints) with the same basic shape, but wish to modify characteristics of elements according to some technical specifications. Multilayer symbols lets you add or remove components or modify the colors to create advanced symbol styles.

How to use the sample

Select a symbol and a color from each of the category lists to create an emoji. A preview of the symbol is updated as selections are made. The size of the symbol can be set using the slider. Tap the map to create a point graphic using the customized emoji symbol, and tap "Clear" to clear all graphics from the display.

How it works

  1. Create a new SymbolStyle from a stylx file, and load it.
  2. Get a set of default search parameters using symbolStyle.getDefaultSearchParametersAsync(), and use these to retrieve a list of all symbols within the style file: symbolStyle.searchSymbolsAsync(defaultSearchParameters).
  3. Get the SymbolStyleSearchResult, which contains the symbols, as well as their names, keys, and categories.
  4. Use a List of keys of the desired symbols to build a composite symbol using symbolStyle.getSymbolAsync(symbolKeys).
  5. Create a Graphic using the MultilayerPointSymbol.

Relevant API

  • MultilayerPointSymbol
  • MultilayerSymbol
  • SymbolLayer
  • SymbolStyle
  • SymbolStyleSearchParameters

Offline Data

  1. Download the data from ArcGIS Online.
  2. Extract the contents of the downloaded zip file to disk.
  3. Open your command prompt and navigate to the folder where you extracted the contents of the data from step 1.
  4. Execute the following command: adb push emoji-mobile.stylx /sdcard/ArcGIS/Samples/Style/emoji-mobile.stylx
Link Local Location
Emoji mobile style <sdcard>/ArcGIS/Samples/Style/emoji-mobile.stylx

Offline Data

  1. Download the data from ArcGIS Online.
  2. Open your command prompt and navigate to the folder where you extracted the contents of the data from step 1.
  3. Push the data into the scoped storage of the sample app:

adb push emoji-mobile.stylx /Android/data/com.esri.arcgisruntime.sample.readsymbolsmobilestylefile/files/emoji-mobile.stylx

About the data

The mobile style file used in this sample was created using ArcGIS Pro, and is hosted on ArcGIS Online. It contains symbol layers that can be combined to create emojis.

Additional information

While each of these symbols can be created from scratch, a more convenient workflow is to author them using ArcGIS Pro and store them in a mobile style file (.stylx). ArcGIS Runtime can read symbols from a mobile style, and you can modify and combine them as needed in your app.

Tags

advanced symbology, mobile style, multilayer, stylx

Sample Code

MainActivity.javaMainActivity.javaSymbolAdapter.java
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
/*
 * Copyright 2019 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.esri.arcgisruntime.sample.readsymbolsmobilestylefile;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Locale;
import java.util.Map;
import java.util.concurrent.ExecutionException;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.Spinner;
import android.widget.Toast;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.esri.arcgisruntime.ArcGISRuntimeEnvironment;
import com.esri.arcgisruntime.concurrent.ListenableFuture;
import com.esri.arcgisruntime.geometry.Geometry;
import com.esri.arcgisruntime.geometry.Point;
import com.esri.arcgisruntime.loadable.LoadStatus;
import com.esri.arcgisruntime.mapping.ArcGISMap;
import com.esri.arcgisruntime.mapping.BasemapStyle;
import com.esri.arcgisruntime.mapping.view.DefaultMapViewOnTouchListener;
import com.esri.arcgisruntime.mapping.view.Graphic;
import com.esri.arcgisruntime.mapping.view.GraphicsOverlay;
import com.esri.arcgisruntime.mapping.view.MapView;
import com.esri.arcgisruntime.symbology.MultilayerPointSymbol;
import com.esri.arcgisruntime.symbology.Symbol;
import com.esri.arcgisruntime.symbology.SymbolLayer;
import com.esri.arcgisruntime.symbology.SymbolStyle;
import com.esri.arcgisruntime.symbology.SymbolStyleSearchParameters;
import com.esri.arcgisruntime.symbology.SymbolStyleSearchResult;

public class MainActivity extends AppCompatActivity implements OnSymbolPreviewTapListener {

  private static final String TAG = MainActivity.class.getSimpleName();

  private RecyclerView mEyesRecyclerView;
  private RecyclerView mMouthRecyclerView;
  private RecyclerView mHatRecyclerView;
  private ImageView mPreviewView;
  private Spinner mColorSpinner;
  private SymbolAdapter mEyesAdapter;
  private SymbolAdapter mMouthAdapter;
  private SymbolAdapter mHatAdapter;

  private final Map<String, SymbolStyleSearchResult> mSelectedSymbols = new HashMap<>();
  private String mFaceSymbolKey;
  private ArrayList<String> mKeys = new ArrayList<>();
  private int mColor = -1;
  private int mSize = 25;

  private MapView mMapView;
  private GraphicsOverlay mGraphicsOverlay;
  private SymbolStyle mEmojiStyle;
  private MultilayerPointSymbol mCurrentMultilayerSymbol;
  private SeekBar mSizeSeekBar;

  @Override protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // authentication with an API key or named user is required to access basemaps and other
    // location services
    ArcGISRuntimeEnvironment.setApiKey(BuildConfig.API_KEY);

    mMapView = findViewById(R.id.mapView);
    mEyesRecyclerView = findViewById(R.id.eyesRecyclerView);
    mMouthRecyclerView = findViewById(R.id.mouthRecyclerView);
    mHatRecyclerView = findViewById(R.id.hatRecyclerView);
    mPreviewView = findViewById(R.id.previewView);

    // create a map
    ArcGISMap map = new ArcGISMap(BasemapStyle.ARCGIS_TOPOGRAPHIC);
    // add the map to the map view
    mMapView.setMap(map);

    // create a graphics overlay to add graphics to and add it to the map view
    mGraphicsOverlay = new GraphicsOverlay();
    mMapView.getGraphicsOverlays().add(mGraphicsOverlay);

    // add a seek bar to change the size of the current multilayer symbol
    mSizeSeekBar = findViewById(R.id.sizeSeekBar);
    // disable seek bar until read permission is granted
    mSizeSeekBar.setEnabled(false);
    // set initial progress to 25
    mSizeSeekBar.setProgress(mSize);
    mSizeSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
      @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        setSymbolSize(progress);
      }

      @Override public void onStartTrackingTouch(SeekBar seekBar) {

      }

      @Override public void onStopTrackingTouch(SeekBar seekBar) {

      }
    });

    // add a spinner to change the color of the first layer of the multilayer symbol
    mColorSpinner = findViewById(R.id.colorSpinner);
    // disable spinner until read permission is granted
    mColorSpinner.setEnabled(false);
    mColorSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
      @Override public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
        if (position > 0) { // only set color when not on index 0 ("Select color...")
          setLayerColor(position);
        }
      }

      @Override public void onNothingSelected(AdapterView<?> parent) {

      }
    });

    // add a button to clear existing graphics from the graphics overlay
    Button clearButton = findViewById(R.id.clearButton);
    clearButton.setOnClickListener(v -> clearGraphics(mGraphicsOverlay));

    setupRecyclerViews();

    loadSymbolsFromStyleFile();
  }

  /**
   * Create a touch listener to call addGraphic on single tap.
   */
  private void createMapViewOnTouchListener() {
    // add listener to handle motion events when the user taps on the map view
    mMapView.setOnTouchListener(new DefaultMapViewOnTouchListener(this, mMapView) {
      @Override
      public boolean onSingleTapConfirmed(MotionEvent motionEvent) {
        if (mCurrentMultilayerSymbol != null) {
          addGraphic(mGraphicsOverlay, mapPointFrom(mMapView, motionEvent), mCurrentMultilayerSymbol);
        } else {
          logErrorToUser(MainActivity.this, getString(R.string.error_symbol_must_be_defined));
        }
        return true;
      }
    });
  }

  /**
   * Loads the stylx file and searches for all symbols contained within. Put the resulting symbols into recycler views
   * based on their category (eyes, mouth, hat, face).
   */
  private void loadSymbolsFromStyleFile() {
    // read permission accepted, enable UI elements
    mColorSpinner.setEnabled(true);
    mSizeSeekBar.setEnabled(true);
    createMapViewOnTouchListener();

    // create a SymbolStyle by passing the location of the .stylx file in the constructor
    mEmojiStyle = new SymbolStyle(getExternalFilesDir(null) + getString(R.string.mobile_style_file_path));
    // add a listener to run when the SymbolStyle has loaded
    mEmojiStyle.addDoneLoadingListener(() -> {
      if (mEmojiStyle.getLoadStatus() == LoadStatus.FAILED_TO_LOAD) {
        logErrorToUser(this, getString(R.string.error_mobile_style_file_failed_load, mEmojiStyle.getLoadError()));
        return;
      }
      // get future to load default search parameters
      ListenableFuture<SymbolStyleSearchParameters> defaultSearchParametersFuture = mEmojiStyle
          .getDefaultSearchParametersAsync();
      defaultSearchParametersFuture.addDoneListener(() -> {
        try {
          SymbolStyleSearchParameters defaultSearchParameters = defaultSearchParametersFuture.get();
          // get future search symbols using the default search parameters
          ListenableFuture<List<SymbolStyleSearchResult>> symbolStyleSearchResultFuture = mEmojiStyle
              .searchSymbolsAsync(defaultSearchParameters);
          symbolStyleSearchResultFuture.addDoneListener(() -> {
            try {
              List<SymbolStyleSearchResult> symbolStyleSearchResults = symbolStyleSearchResultFuture.get();
              for (SymbolStyleSearchResult symbolStyleSearchResult : symbolStyleSearchResults) {
                // these categories are specific to this SymbolStyle
                switch (symbolStyleSearchResult.getCategory().toLowerCase(Locale.ROOT)) {
                  case "eyes":
                    mEyesAdapter.addSymbol(symbolStyleSearchResult);
                    break;
                  case "mouth":
                    mMouthAdapter.addSymbol(symbolStyleSearchResult);
                    break;
                  case "hat":
                    mHatAdapter.addSymbol(symbolStyleSearchResult);
                    break;
                  case "face":
                    mFaceSymbolKey = symbolStyleSearchResult.getKey();
                    break;
                }
                animateRecyclerViews();
              }
            } catch (InterruptedException | ExecutionException e) {
              logErrorToUser(this, getString(R.string.error_searching_for_symbols_failed, e.getMessage()));
            }
          });
        } catch (InterruptedException | ExecutionException e) {
          logErrorToUser(this, getString(R.string.error_default_search_parameters_load_failed, e.getMessage()));
        }
      });
    });
    // load the SymbolStyle
    mEmojiStyle.loadAsync();
  }

  /**
   * Create a new multilayer point symbol based on selected symbol keys, size, and color.
   */
  private void createSwatchAsync() {
    // get the Future to perform the generation of the multi layer symbol
    ListenableFuture<Symbol> symbolFuture = mEmojiStyle.getSymbolAsync(mKeys);
    symbolFuture.addDoneListener(() -> {
      try {
        // wait for the Future to complete and get the result
        MultilayerPointSymbol faceSymbol = (MultilayerPointSymbol) symbolFuture.get();
        if (faceSymbol == null) {
          return;
        }
        // set size to current size as defined by seek bar
        faceSymbol.setSize(mSize);
        // lock the color on all symbol layers
        for (SymbolLayer symbolLayer : faceSymbol.getSymbolLayers()) {
          symbolLayer.setColorLocked(true);
        }
        // if the user has chosen a color other than "Select color..." (index 0) or "Default" (index 1)
        if (mColorSpinner.getSelectedItemPosition() > 1) {
          // unlock the first layer and set it to the selected color
          faceSymbol.getSymbolLayers().get(0).setColorLocked(false);
          faceSymbol.setColor(mColor);
        }
        // get the future to create the swatch of the multi layer symbol
        ListenableFuture<Bitmap> bitmapFuture = faceSymbol.createSwatchAsync(this, Color.TRANSPARENT);
        bitmapFuture.addDoneListener(() -> {
          try {
            Bitmap bitmap = bitmapFuture.get();
            mPreviewView.setImageBitmap(bitmap);
            // set this field to enable us to add this symbol to the graphics overlay
            mCurrentMultilayerSymbol = faceSymbol;
          } catch (InterruptedException | ExecutionException e) {
            logErrorToUser(this, getString(R.string.error_loading_multilayer_bitmap_failed, e.getMessage()));
          }
        });
      } catch (InterruptedException | ExecutionException e) {
        logErrorToUser(this, getString(R.string.error_loading_multilayer_symbol_failed, e.getMessage()));
      }
    });
  }

  /**
   * Performed when a user taps on a symbol shown by a {@link SymbolAdapter}. Adds the tapped symbol to a hash map and
   * uses the hash map to set a list of currently selected symbol keys for each category (eyes, mouth, hat, face).
   *
   * @param symbol the user tapped on
   */
  @Override public void onSymbolPreviewTap(SymbolStyleSearchResult symbol) {
    // add the symbol that was tapped on to the map of selected symbols, replacing an old value if the category has
    // already been selected
    mSelectedSymbols.put(symbol.getCategory(), symbol);
    // create a list of Strings to provide to the method that retrieves a multi layer symbol
    mKeys = new ArrayList<>();
    // add the face symbol first as it should appear on the bottom of the multi layer symbol
    mKeys.add(mFaceSymbolKey);
    // loop through the selected symbols map's values to obtain the symbol keys
    for (SymbolStyleSearchResult symbolStyleSearchResult : mSelectedSymbols.values()) {
      // add the symbol key to the map
      mKeys.add(symbolStyleSearchResult.getKey());
    }
    createSwatchAsync();
  }

  /**
   * Set the color field used on the face symbol in createSwatchAsync().
   *
   * @param position in an array of colors
   */
  private void setLayerColor(int position) {
    switch (position) {
      case 1: // default
        mColor = -1;
        break;
      case 2: // red
        mColor = Color.RED;
        break;
      case 3: // green
        mColor = Color.GREEN;
        break;
      case 4: // blue
        mColor = Color.BLUE;
        break;
      default:
        logErrorToUser(this, getString(R.string.error_color_not_defined));
        break;
    }
    createSwatchAsync();
  }

  /**
   * Set the size field used on the face symbol in createSwatchAsync().
   *
   * @param progress from the size seek bar
   */
  private void setSymbolSize(int progress) {
    // set size to progress with a minimum of 1
    mSize = Math.max(1, progress);
    createSwatchAsync();
  }

  /**
   * Converts motion event to an ArcGIS map point.
   *
   * @param mapView     to convert the screen point
   * @param motionEvent containing coordinates of an Android screen point
   * @return a corresponding map point in the place
   */
  private static Point mapPointFrom(MapView mapView, MotionEvent motionEvent) {
    // get the screen point
    android.graphics.Point screenPoint = new android.graphics.Point(Math.round(motionEvent.getX()),
        Math.round(motionEvent.getY()));
    // return the point that was clicked in map coordinates
    return mapView.screenToLocation(screenPoint);
  }

  /**
   * Create a {@link Graphic} from a {@link Geometry} and {@link Symbol} and add it to a {@link GraphicsOverlay}
   *
   * @param graphicsOverlay to add the graphic to
   * @param geometry        graphic's geometry on a {@link MapView}
   * @param symbol          to be added to the {@link GraphicsOverlay}
   */
  private static void addGraphic(GraphicsOverlay graphicsOverlay, Geometry geometry, Symbol symbol) {
    Graphic graphic = new Graphic(geometry, symbol);
    graphicsOverlay.getGraphics().add(graphic);
  }

  /**
   * Clear all graphics from the given graphics overlay.
   *
   * @param graphicsOverlay to clear
   */
  private static void clearGraphics(GraphicsOverlay graphicsOverlay) {
    graphicsOverlay.getGraphics().clear();
  }

  /**
   * Setup {@link RecyclerView}s to display symbols
   */
  private void setupRecyclerViews() {
    mEyesRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
    mEyesAdapter = new SymbolAdapter(this);
    mEyesRecyclerView.setAdapter(mEyesAdapter);

    mMouthRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
    mMouthAdapter = new SymbolAdapter(this);
    mMouthRecyclerView.setAdapter(mMouthAdapter);

    mHatRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
    mHatAdapter = new SymbolAdapter(this);
    mHatRecyclerView.setAdapter(mHatAdapter);
  }

  /**
   * Animates {@link RecyclerView}s to inform user that there are more options available
   */
  private void animateRecyclerViews() {
    Handler handler = new Handler();

    final Runnable resetScrollRunnable = () -> {
      mHatRecyclerView.smoothScrollBy(-100, 0);
      mEyesRecyclerView.smoothScrollBy(-100, 0);
      mMouthRecyclerView.smoothScrollBy(-100, 0);
    };

    Runnable startScrollRunnable = () -> {
      mHatRecyclerView.smoothScrollBy(100, 0);
      mEyesRecyclerView.smoothScrollBy(100, 0);
      mMouthRecyclerView.smoothScrollBy(100, 0);
      handler.postDelayed(resetScrollRunnable, 1000);
    };

    runOnUiThread(() -> handler.postDelayed(startScrollRunnable, 2000));
  }

  @Override
  protected void onResume() {
    super.onResume();
    mMapView.resume();
  }

  @Override
  protected void onPause() {
    mMapView.pause();
    super.onPause();
  }

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

  private void logErrorToUser(Context context, String message) {
    Log.e(TAG, message);
    runOnUiThread(() -> Toast.makeText(context, message, Toast.LENGTH_LONG).show());
  }
}

interface OnSymbolPreviewTapListener {
  void onSymbolPreviewTap(SymbolStyleSearchResult symbol);
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.