One of our product require two mapView; one acting as a main map for the application, while the other mapView acts as a mini-map on the top right corner, like so:
The problem I am encountering is that I cannot properly clip the mini-map to be a circle. During my search for a solution, I have encountered numerous ways, which includes but not limited to:
- Simple XML manipulation with a background with 4 rounded corners (making a circle). This did not work as it seem the mini-map mapView simply ignored its parent's parameters, making the mini map square again.
- Manipulation involving a custom circle layout (Extended from ViewGroup) with onDispatch() and onDraw() overwritten to clip the provided canvas instance with a circle path instance. This gave a behaviour that I will specify below.
- Clipping the custom circle layout using a ViewOutlineProvider and overriding the getOutline() method to set the Outline instance as an oval of equal dimensions (a circle). This gave the same behaviour I mentioned above.
The behaviour I mentioned above is very strange and unexpected. In the event that I have the mini-map on top of the main map, the mini-map will simply ignore whatever clipping that I specified. Like so:
(The grey outline is the intended outline of the clipped path, while the red square represents the boundaries of the mini-map)
At first I thought it was simply because I did not set the clipping correctly. However, as I did more tests, it becomes apparent that the mini-map clipping works with every other generic type of view (e.g. FrameLayout, ImageButton), except for other mapView. This is hard to describe, so I will again use a picture. To see this, I made the main mapView half in height and aligned to the bottom, with the mini-map dipping half-way to the mapView.
As it can been seen above, the mini-map will not clip with the main MapView underneath, but will clip with the regular white RelativeLayout in the background (color can be changed, and the clipping still applies). I have struggled many hours over this. An even stranger clipping behaviour will occur if I move the mini-map dynamically with a button; the clipping will clip/revert dynamically as well, depending on if it is above the main mapView.
I would strong appreciate any help on this, as I could not find anything else similar to the situation I am facing. I have suggested to a senior developer that the mini-map be changed to a square, but this strongly goes against the established design, and I would like to give this one last try. Thank you.