Rounded corners for MapBox overlay over ARCore ArFragment

Question

I'm trying to use ARCore and show a map overlay, using MapBox because it lets me customize the design. I followed this answer: https://stackoverflow.com/a/51109938/1298835

The problem is that the map is not rounded when overlaid over an ArFragment. It looks like this:

It works if there is no ArFragment behind it, e.g. it works with a solid color. With ArFragment, you can see it's trying to be rounded, but still drawing the map in the corners.

Here is my XML file: (fragment_maptest.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <fragment android:name="com.google.ar.sceneform.ux.ArFragment"
              android:id="@+id/ux_fragment"
              android:layout_width="match_parent"
              android:layout_height="match_parent"/>

    <!-- 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"/>
    </androidx.cardview.widget.CardView>

</RelativeLayout>

And a simplified Kotlin file to set it up: (MapTestFragment.kt)

package com.test.test

import android.os.Bundle
import android.view.*
import com.test.test.R
import com.mapbox.mapboxsdk.Mapbox
import com.mapbox.mapboxsdk.maps.MapView
import com.mapbox.mapboxsdk.maps.Style

class MapTestFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        Mapbox.getInstance(this.activity!!, getString(R.string.mapbox_access_token))
        return inflater.inflate(R.layout.fragment_maptest, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        // setup map
        val mapView = this.activity?.findViewById<MapView>(R.id.mapView)
        mapView?.onCreate(savedInstanceState)
        mapView?.getMapAsync {
            it.setStyle(Style.Builder().fromUri("mapbox://styles/mapbox/streets-v10"))
        }
    }
}

Has anyone encountered and solved a similar problem, either of a MapBox map drawing over its rounded corners, or of a similar rounded view not working over ARCore?

score 1 · Accepted Answer · answered Aug 26 '19 at 06:07

I figured it out!

All you need to do is enable textureMode. This works:

<!-- 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 2 · answered Aug 23 '19 at 22:06

0

I did not use ARCore library but that AR view most likely works on software layer. And cardview, to create a rounded shape, makes use of outline clipping which requires hardware acceleration

answered Aug 23 '19 at 22:06

Nezih Yılmaz

626
4
8

Hmm I'm not sure. The weird thing is that replacing the MapView with something else (e.g. a simple TextView) makes the rounded corners work. – Alex Wally Aug 24 '19 at 08:50
Are you sure using some other type of view inside cardview makes rounding work? Did you visually confirm it? – Nezih Yılmaz Aug 24 '19 at 09:03
Yes. I just double-checked, it even works with a Google Maps fragment. Alas, my assignment is to use MapBox with a custom style, so hopefully there is a way – Alex Wally Aug 24 '19 at 12:11
This works instead of : `` – Alex Wally Aug 24 '19 at 12:12

Rounded corners for MapBox overlay over ARCore ArFragment

2 Answers2