[demo-app] Update appearances examples to showcase paint properties (#12560)

### Summary
- Update Android and iOS appearances examples to demonstrate paint
properties (translate, color, opacity)
- Remove experimental annotations and comments — appearances are now
stable
- Add text labels to hotel icons to showcase text paint property changes

### Context
Appearances in symbol layers now support both paint and layout
properties and are no longer experimental. The existing native examples
only demonstrated layout property changes (icon-image). This aligns them
with the [GL-JS reference
example](https://docs.mapbox.com/mapbox-gl-js/example/appearances/).

GeoJSON data and layer style JSON are aligned with the GL-JS debug
example (`projects/gl-js/debug/appearances.html`) — same hotel names,
text layout props, base paint values, and appearance paint properties.
The `hovered` appearance from GL-JS is omitted since hover doesn't apply
on touch devices.

### Key Changes
- **AppearancesActivity.kt**: Added text layout props, base paint
section, paint properties in appearances (icon-translate,
text-translate, text-color, text-halo, opacity). Added hotel names to
GeoJSON. Removed experimental mentions.
- **AppearancesExample.swift**: Same layer/GeoJSON updates. Removed
`@_spi(Experimental)` import — all APIs used are public.
- **example_descriptions.xml**: Updated description to mention paint
properties.

### Validation
- [x] Run Android compose-app Appearances example — verify text labels,
translate on select, opacity on previously-clicked
- [x] Run iOS example app Appearances example — verify same behavior

cc @mapbox/maps-ios
cc @mapbox/maps-android

GitOrigin-RevId: 927ccada4f3bf73398702bb8923a900a5a7f4d33

Author: pengdev

compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/style/AppearancesActivity.kt

@@ -27,11 +27,12 @@ import com.mapbox.maps.interactions.FeatureState
 import com.mapbox.maps.interactions.FeaturesetFeature
 
 /**
- * Example demonstrating the experimental Appearances API for dynamic icon states.
- * Shows how to use appearances with feature-state to change icon images based on user interaction.
- * - Default: hotel icon
- * - Currently Selected: hotel-active icon
- * - Previously Clicked: hotel-clicked icon
+ * Example demonstrating the Appearances API for dynamic icon and text states.
+ * Shows how to use appearances with feature-state to change icon images and paint properties
+ * based on user interaction.
+ * - Default: hotel icon with dark label
+ * - Currently Selected: hotel-active icon, floats up with blue label and halo
+ * - Previously Clicked: hotel-clicked icon, dimmed
  */
 public class AppearancesActivity : ComponentActivity() {
 
@@ -131,11 +132,10 @@ public class AppearancesActivity : ComponentActivity() {
                     ).value!!
                   )
 
-                  // Add a layer to show an icon on every point with appearances
-                  // - When currentlySelected feature state is true: use "hotel-active" icon
-                  // - When hasBeenClicked feature state is true and currentlySelected is not: use "hotel-clicked" icon
-                  // - Otherwise: use the default "hotel" icon defined in layout
-                  // Appearances are experimental and subject to change in future versions
+                  // Add a symbol layer with appearances that change both layout and paint
+                  // properties based on feature state:
+                  // - "clicked": floats icon up, changes label to blue with halo
+                  // - "has-been-clicked": dims icon and label (opacity 0.45)
                   try {
                     style.addStyleLayer(
                       Value.fromJson(POINTS_LAYER_JSON).value!!,
@@ -167,22 +167,41 @@ private const val POINTS_LAYER_JSON = """
   "layout": {
     "icon-allow-overlap": true,
     "icon-image": "hotel",
-    "icon-size": 1.0,
-    "icon-anchor": "center"
+    "icon-size": 0.75,
+    "text-field": ["get", "name"],
+    "text-font": ["DIN Pro Medium", "Arial Unicode MS Regular"],
+    "text-size": 12,
+    "text-offset": [0, 1.2],
+    "text-anchor": "top",
+    "text-allow-overlap": true
+  },
+  "paint": {
+    "text-color": "#333333",
+    "text-halo-color": "#ffffff",
+    "text-halo-width": 1,
+    "icon-translate": [0, 0],
+    "text-translate": [0, 0]
   },
   "appearances": [
     {
-      "name": "currently-selected",
+      "name": "clicked",
       "condition": ["boolean", ["feature-state", "currentlySelected"], false],
       "properties": {
-        "icon-image": "hotel-active"
+        "icon-image": "hotel-active",
+        "icon-translate": [0, -12],
+        "text-translate": [0, -12],
+        "text-color": "#4264fb",
+        "text-halo-color": "#c0caff",
+        "text-halo-width": 2
       }
     },
     {
       "name": "has-been-clicked",
       "condition": ["boolean", ["feature-state", "hasBeenClicked"], false],
       "properties": {
-        "icon-image": "hotel-clicked"
+        "icon-image": "hotel-clicked",
+        "icon-opacity": 0.45,
+        "text-opacity": 0.45
       }
     }
   ]
@@ -193,15 +212,15 @@ private const val HOTEL_GEOJSON = """
 {
   "type": "FeatureCollection",
   "features": [
-    {"type": "Feature", "id": "1", "properties": {}, "geometry": {"type": "Point", "coordinates": [1.8452993238082342, 42.100164223399275]}},
-    {"type": "Feature", "id": "2", "properties": {}, "geometry": {"type": "Point", "coordinates": [1.8438590191857145, 42.1004178052402]}},
-    {"type": "Feature", "id": "3", "properties": {}, "geometry": {"type": "Point", "coordinates": [1.844225198327564, 42.10130533369667]}},
-    {"type": "Feature", "id": "4", "properties": {}, "geometry": {"type": "Point", "coordinates": [1.8443594640122, 42.0990955459275]}},
-    {"type": "Feature", "id": "5", "properties": {}, "geometry": {"type": "Point", "coordinates": [1.8449697625811154, 42.09869705141318]}},
-    {"type": "Feature", "id": "6", "properties": {}, "geometry": {"type": "Point", "coordinates": [1.8471058075726603, 42.09978384873651]}},
-    {"type": "Feature", "id": "7", "properties": {}, "geometry": {"type": "Point", "coordinates": [1.8455739474818813, 42.10182152060625]}},
-    {"type": "Feature", "id": "8", "properties": {}, "geometry": {"type": "Point", "coordinates": [1.8427787800360136, 42.10039061289771]}},
-    {"type": "Feature", "id": "9", "properties": {}, "geometry": {"type": "Point", "coordinates": [1.8433280487479635, 42.0994396753579]}}
+    {"type": "Feature", "id": "1", "properties": {"name": "Hotel Carlemany"}, "geometry": {"type": "Point", "coordinates": [1.8452993238082342, 42.100164223399275]}},
+    {"type": "Feature", "id": "2", "properties": {"name": "Hotel Panorama"}, "geometry": {"type": "Point", "coordinates": [1.8438590191857145, 42.1004178052402]}},
+    {"type": "Feature", "id": "3", "properties": {"name": "Hotel Andorra"}, "geometry": {"type": "Point", "coordinates": [1.844225198327564, 42.10130533369667]}},
+    {"type": "Feature", "id": "4", "properties": {"name": "Hotel Plaza"}, "geometry": {"type": "Point", "coordinates": [1.8443594640122, 42.0990955459275]}},
+    {"type": "Feature", "id": "5", "properties": {"name": "Hotel Cervol"}, "geometry": {"type": "Point", "coordinates": [1.8449697625811154, 42.09869705141318]}},
+    {"type": "Feature", "id": "6", "properties": {"name": "Hotel Diplomatic"}, "geometry": {"type": "Point", "coordinates": [1.8471058075726603, 42.09978384873651]}},
+    {"type": "Feature", "id": "7", "properties": {"name": "Hotel Guillem"}, "geometry": {"type": "Point", "coordinates": [1.8455739474818813, 42.10182152060625]}},
+    {"type": "Feature", "id": "8", "properties": {"name": "Hotel Roc Blanc"}, "geometry": {"type": "Point", "coordinates": [1.8427787800360136, 42.10039061289771]}},
+    {"type": "Feature", "id": "9", "properties": {"name": "Hotel President"}, "geometry": {"type": "Point", "coordinates": [1.8433280487479635, 42.0994396753579]}}
   ]
 }
 """

compose-app/src/main/res/values/example_descriptions.xml

@@ -29,7 +29,7 @@
     <string name="description_standard_style">Showcase usage of Standard style</string>
     <string name="description_clip_layer">Showcase the usage of clip layer.</string>
     <string name="description_interactions">Showcase the interactions.</string>
-    <string name="description_appearances">Change icon images dynamically using the Appearances API with feature-state</string>
+    <string name="description_appearances">Change icon images, text styles, and paint properties dynamically using the Appearances API with feature-state</string>
     <string name="description_custom_vector_icons">Dynamically style vector icons with custom colors and interactively change their size on tap</string>
     <string name="description_precipitations">Showcase the rain and snow effects.</string>
     <string name="description_color_theme">Showcase color theme.</string>