¿Hay alguna forma de implementar esquinas redondeadas en un Mapfragment?

Quiero darle al mapa unas esquinas redondeadas de aspecto agradable como las dos cajas debajo de él. No puedo hacerlo con el fragmento del mapa porque no hay una propiedad de fondo para un fragmento. establecer el mapa dentro de un diseño y establecer su fondo en una forma redondeada no me ayudó demasiado y este es el resultado:

http://i.stack.imgur.com/LJhP1.jpg

Podría fusionar el mapa, pero esto lo haría más pequeño y me gustaría evitarlo.

EDITAR: @Ryan este es el nuevo resultado # 2:

http://i.stack.imgur.com/69D59.jpg

Supongo que esto no está mal, ni siquiera cerca de las esquinas en las otras cajas, pero aún así no está mal con un poco más de trabajo que podría llegar a un lugar cercano, simplemente no tengo un editor de imágenes normal. pero una cosa que todavía me molesta ahora es la separación entre la vista de texto “Ubicación” y el mapa en sí mismo. ¿Podría pintar el parche de otra manera para que ahora haya distancia? así es como lo hice:

http://i.stack.imgur.com/1Qx66.png

Bueno, finalmente he descubierto esto:

http://i.stack.imgur.com/bY4N5.jpg

esto es lo que usé para el parche:

enter image description here

Gracias.

No he intentado esto, pero pondría una vista con esquinas redondeadas y un medio transparente en la parte superior del mapView / mapFragment.

Es decir, coloque el mapFragment y la vista de esquina redondeada en un FrameLayout con ambos llenando el FrameLayout, luego haga transparente la mitad de la vista de esquina redondeada.

Para mayor aclaración, puede hacerlo en un diseño de la siguiente manera:

      

El fondo redondeado es un parche de 9 con esquinas redondeadas y un centro transparente. P.ej

rounded_background.9.png

Espero que ayude,

Ryan

Sé que es una publicación anterior, pero puedes intentar usar Tarjetas así:

    

enter image description here

La manera más fácil es envolver el fragmento del mapa dentro de FrameLayout junto con un ImageView. The Imageview mostraría un rectángulo redondeado en la parte superior del fragmento de mapa. En su forma más simple, verá el fragmento del mapa dentro del rectángulo redondeado con sus esquinas sobresaliendo del rectángulo redondeado porque la vista del mapa en sí no está redondeada. Para superar esta rareza visual, simplemente aplique un valor de layout_margin en el fragmento del mapa. El valor debe ser igual al ancho del borde del rectángulo.

      

El rectángulo dibujable se define como una forma xml como se muestra a continuación

      

Observe que el ancho de trazo del rectángulo es 3dp, que es exactamente el mismo valor que aplicamos a la propiedad layout_margin del fragmento de mapa. El resultado es un fragmento de mapa arrinconado muy bien redondeado, como se muestra en la siguiente captura de pantalla enter image description here

Ajustar el fragmento del mapa en este diseño:

 package com.example.yourpackage; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.graphics.RectF; import android.util.AttributeSet; import android.widget.RelativeLayout; /** * Just extend any Layout you like/need */ public class RoundedLayout extends RelativeLayout { private Path mPathCorners = new Path(); private Path mPathCircle = new Path(); private float mCornerRadius; /** * border path */ private Path mPathCornersBorder = new Path(); private Path mPathCircleBorder = new Path(); private int mBorderWidth = 0; private int mBorderHalf; private boolean mShowBorder = false; private int mBorderColor = 0xFFFF7700; private float mDensity = 1.0f; /** * Rounded corners or circle shape */ private boolean mIsCircleShape = false; private Paint mPaint = new Paint(); private float dpFromPx(final float px) { return px / mDensity; } private float pxFromDp(final float dp) { return dp * mDensity; } public RoundedLayout(Context context) { this(context, null); } public RoundedLayout(Context context, AttributeSet attrs) { this(context, attrs, 0); } public RoundedLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); mDensity = getResources().getDisplayMetrics().density; // just a default for corner radius mCornerRadius = pxFromDp(25f); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setColor(mBorderColor); setBorderWidth(Math.round(pxFromDp(2f))); } /** * Switch to circle or rectangle shape * * @param useCircle */ public void setShapeCircle(boolean useCircle) { mIsCircleShape = useCircle; invalidate(); } /** * change corner radius * * @param radius */ public void setCornerRadius(int radius) { mCornerRadius = radius; invalidate(); } public void showBorder(boolean show) { mShowBorder = show; invalidate(); } public void setBorderWidth(int width) { mBorderWidth = width; mBorderHalf = Math.round(mBorderWidth / 2); if (mBorderHalf == 0) { mBorderHalf = 1; } mPaint.setStrokeWidth(mBorderWidth); updateCircleBorder(); updateRectangleBorder(); invalidate(); } public void setBorderColor(int color) { mBorderColor = color; mPaint.setColor(color); invalidate(); } // helper reusable vars, just IGNORE private float halfWidth, halfHeight, centerX, centerY; private RectF rect = new RectF(0, 0, 0, 0); private RectF rectBorder = new RectF(0, 0, 0, 0); @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); // just calculate both shapes, is not heavy // rounded corners path rect.left = 0; rect.top = 0; rect.right = w; rect.bottom = h; mPathCorners.reset(); mPathCorners.addRoundRect(rect, mCornerRadius, mCornerRadius, Path.Direction.CW); mPathCorners.close(); // circle path halfWidth = w / 2f; halfHeight = h / 2f; centerX = halfWidth; centerY = halfHeight; mPathCircle.reset(); mPathCircle.addCircle(centerX, centerY, Math.min(halfWidth, halfHeight), Path.Direction.CW); mPathCircle.close(); updateRectangleBorder(); updateCircleBorder(); } // helper reusable var, just IGNORE private int save; @Override protected void dispatchDraw(Canvas canvas) { save = canvas.save(); canvas.clipPath(mIsCircleShape ? mPathCircle : mPathCorners); super.dispatchDraw(canvas); canvas.restreToCount(save); if (mShowBorder) { canvas.drawPath(mIsCircleShape ? mPathCircleBorder : mPathCornersBorder, mPaint); } } private void updateCircleBorder() { // border path for circle mPathCircleBorder.reset(); mPathCircleBorder.addCircle(centerX, centerY, Math.min(halfWidth - mBorderHalf, halfHeight - mBorderHalf), Path.Direction.CW); mPathCircleBorder.close(); } private void updateRectangleBorder() { // border path for rectangle rectBorder.left = rect.left + mBorderHalf; rectBorder.top = rect.top + mBorderHalf; rectBorder.right = rect.right - mBorderHalf; rectBorder.bottom = rect.bottom - mBorderHalf; mPathCornersBorder.reset(); mPathCornersBorder.addRoundRect(rectBorder, mCornerRadius - mBorderHalf, mCornerRadius - mBorderHalf, Path.Direction.CW); mPathCornersBorder.close(); } } 

En el diseño será así:

    

En el código puede ser así para una forma redonda con borde:

  RoundedLayout rl = (RoundedLayout) findViewById(R.id.maplayout); rl.setShapeCircle(true); rl.showBorder(true); rl.setBorderWidth(2); 

Este diseño se puede usar para dar forma a cualquier vista.

Es increíble cómo Google es incapaz de hacer demostraciones completas competentes (utilizables) para su API de Android.

Para otras personas que investigan esto, acabo de abordar esto usando GoogleMap.snapshot y manipulando el resultado del bitmap con esta respuesta stack over flow: ¿Cómo hacer un ImageView con esquinas redondeadas?

Eso sí, solo es válido si vas a tener un mapa estático con el que no interactúes.

Asegúrese de tomar la instantánea después de que se cargue el mapa.

Actualicé el código de ayuda de vista de imagen para dibujar con ruta para admitir el redondeo solo en algunas esquinas. es decir. Si quieres redondear solo 2 de las esquinas

Solo necesitas la ruta de la función rect que toma un flotador []

Muestro una barra de progreso hasta que reciba una callback del oyente cargado en GoogleMap en lugar de tomar la instantánea.

Si toma su instantánea demasiado pronto obtendrá no puede crear bitmap con 0 error de ancho y alto.

Espero que esto ayude a alguien a buscar esquinas redondeadas u otras formas extrañas en instantáneas de mapas estáticos.

Si solo está intentando apuntar a API 21 (Lollipop) y superior


Esta es la forma más fácil posible.

parentView.setClipToOutline(true);

Resultado

enter image description here

Siguiendo la publicación de @Nouman_Hanif terminé con una solución que se ve bastante bien.

map_rounded_corner_overlay.xml:

      

Mi mapa de archivo xml: