Round only top corner of the map.

Question

I want to remove only the top of the map.

I used the property below and rounds the whole corner.

I want to show the overlap of all cards

card_view:cardCornerRadius="4dp" 

here is my layout

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="match_parent" card_view:cardCornerRadius="4dp" card_view:cardPreventCornerOverlap="false" > <RelativeLayout android:layout_width="match_parent" android:layout_height="100dp" android:id="@+id/re1"> <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="20dp" android:background="@color/colorAccent" android:text="contact det" android:gravity="center_vertical" android:textColor="@android:color/white" android:textSize="14dp"/> <TextView android:id="@+id/txtName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Name" android:gravity="center_vertical" android:textSize="10dp" android:layout_below="@id/title" android:layout_marginTop="10dp" android:layout_marginLeft="5dp"/> <TextView android:id="@+id/txtSurname" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Surname" android:gravity="center_vertical" android:textSize="10dp" android:layout_below="@id/txtName" android:layout_marginTop="10dp" android:layout_marginLeft="5dp" /> <TextView android:id="@+id/txtEmail" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Email" android:textSize="10dp" android:layout_marginTop="10dp" android:layout_alignParentRight="true" android:layout_marginRight="150dp" android:layout_alignBaseline="@id/txtName"/> <TextView android:id="@+id/txtAdd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Address" android:textSize="10dp" android:layout_alignLeft="@id/txtEmail" android:layout_alignBaseline="@id/txtSurname"/> </RelativeLayout> </android.support.v7.widget.CardView> 

Answer 1

We can set the marginBottom of the map view to a negative value. Margin should be the same value as the radius of the map. For example,

  <FrameLayout android:id="@+id/rootview" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_marginBottom="-3dp" project:cardCornerRadius="3dp" android:layout_width="match_parent" android:layout_height="match_parent"> <!--The child view inside the cardview should have extra padding,so that negative margin will not affect the bottom padding of its child.Here normally we have 16dp bottom padding for child + margin bottom of the parent is 3dp=19dp comes.--> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="19dp"/> </android.support.v7.widget.CardView> </FrameLayout> 

This works for me. But I doubt that this is the right way to do it. All suggestions are welcome.

Answer 2

I tried the same thing, but none of the suggested solutions helped me.

The only thing that worked was:

1) Create your own background resource (for example, a rectangular shape) with rounded corners.

2) set this custom background using the command -

 cardView = view.findViewById(R.id.card_view2); cardView.setBackgroundResource(R.drawable.card_view_bg); 

worked great for me! Hope this helps you.

The XML layout I made with the upper left and lower right radius.

 <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@color/white" /> <corners android:topLeftRadius="18dp" android:bottomRightRadius="18dp" /> </shape> 

In your case, you only need to change topLeftRadius as well as topRightRadius.

Answer 3

Android maps, which allows you to adjust the round corner position. link: https://github.com/captain-miao/OptionRoundCardview

Answer 4

The tricky thing is because you cannot get CardView to do this. Internally, it uses RoundRectDrawable (closed package), which uses roundRect as follows:

 // rectf, rx, ry, paint canvas.drawRoundRect(mBoundsF, mRadius, mRadius, paint); 

So you need a different solution, for example, I found this essence of Ahmed-Abdelmeded , where they use canvas cropping for each corner, using the path to describe the outline.

So, although I'm not the one who created this code, I will post it here for future travelers.

 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="RoundedView"> <attr name="topLeftCornerRadius" format="dimension" /> <attr name="topRightCornerRadius" format="dimension" /> <attr name="bottomLeftCornerRadius" format="dimension" /> <attr name="bottomRightCornerRadius" format="dimension" /> </declare-styleable> </resources> 

and

 package com.abdelmeged.ahmed.roundedlayout; /** * Created by ahmed on 9/17/2017. */ import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Path; import android.graphics.RectF; import android.graphics.Region; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.View; import android.widget.FrameLayout; /** * Custom wrapper view to get round corner round view */ public class RoundedView extends FrameLayout { /** * The corners than can be changed */ private float topLeftCornerRadius; private float topRightCornerRadius; private float bottomLeftCornerRadius; private float bottomRightCornerRadius; public RoundedView(@NonNull Context context) { super(context); init(context, null, 0); } public RoundedView(@NonNull Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(context, attrs, 0); } public RoundedView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs, defStyleAttr); } private void init(Context context, AttributeSet attrs, int defStyle) { TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundedView, 0, 0); //get the default value form the attrs topLeftCornerRadius = typedArray.getDimension(R.styleable. RoundedView_topLeftCornerRadius, 0); topRightCornerRadius = typedArray.getDimension(R.styleable. RoundedView_topRightCornerRadius, 0); bottomLeftCornerRadius = typedArray.getDimension(R.styleable. RoundedView_bottomLeftCornerRadius, 0); bottomRightCornerRadius = typedArray.getDimension(R.styleable. RoundedView_bottomRightCornerRadius, 0); typedArray.recycle(); setLayerType(View.LAYER_TYPE_SOFTWARE, null); } @Override protected void dispatchDraw(Canvas canvas) { int count = canvas.save(); final Path path = new Path(); float[] cornerDimensions = { topLeftCornerRadius, topLeftCornerRadius, topRightCornerRadius, topRightCornerRadius, bottomRightCornerRadius, bottomRightCornerRadius, bottomLeftCornerRadius, bottomLeftCornerRadius}; path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()) , cornerDimensions, Path.Direction.CW); canvas.clipPath(path); super.dispatchDraw(canvas); canvas.restoreToCount(count); } public void setTopLeftCornerRadius(float topLeftCornerRadius) { this.topLeftCornerRadius = topLeftCornerRadius; invalidate(); } public void setTopRightCornerRadius(float topRightCornerRadius) { this.topRightCornerRadius = topRightCornerRadius; invalidate(); } public void setBottomLeftCornerRadius(float bottomLeftCornerRadius) { this.bottomLeftCornerRadius = bottomLeftCornerRadius; invalidate(); } public void setBottomRightCornerRadius(float bottomRightCornerRadius) { this.bottomRightCornerRadius = bottomRightCornerRadius; invalidate(); } } 

This will allow you to crop the edges of images and views before rendering them, so it does exactly what you want.

Answer 5

According to the question, I assume that you want to apply the corner radius property only to the top of the map. You can get this effect using two CardView . Place one CardView inside another CardView and remove the external CardView corner CardView . Also apply a transparent background to the external CardView . Your internal CardView will have a cornerRadius 4dp value. Then apply marginTop to your inner CardView so that its bottom will be hidden by the outer CardView . This way, the lower corner radius of your inner CardView will be hidden.

You will need to place your xml content in Inner CardView . External CardView only serves to hide the lower rounded corners of the internal CardView . Your xml layout will look like this:

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view_outer" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" card_view:cardBackgroundColor="@android:color/transparent" card_view:cardCornerRadius="0dp" card_view:cardElevation="4dp" > <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="3dp" card_view:cardElevation="0dp" card_view:cardCornerRadius="4dp" > <RelativeLayout android:layout_width="match_parent" android:layout_height="100dp" android:id="@+id/re1"> <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="20dp" android:background="@color/colorAccent" android:text="contact det" android:gravity="center_vertical" android:textColor="@android:color/white" android:textSize="14dp"/> <TextView android:id="@+id/txtName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Name" android:gravity="center_vertical" android:textSize="10dp" android:layout_below="@id/title" android:layout_marginTop="10dp" android:layout_marginLeft="5dp"/> <TextView android:id="@+id/txtSurname" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Surname" android:gravity="center_vertical" android:textSize="10dp" android:layout_below="@id/txtName" android:layout_marginTop="10dp" android:layout_marginLeft="5dp" /> <TextView android:id="@+id/txtEmail" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Email" android:textSize="10dp" android:layout_marginTop="10dp" android:layout_alignParentRight="true" android:layout_marginRight="150dp" android:layout_alignBaseline="@id/txtName"/> <TextView android:id="@+id/txtAdd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Address" android:textSize="10dp" android:layout_alignLeft="@id/txtEmail" android:layout_alignBaseline="@id/txtSurname"/> </RelativeLayout> </android.support.v7.widget.CardView> </android.support.v7.widget.CardView> 

I took a link to this SO: Question question. I hope it solves your problem.