> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baato.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Map styles

> Apply Baato's vector map styles in an Android app.

A Baato map style is just a URL. Swapping the look of your map means changing one string —
the rest of the activity stays identical. See the [Map Styles API](/services/styles) for the
full catalogue.

## The styles

<Columns cols={3}>
  <Frame caption="Breeze">
    <img src="https://mintcdn.com/baato/3GUKEGLT42m2snov/images/examples/baato_breeze_map.png?fit=max&auto=format&n=3GUKEGLT42m2snov&q=85&s=6fa56b32e0c0dd51ca8f5af8c34d8093" alt="Breeze map style on Android" width="585" height="329" data-path="images/examples/baato_breeze_map.png" />
  </Frame>

  <Frame caption="Monochrome">
    <img src="https://mintcdn.com/baato/3GUKEGLT42m2snov/images/examples/baato_monochrome_map.jpg?fit=max&auto=format&n=3GUKEGLT42m2snov&q=85&s=5246e96c24a4a7c7b732939d5ec6428d" alt="Monochrome map style on Android" width="650" height="341" data-path="images/examples/baato_monochrome_map.jpg" />
  </Frame>

  <Frame caption="Retro">
    <img src="https://mintcdn.com/baato/3GUKEGLT42m2snov/images/examples/baato_retro_map.jpg?fit=max&auto=format&n=3GUKEGLT42m2snov&q=85&s=92289b3bc49a6c5e447c3739c1ab64ae" alt="Retro map style on Android" width="582" height="306" data-path="images/examples/baato_retro_map.jpg" />
  </Frame>
</Columns>

<Steps>
  <Step title="Add the dependency">
    ```groovy theme={null}
    //mapbox sdk
      implementation('com.mapbox.mapboxsdk:mapbox-android-sdk:6.5.0') {
          exclude group: 'group_name', module: 'module_name'
      }
      implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-locationlayer:0.8.1'
    ```

    <Warning>
      If you use Mapbox as your map service, the Baato Java client currently supports only
      the versions pinned above.
    </Warning>
  </Step>

  <Step title="Add a MapView to your layout">
    ```xml theme={null}
    <com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        mapbox:mapbox_cameraTargetLat="27.7084"
        mapbox:mapbox_cameraTargetLng="85.3206"
        mapbox:mapbox_cameraZoom="13" />

    <TextView
        android:id="@+id/bottomInfoLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:padding="@dimen/general_margin"
        android:text="@string/nav_msg"
        android:textColor="@color/colorWhite"
        android:visibility="gone"
        app:layout_anchor="@id/mapView"
        app:layout_anchorGravity="bottom" />
    ```
  </Step>

  <Step title="Set the style URL in onCreate">
    Pick a tab for the style you want — only the URL changes.

    <Tabs>
      <Tab title="Breeze">
        ```java theme={null}
        mapboxMap.setStyle(
            "https://api.baato.io/api/v1/styles/breeze?key=" + getString(R.string.baato_access_token),
            style -> {
                bottomInfoLayout.setText(Html.fromHtml("<b>Breeze Map</b> from Baato.io"));
                bottomInfoLayout.setVisibility(View.VISIBLE);
            });
        ```
      </Tab>

      <Tab title="Monochrome">
        ```java theme={null}
        mapboxMap.setStyle(
            "https://api.baato.io/api/v1/styles/monochrome?key=" + getString(R.string.baato_access_token),
            style -> {
                bottomInfoLayout.setText(Html.fromHtml("<b>Monochrome Map</b> from Baato.io"));
                bottomInfoLayout.setVisibility(View.VISIBLE);
            });
        ```
      </Tab>

      <Tab title="Retro">
        ```java theme={null}
        mapboxMap.setStyle(
            "https://api.baato.io/api/v1/styles/retro?key=" + getString(R.string.baato_access_token),
            style -> {
                bottomInfoLayout.setText(Html.fromHtml("<b>Retro Map</b> from Baato.io"));
                bottomInfoLayout.setVisibility(View.VISIBLE);
            });
        ```
      </Tab>

      <Tab title="Your own style">
        Custom styles you build in the **My Styles** section of your
        [account dashboard](https://baato.io/account) work exactly the same way.

        ```java theme={null}
        mapboxMap.setStyle(
            "https://api.baato.io/api/v1/styles/YOUR_STYLE_NAME?key=" + getString(R.string.baato_access_token),
            style -> {
                bottomInfoLayout.setVisibility(View.VISIBLE);
            });
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Add attribution">
    Turn off the Mapbox branding and add the Baato logo. Download
    [the logo](https://i.postimg.cc/k5DpLQKQ/baato-Logo.png) into `res/drawable` first.

    ```java theme={null}
    mapView = findViewById(R.id.mapView);
    bottomInfoLayout = findViewById(R.id.bottomInfoLayout);

    Mapbox.getInstance(this, getString(R.string.mapbox_token));
    mapView.onCreate(savedInstanceState);
    mapView.getMapAsync(mapboxMap -> {
        // remove the Mapbox attribution
        mapboxMap.getUiSettings().setAttributionEnabled(false);
        mapboxMap.getUiSettings().setLogoEnabled(false);

        // add the Baato logo
        final FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(250, 104);
        params.gravity = Gravity.BOTTOM | Gravity.LEFT;
        params.setMargins(12, 12, 12, 12);
        ImageView imageview = new ImageView(this);
        imageview.setImageResource(R.drawable.baato_logo);
        imageview.setLayoutParams(params);
        mapView.addView(imageview);

        // then set the style, as in the previous step
    });
    ```

    <Note>
      Displaying Baato and OpenStreetMap attribution is a condition of use. See
      [Attribution requirements](/resources/attribution).
    </Note>
  </Step>

  <Step title="Forward the MapView lifecycle">
    A `MapView` leaks if you skip this — every lifecycle callback must be forwarded.

    <Accordion title="Lifecycle boilerplate">
      ```java theme={null}
      @Override
      public void onResume() {
          super.onResume();
          mapView.onResume();
      }

      @Override
      protected void onStart() {
          super.onStart();
          mapView.onStart();
      }

      @Override
      protected void onStop() {
          super.onStop();
          mapView.onStop();
      }

      @Override
      public void onPause() {
          super.onPause();
          mapView.onPause();
      }

      @Override
      public void onLowMemory() {
          super.onLowMemory();
          mapView.onLowMemory();
      }

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

      @Override
      protected void onSaveInstanceState(Bundle outState) {
          super.onSaveInstanceState(outState);
          mapView.onSaveInstanceState(outState);
      }
      ```
    </Accordion>
  </Step>
</Steps>

## Full source

Each style has a standalone activity in the demo app:

<Columns cols={3}>
  <Card title="BreezeMapStyleActivity" icon="github" href="https://github.com/baato/baato-android-demo/blob/master/app/src/main/java/com/baato/baatoandroiddemo/activities/BreezeMapStyleActivity.java" />

  <Card title="MonochromeMapStyleActivity" icon="github" href="https://github.com/baato/baato-android-demo/blob/master/app/src/main/java/com/baato/baatoandroiddemo/activities/MonochromeMapStyleActivity.java" />

  <Card title="RetroMapStyleActivity" icon="github" href="https://github.com/baato/baato-android-demo/blob/master/app/src/main/java/com/baato/baatoandroiddemo/activities/RetroMapStyleActivity.java" />
</Columns>