Mapview in google-api-v2 with rounded corners in android

Question

I am writing an app in android using MapFragment, so i want that the corners of the mapview rounded i create a shape in a xml file and set the shape as a background of the map but i didn't got the result i want. the corners of the map are not rounded but the background is and actually that's what my code do, so can anyone give me an issue to have a rounded corner mapview, any idea.

Answer 1

Check out this question I asked on exactly the same topic:

Is there a way to implement rounded corners to a Mapfragment?

basically you need to create an appropriate 9-patch image and apply it over them map using another layout with FrameLayout.

Answer 2

I've made some research and i found an issue. Well i've created a view that extend LinearLayout (or framelayout) this view is like that

public class RoundedCornerMap extends LinearLayout{

Bitmap windowFrame;
//this constructer is needed by a tool in explipse to render the layout, you can not define it
public RoundedCornerMap(Context context, AttributeSet attr){
    super(context, attr);
}
//this 
public RoundedCornerMap(Context context, AttributeSet attr, View view) {
    super(context, attr);
    init(view);
}

private void init(View view) {

    view.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));
    view.setClickable(true);
    addView(view);
}

@Override
protected void dispatchDraw(Canvas canvas) {
    super.dispatchDraw(canvas);

    if(windowFrame==null)
        createWindowFrame();// Lazy creation of the window frame, this is needed as we don't know the width & height of the screen until draw time

    canvas.drawBitmap(windowFrame, 0, 0, null);
}

private void createWindowFrame() {

    windowFrame= Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);// Create a new image we will draw over the map
    Canvas osCanvas = new Canvas(windowFrame);// Create a    canvas to draw onto the new image

    RectF outerRectangle = new RectF(0, 0, getWidth(), getHeight());
    RectF innerRectangle = new RectF(10, 10, getWidth()-10, getHeight()-10);

    float radiusCorner = getWidth()/18f;// The angle of your corners

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);// Anti alias allows for smooth corners
    paint.setColor(getResources().getColor(Color.BLACK));// This is the color of your activity background
    osCanvas.drawRect(outerRectangle, paint);

    paint.setColor(Color.RED);// An obvious color to help debugging
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));// A out B http://en.wikipedia.org/wiki/File:Alpha_compositing.svg
    osCanvas.drawRoundRect(innerRectangle, radiusCorner, radiusCorner, paint);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {

    super.onLayout(changed, l, t, r, b);

    windowFrame=null;// If the layout changes null our frame so it can be recreated with the new width and height
}

}

The onCreate method of the Fragment extending the Mapfragment will be like that:

public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

    XmlPullParser parser = getResources().getXml(R.layout.rounded_corner_map);
    AttributeSet attr = Xml.asAttributeSet(parser);


    View view=new RoundedCornerMap(myActivity, attr, super.onCreateView(inflater, container, null));
    //ignore about this line below i just want to set a shape to the view
    //view.setBackgroundResource(R.drawable.map_shape);
    return view;
}

and we need to difine the xml file rounded_corner_map like that:

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

I hope that this will help you.

Answer 3

Put your map in any layout like LinearLayout/RelativeLayout or any layout and set that shape style to Layout as background.

My shape file

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="10dp"/>
    <stroke android:color="#aa6632"/>
    <padding android:left="5dp" android:top="5dp"
        android:right="5dp" android:bottom="5dp"/>
</shape>

My layout file

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

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="400dp" 
        android:layout_centerInParent="true"
        android:background="@drawable/test">
    <fragment
        xmlns:map="http://schemas.android.com/apk/res-auto"
        android:id="@+id/mapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment" />
    </LinearLayout>

</RelativeLayout>

You can use FrameLayout also instead of LinearLayout