CardView Corner Radius

Question

Is there a way to make CardView only have corner radius at the top    lt android support v7 widget CardView     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  wrap content      app cardCornerRadius  10dp       gt

User · Answer

you can use the library OptionRoundCardview

User · Answer

An easy way to achieve this would be    1 Make a custom background resource  like a rectangle 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     this worked for me   The XML layout I made with top left and bottom right radius    lt shape xmlns android  http   schemas android com apk res android  gt   lt solid android color   color white    gt   lt corners android topLeftRadius  18dp  android bottomRightRadius  18dp    gt   lt  shape gt    In your case  you need to change only topLeftRadius as well as topRightRadius   If you have a layout that overlaps with the corners of the card view and has a different color maybe  then you might need a different background resource file for the layout and in the xml set this background resource to your layout   I tried and tested the above method  Hope this helps you

User · Answer

I wrote a drawable lib to custom round corner position  it looks like this     You can get this lib at here   https   github com mthli Slice

User · Answer

You can use this drawable xml and set as background to cardview      lt  xml version  1 0  encoding  UTF-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt       lt solid android color   ffffffff   gt        lt stroke android width  1dp          android color   ff000000            gt        lt padding android left  1dp          android top  1dp          android right  1dp          android bottom  1dp            gt        lt corners          android topLeftRadius  7dp          android topRightRadius  7dp   gt   lt  shape gt

User · Answer

If you re setting the card background programmatically  make use you use cardView setCardBackgroundColor   and not cardView setBackgroundColor   and make sure use using app cardPreventCornerOverlap  true  on the cardView xml  That fixed it for me   Btw  the above code  in quotations  is in Kotlin and not Java  Use the java equivalent if you re using Java

User · Answer

You need to do 2 things    1  Call setPreventCornerOverlap false  on your CardView   2  Put rounded Imageview inside CardView  About rounding your imageview  I had the same problem so I made a library that you can set different radii on each corner  Finally I got the result what I wanted like below   https   github com pungrue26 SelectableRoundedImageView

User · Answer

You can use the standard MaterialCard included in the official Material Components library   Use in your layout    lt com google android material card MaterialCardView         style   style MyCardView              gt    In your style use the shapeAppearanceOverlay attribute to customize the shape  the default corner radius is 4dp      lt style name  MyCardView  parent   style Widget MaterialComponents CardView  gt       lt item name  shapeAppearanceOverlay  gt  style ShapeAppearanceOverlay MaterialCardView Cut lt  item gt     lt  style gt       lt style name  ShapeAppearanceOverlay MaterialCardView Cut  parent    gt       lt item name  cornerFamily  gt rounded lt  item gt       lt item name  cornerSizeTopRight  gt 8dp lt  item gt       lt item name  cornerSizeTopLeft  gt 8dp lt  item gt       lt item name  cornerSizeBottomRight  gt 0dp lt  item gt       lt item name  cornerSizeBottomLeft  gt 0dp lt  item gt     lt  style gt    You can also use    lt com google android material card MaterialCardView      app shapeAppearanceOverlay   style ShapeAppearanceOverlay MaterialCardView Cut           gt    It is the result

User · Answer

Easiest way to achieve it in Android Studio is explained below   Step 1  Write below line in dependencies in build gradle   compile  com android support cardview-v7      Step 2  Copy below code in your xml file for integrating the CardView   For cardCornerRadius to work  please be sure to include below line in parent layout  xmlns card view  http   schemas android com apk res-auto   And remember to use card view as namespace for using cardCornerRadius property   For example   card view cardCornerRadius  4dp   XML Code    lt 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  200dp      android layout gravity  center      card view cardBackgroundColor   android color transparent      card view cardCornerRadius  0dp      card view cardElevation  3dp   gt        lt android support v7 widget CardView         xmlns card view  http   schemas android com apk res-auto          android id    id card view inner          android layout width  match parent          android layout height  200dp          android layout gravity  center          android layout marginTop  3dp          card view cardBackgroundColor   color green          card view cardCornerRadius  4dp          card view cardElevation  0dp   gt       lt  android support v7 widget CardView gt    lt  android support v7 widget CardView gt

User · Answer

There is an example how to achieve it  when the card is at the very bottom of the screen  If someone has this kind of problem just do something like that    lt android support v7 widget CardView     android layout width  match parent      android layout height  wrap content      android layout marginBottom  -5dp      card view cardCornerRadius  4dp  gt        lt SomeView         android layout width  wrap content          android layout height  wrap content          android layout marginBottom  5dp  gt        lt  SomeView gt    lt  android support v7 widget CardView gt    Card View has a negative bottom margin  The view inside a Card View has the same  but positive bottom margin  This way rounded parts are hidden below the screen  but everything looks exactly the same  because the inner view has a counter margin

User · Answer

Unless you try to extend the Android CardView class  you cannot customize that attribute from XML    Nonetheless  there is a way of obtaining that effect   Place a CardView inside another CardView and apply a transparent background to your outer CardView and remove its corner radius   cornerRadios   0dp    Your inner CardView will have a cornerRadius value of 3dp  for example  Then apply a marginTop to your inner CardView  so its bottom bounds will be cut by the outer CardView  This way  the bottom corner radius of your inner CardView will be hidden    The XML code is the following     lt 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  200dp      android layout gravity  center      card view cardBackgroundColor   android color transparent      card view cardCornerRadius  0dp      card view cardElevation  3dp   gt        lt android support v7 widget CardView         xmlns card view  http   schemas android com apk res-auto          android id    id card view inner          android layout width  match parent          android layout height  200dp          android layout gravity  center          android layout marginTop  3dp          card view cardBackgroundColor   color green          card view cardCornerRadius  4dp          card view cardElevation  0dp   gt       lt  android support v7 widget CardView gt   lt  android support v7 widget CardView gt    And the visual effect is the following     Always put your content in your Inner CardView  Your outer CardView serves only the purpose of  hiding  the bottom Rounded Corners of the inner CardView

User · Answer

You can put your ImageView inside a CardView  and add those properties to the ImageView   android cropToPadding  true  android paddingBottom  15dp    That way you will get rid of the rounded bottom corner  but keep in mind that this comes in the price of having a small portion of your image cut off

User · Answer

NOTE  This here is a workaround if you want to achieve rounded corners at the bottom only and regular corners at the top  This will not work if you want to have different radius for all four corners of the cardview  You will have to use material cardview for it or use some third party library  Here s what seemed to work for me   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt RelativeLayout xmlns android  quot http   schemas android com apk res android quot      android layout width  quot match parent quot      android layout height  quot match parent quot      xmlns app  quot http   schemas android com apk res-auto quot      android background  quot  F9F9F9 quot  gt        lt androidx cardview widget CardView         android layout width  quot match parent quot          android layout height  quot wrap content quot  gt            lt LinearLayout             android layout width  quot match parent quot              android layout height  quot 200dp quot              android background  quot  drawable profile bg quot   gt        lt  androidx cardview widget CardView gt        lt androidx cardview widget CardView         android id  quot   id cvProfileHeader quot          android layout width  quot match parent quot          android layout height  quot wrap content quot          app cardCornerRadius  quot 32dp quot  gt                lt LinearLayout             android layout width  quot match parent quot              android layout height  quot 280dp quot              android orientation  quot vertical quot              android background  quot  drawable profile bg quot              android id  quot   id llProfileHeader quot              android gravity  quot center horizontal quot  gt                lt  --Enter your code here-- gt            lt  LinearLayout gt            lt  androidx cardview widget CardView gt    lt  RelativeLayout gt   There s two cardview s in all  The second cardview is the one that will have rounded corners  on all sides as usual  and will hold all other subviews under it  The first cardview above it is also at the same level  of elevation   and has the same background but is only about half the height of the second cardview and has no rounded corners  just the usual sharp corners   This way I was able to achieve partially rounded corners on the bottom and normal corners on the top  But for all four sides  you may have to use the material cardview  You could do the reverse of this to get rounded corners at the top and regular ones at the bottom  i e  let the first cardview have rounded corners and the second cardview have regular corners

User · Answer

dependencies  compile  com android support cardview-v7 23 1 1       lt android support v7 widget CardView     android layout width  80dp      android layout height  80dp      android elevation  12dp      android id    id view2      app cardCornerRadius  40dp      android layout centerHorizontal  true      android innerRadius  0dp      android shape  ring      android thicknessRatio  1 9  gt       lt ImageView         android layout height  80dp          android layout width  match parent          android id    id imageView1          android src   drawable Your image          android layout alignParentTop  true          android layout centerHorizontal  true  gt       lt  ImageView gt   lt  android support v7 widget CardView gt

[android] CardView Corner Radius

Examples related to android

Examples related to android-appcompat

Examples related to android-cardview