Rounded corner mapbox mapView

Question

So I'm trying to add a small mini map to my android app with a mapbox mapView. I'm trying to add rounded corners to it and I can't seem to find a way to do that. Is there a good way to do this? I know one option is to use a CardView but it doesn't seem to round the corners of the map.

yes, you can do this. Follow [this](https://stackoverflow.com/questions/14469208/is-there-a-way-to-implement-rounded-corners-to-a-mapfragment) answer. It will help you to do that. — Sayem, Jun 21 '18 at 16:45
I don't entirely understand that method. I tried to do what the answer said but the mapbox mapview doesn't resize. Is this maybe an issue with mapbox? — Rubinstd, Jun 21 '18 at 19:08

score 1 · Answer 1 · answered Jun 22 '18 at 07:41

1

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="400dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="12dp">

    Put your mapview in here

</android.support.v7.widget.CardView>

This card should work perfectly for you.

answered Jun 22 '18 at 07:41

Mbuodile Obiosio

1,463
1
15
19

I've tried doing this but my mapview still seems to stay square as apposed to actually fitting to the corner. Is the mapbox mapView just weird with this? – Rubinstd Jun 26 '18 at 18:51

score 1 · Answer 2 · answered Oct 19 '20 at 22:53

It's an issue of Mapbox in combination with an AR view in the background. What worked for me was enabling renderTextureMode in the map.

Try this:

<!-- CardView for rounded corners -->
<androidx.cardview.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
                                   android:id="@+id/map_container"
                                   android:layout_width="200dp"
                                   android:layout_height="200dp"
                                   android:layout_gravity="center"
                                   card_view:cardCornerRadius="100dp"
                                   android:layout_alignParentBottom="true"
                                   android:layout_alignParentRight="true"
                                   android:layout_marginRight="16dp"
                                   android:layout_marginBottom="16dp"
                                   tools:ignore="RtlHardcoded">
    <com.mapbox.mapboxsdk.maps.MapView
            android:id="@+id/mapView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:mapbox_cameraTargetLat="40.73581"
            app:mapbox_cameraTargetLng="-73.99155"
            app:mapbox_cameraZoom="11"
            app:mapbox_renderTextureMode="true"/>
</androidx.cardview.widget.CardView>

score 0 · Answer 3 · answered Jun 29 '18 at 22:02

What are the layout width and height of your Mapbox map in XML?

I followed https://developer.android.com/guide/topics/ui/layout/cardview and this XML worked for me

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mapbox="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:layout_marginTop="32dp"
    card_view:cardCornerRadius="10dp"
    card_view:layout_constraintEnd_toEndOf="parent"
    card_view:layout_constraintStart_toStartOf="parent"
    card_view:layout_constraintTop_toTopOf="parent">

    <com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        mapbox:mapbox_cameraTargetLat="40.73581"
        mapbox:mapbox_cameraTargetLng="-73.99155"
        mapbox:mapbox_cameraZoom="11"
        mapbox:mapbox_styleUrl="mapbox://styles/mapbox/streets-v10" />

</android.support.v7.widget.CardView>


</android.support.constraint.ConstraintLayout>

So the issue seems to be that I'm overlaying this view onto a Unity camera view. That seems to mess it up. The mapView always ends up just becoming transparent and not showing up over the camera preview. Anyway to fix this? — Rubinstd, Jul 03 '18 at 14:51
That seems to be a separate issue from the rounded corner mapView. Were you able to get the corner rounded like above? Take a screenshot of your device and post to Imgur so that I can see what you're talking about @Rubinstd ? What's your current XML file look like? https://www.mapbox.com/contact/support/#products/android is a great resource of Mapbox help too — langsmith, Jul 03 '18 at 23:03

Rounded corner mapbox mapView

3 Answers3

Linked