Adding rounded corner and drop shadow to UICollectionViewCell

Question

So I already went through various posts on adding 2nd view for adding shadow, but I still cannot get it to work if I want to add it in UICollectionViewCell. I subclassed UICollectionViewCell, and here is my code where I add various UI elements to the cell's content view and adding shadow to the layer:

[self.contentView setBackgroundColor:[UIColor whiteColor]];

self.layer.masksToBounds = NO;
self.layer.shadowOffset = CGSizeMake(0, 1);
self.layer.shadowRadius = 1.0;
self.layer.shadowColor = [UIColor blackColor].CGColor;
self.layer.shadowOpacity = 0.5;
[self.layer setShadowPath:[[UIBezierPath bezierPathWithRect:self.bounds] CGPath]];

I would like to know how to add rounded corner and shadow to UICollectionViewCell.

I think you need to improve your question to understand by others. It's really messy what u have asked — Dinesh Raja, Nov 22 '12 at 04:49
ok updated, i just want to know how to add rounded corner and shadow to UICollectionViewCell — Vincent Yiu, Nov 22 '12 at 06:12
Slight aside - use shadowRadius OR setShadowPath, no point in doing both as they are essentially the same instruction in this context (all rounded corners). A shadowpath is necessary where you want more complex shapes or rounded corners not applied to all corners. — Oly Dungey, Aug 20 '14 at 12:35

score 209 · Answer 1 · edited Apr 06 '18 at 03:34

209

Neither of these solutions worked for me. If you place all your subviews into the UICollectionViewCell content view, which you probably are, you can set the shadow on the cell's layer and the border on the contentView's layer to achieve both results.

cell.contentView.layer.cornerRadius = 2.0f;
cell.contentView.layer.borderWidth = 1.0f;
cell.contentView.layer.borderColor = [UIColor clearColor].CGColor;
cell.contentView.layer.masksToBounds = YES;

cell.layer.shadowColor = [UIColor blackColor].CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 2.0f);
cell.layer.shadowRadius = 2.0f;
cell.layer.shadowOpacity = 0.5f;
cell.layer.masksToBounds = NO;
cell.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:cell.contentView.layer.cornerRadius].CGPath;

Swift 3.0

self.contentView.layer.cornerRadius = 2.0
self.contentView.layer.borderWidth = 1.0
self.contentView.layer.borderColor = UIColor.clear.cgColor
self.contentView.layer.masksToBounds = true

self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 2.0)
self.layer.shadowRadius = 2.0
self.layer.shadowOpacity = 0.5
self.layer.masksToBounds = false
self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.contentView.layer.cornerRadius).cgPath

edited Apr 06 '18 at 03:34

andrewtweber

24,520
22
88
110

answered Aug 25 '14 at 19:44

Mike Sabatini

2,541
1
17
10

11

This worked well for me after I added `cell.layer.backgroundColor = [UIColor clearColor].CGColor;` – nacross Dec 19 '14 at 04:41
2

Any idea why this only rounds my top corners? – user3344977 Jan 13 '15 at 19:30
@user3344977 maybe the bottom is being clipped? As in the corners are rounded, but its beneath the visible portion of the cell – CoderNinja Jun 05 '15 at 06:28
5

I find that this rounds my top corners and not my bottom corners as well. – fatuhoku Nov 19 '15 at 15:03
2

How do you get the corners to stay round when you select/deselect/move cells? My corners go square anytime I breathe on the cell after it initially draws correctly. – Adrian Mar 08 '17 at 13:15
`self.` do you set it in your custom cell view? – user25 Feb 27 '18 at 09:21
A black shadow with % opacity is better than a light gray shadow – andrewtweber Apr 06 '18 at 03:34
I only got my top corners rounded. The fix was the solution post by @nacross, just add `layer.backgroundColor = UIColor.clear.cgColor` – Massimo Polimeni May 16 '18 at 09:00
what is the purpose of setting a clear color border there and setting `self.layer.masksToBounds = false`? – AppsDev Jun 26 '18 at 12:39
On a smaller device like iPhone 5s, the shadow does not display correctly. The entire shadow moves to the right side of the cell and becomes extremely dark. Anyone else notice this behavior and know of a fix? – Christopher Smit Aug 21 '18 at 06:24
This worked for me like a charm. Thanks Mike & andrewtweber – Noor Jul 10 '19 at 14:44
I think setting `borderWidth` and `borderColor` is not needed if the color is clear. – Tung Fam Oct 24 '19 at 19:26

score 36 · Answer 2 · edited Mar 29 '19 at 17:40

36

Swift 3 version:

cell.contentView.layer.cornerRadius = 10
cell.contentView.layer.borderWidth = 1.0

cell.contentView.layer.borderColor = UIColor.clear.cgColor
cell.contentView.layer.masksToBounds = true

cell.layer.shadowColor = UIColor.gray.cgColor
cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
cell.layer.shadowRadius = 2.0
cell.layer.shadowOpacity = 1.0
cell.layer.masksToBounds = false
cell.layer.shadowPath = UIBezierPath(roundedRect:cell.bounds, cornerRadius:cell.contentView.layer.cornerRadius).cgPath

edited Mar 29 '19 at 17:40

Bhaumik

1,218
1
11
20

answered Oct 20 '16 at 18:04

Torre Lasley

7,243
3
24
12

I need to add a shadow effect to the right corner and bottom of each cell, and the way the code above works, it fills the cell with a shadowy color... – Joe Sene Jan 04 '17 at 11:34

score 28 · Answer 3 · edited Apr 19 '19 at 12:03

28

In case it helps: Here is the swift for rounding the corners:

cell.layer.cornerRadius = 10
cell.layer.masksToBounds = true

with cell being a variable controlling the cell: often, you will use this in override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell

Enjoy!

edited Apr 19 '19 at 12:03

Iulian Onofrei

9,188
10
67
113

answered Oct 04 '15 at 13:22

rocket101

7,369
11
45
64

score 26 · Answer 4 · edited Sep 23 '20 at 05:58

Here's my answer, close to the others, but I add a corner radius to the layer otherwise the corners won't fill in correctly. Also, this makes a nice little extension on UICollectionViewCell.

extension UICollectionViewCell {
    func shadowDecorate() {
        let radius: CGFloat = 10
        contentView.layer.cornerRadius = radius
        contentView.layer.borderWidth = 1
        contentView.layer.borderColor = UIColor.clear.cgColor
        contentView.layer.masksToBounds = true
    
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 1.0)
        layer.shadowRadius = 2.0
        layer.shadowOpacity = 0.5
        layer.masksToBounds = false
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
        layer.cornerRadius = radius
    }
}

You can call it in collectionView(_:cellForItemAt:) of the datasource once you dequeue your cell.

score 23 · Answer 5 · answered May 16 '18 at 09:05

23

Here the Swift 4 solution, updated to round every corners and not only the top corners:

contentView.layer.cornerRadius = 6.0
contentView.layer.borderWidth = 1.0
contentView.layer.borderColor = UIColor.clear.cgColor
contentView.layer.masksToBounds = true

layer.shadowColor = UIColor.lightGray.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2.0)
layer.shadowRadius = 6.0
layer.shadowOpacity = 1.0
layer.masksToBounds = false
layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius).cgPath
layer.backgroundColor = UIColor.clear.cgColor

answered May 16 '18 at 09:05

Massimo Polimeni

4,826
4
27
54

1

Works in swift 4,2 too , thanls – ShadeToD Feb 20 '19 at 11:47
4

I was looking for a solution...thanks younger Massimo :'D – Massimo Polimeni Mar 20 '19 at 11:44
1

Works with Swift 5.1 too, pretty nice! – SchmidtFx Mar 24 '21 at 09:24

score 17 · Answer 6 · answered Apr 19 '19 at 12:29

SWIFT 4.2

One should add this in your custom cell or cellForItemAt: If you are using the cellForItemAt: approach substitute self -> cell

        self.layer.cornerRadius = 10
        self.layer.borderWidth = 1.0
        self.layer.borderColor = UIColor.lightGray.cgColor

        self.layer.backgroundColor = UIColor.white.cgColor
        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOffset = CGSize(width: 2.0, height: 4.0)
        self.layer.shadowRadius = 2.0
        self.layer.shadowOpacity = 1.0
        self.layer.masksToBounds = false

This will give you a cell with a rounded border and a drop shadow.

score 16 · Answer 7 · edited Jan 05 '16 at 04:45

16

Set the layer attributes for the cell, not contentView.

CALayer * layer = [cell layer];
[layer setShadowOffset:CGSizeMake(0, 2)];
[layer setShadowRadius:1.0];
[layer setShadowColor:[UIColor redColor].CGColor] ;
[layer setShadowOpacity:0.5]; 
[layer setShadowPath:[[UIBezierPath bezierPathWithRect:cell.bounds] CGPath]];

edited Jan 05 '16 at 04:45

Pang

9,564
146
81
122

answered Dec 04 '12 at 18:45

inzonemobileDev

169
2

3

This doesn't seem to work for me. I use similar code for a uitableviewcell but it doesnt seem to work in a collectionviewcell. It's weird how the same code wont work in the cv cell. – Jason Dec 11 '12 at 09:57
An update to my above comment. I found that UICollectionViewCells seem to use a different shadow offset than UITableViewCells. If you aren't seeing a shadow, try changing the offset (increasing the Y value helped me). – Jason Dec 12 '12 at 00:53

score 8 · Answer 8 · answered Dec 31 '12 at 18:05

8

You simply need to (a) set cornerRadius and (b) set shadowPath to be a rounded rect with the same radius as cornerRadius:

self.layer.cornerRadius = 10;
self.layer.shadowPath = [[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.layer.cornerRadius] CGPath];

answered Dec 31 '12 at 18:05

Timothy Moose

9,895
3
33
44

2

Any idea why this only rounds my bottom corners? – user3344977 Jan 13 '15 at 19:34
Sounds like whatever layer you're rounding is partially obscured by something. Can't go any further than that without details. – Timothy Moose Jan 13 '15 at 19:37
Hey Tim, I just asked this question. I have a feeling you'll be able to get it quickly. Is it because I only have shadow on the bottom / "underneath" the cell? http://stackoverflow.com/q/27929735/3344977 – user3344977 Jan 13 '15 at 19:39

score 7 · Answer 9 · answered Jul 23 '19 at 17:50

Here's my take on the solution. It's similar to other answers, with one key difference. It doesn't create a path that's dependent on the bounds of the view. Anytime you create a path based on the bounds and provide it to the layer you can run into issues when it's resizing, and need to setup methods to update the path.

A simpler solution is to avoid using anything that is bounds dependent.

let radius: CGFloat = 10

self.contentView.layer.cornerRadius = radius
// Always mask the inside view
self.contentView.layer.masksToBounds = true

self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 1.0)
self.layer.shadowRadius = 3.0
self.layer.shadowOpacity = 0.5
// Never mask the shadow as it falls outside the view
self.layer.masksToBounds = false

// Matching the contentView radius here will keep the shadow
// in sync with the contentView's rounded shape
self.layer.cornerRadius = radius

Now when ever the cells size change the view API will do all the work internally.

The cleanest answer in my opinion. Love the idea of keeping radiuses in sync. — Kirill, Aug 12 '20 at 19:32
This works, but you may see a performance hit when trying to scroll. — teradyl, Apr 16 '22 at 17:53

score 6 · Answer 10 · edited Mar 29 '19 at 17:35

I had to make some slight changes for Swift:

cell.contentView.layer.cornerRadius = 2.0;
cell.contentView.layer.borderWidth = 1.0;
cell.contentView.layer.borderColor = UIColor.clearColor().CGColor;
cell.contentView.layer.masksToBounds = true;

cell.layer.shadowColor = UIColor.grayColor().CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 2.0);
cell.layer.shadowRadius = 2.0;
cell.layer.shadowOpacity = 1.0;
cell.layer.masksToBounds = false;
cell.layer.shadowPath = UIBezierPath(roundedRect:cell.bounds, cornerRadius:cell.contentView.layer.cornerRadius).CGPath;

score 6 · Answer 11 · answered Nov 21 '19 at 14:18

I use the following method to accomplish this kind of effect:

extension UICollectionViewCell {
    /// Call this method from `prepareForReuse`, because the cell needs to be already rendered (and have a size) in order for this to work
    func shadowDecorate(radius: CGFloat = 8,
                        shadowColor: UIColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.3),
                        shadowOffset: CGSize = CGSize(width: 0, height: 1.0),
                        shadowRadius: CGFloat = 3,
                        shadowOpacity: Float = 1) {
        contentView.layer.cornerRadius = radius
        contentView.layer.borderWidth = 1
        contentView.layer.borderColor = UIColor.clear.cgColor
        contentView.layer.masksToBounds = true

        layer.shadowColor = shadowColor.cgColor
        layer.shadowOffset = shadowOffset
        layer.shadowRadius = shadowRadius
        layer.shadowOpacity = shadowOpacity
        layer.masksToBounds = false
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
        layer.cornerRadius = radius
    }
}

frantenerelli · Answer 12 · 2018-10-27T21:53:26.477

The answer of Mike Sabatini works fine, if you configure the cell properties directly on the collectionView cellForItemAt, but if you try to set them in awakeFromNib() of a custom UICollectionViewCell subclass, you will end with a wrong bezierPath set on the devices that doesn't match the width and height previously set in your Storyboard (IB).

Solution for me was create a func inside the subclass of UICollectionViewCell and calling it from the cellForItemAt like this:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellID", for: indexPath) as? CustomCollectionViewCell{
        cell.configure())
        return cell
    }
    else {
        return UICollectionViewCell()
    }
}

And on the CustomCollectionViewCell.swift :

class CustomCollectionViewCell: UICollectionViewCell{
    func configure() {
    contentView.layer.cornerRadius = 20
    contentView.layer.borderWidth = 1.0
    contentView.layer.borderColor = UIColor.clear.cgColor
    contentView.layer.masksToBounds = true
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0, height: 2.0)
    layer.shadowRadius = 2.0
    layer.shadowOpacity = 0.5
    layer.masksToBounds = false
    layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius).cgPath}
 }

score 3 · Answer 13 · edited Mar 29 '19 at 17:38

This one worked for me

cell.contentView.layer.cornerRadius = 5.0
cell.contentView.layer.borderColor = UIColor.gray.withAlphaComponent(0.5).cgColor
cell.contentView.layer.borderWidth = 0.5

let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.darkGray.cgColor
border.frame = CGRect(x: 0, y: cell.contentView.frame.size.height - width, width:  cell.contentView.frame.size.width, height: cell.contentView.frame.size.height)

border.borderWidth = width
cell.contentView.layer.addSublayer(border)
cell.contentView.layer.masksToBounds = true
cell.contentView.clipsToBounds = true

score 2 · Answer 14 · edited Mar 29 '19 at 17:38

2

You can set shadow color, radius and offset in UICollectionViewDataSource method while creating a UICollectionViewCell

cell.layer.shadowColor = UIColor.gray.cgColor
cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
cell.layer.shadowRadius = 1.0
cell.layer.shadowOpacity = 0.5
cell.layer.masksToBounds = false

edited Mar 29 '19 at 17:38

Bhaumik

1,218
1
11
20

answered Jun 27 '18 at 13:00

Rahul Panzade

1,302
15
12

score 2 · Answer 15 · answered Feb 12 '20 at 06:06

2

I found an important thing: the UICollectionViewCell must have the backgroundColor as clear color in order to make these above work.

answered Feb 12 '20 at 06:06

azun

391
4
11

This is VERY important to achieve not cutting off shadow! Don't ignore this answer, thanks A LOT, man! – MarcinR Mar 08 '20 at 23:11

Justin · Answer 16 · 2021-12-27T14:05:04.887

1

Swift 5, Xcode 13, iOS 14

First config your collection as below:

self.collectionView.clipsToBounds = false

Then config your cell same as below:

override func awakeFromNib() {
    super.awakeFromNib()
    
    self.configView()
}
    
private func configView() {
    self.clipsToBounds = false
    self.backgroundColor = .systemBackground
    self.layer.cornerRadius = 10
    self.layer.shadowColor = UIColor.black.cgColor
    self.layer.shadowOffset = CGSize(width: 0, height: 0.0)
    self.layer.shadowRadius = 10
    self.layer.shadowOpacity = 0.2
}

Note to those two "clipToBounds = false" commands.

Just that.

edited Dec 27 '21 at 14:05

answered Dec 27 '21 at 13:39

Justin

1,786
20
21

it doesn't work, clipsToBounds = false on the cell will cancel the corner radius. You need to apply the corner radius on the contentView and shadow on the cell itself – Quentin Rth Jan 26 '22 at 11:26

score 0 · Answer 17 · answered Jul 14 '23 at 22:57

extension UICollectionViewCell {
    func shadowDecorate() {
        self.layer.cornerRadius = 10
        self.layer.borderWidth = 0.0
        self.layer.borderColor = UIColor.lightGray.cgColor

        self.layer.backgroundColor = UIColor.white.cgColor
        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
        self.layer.shadowRadius = 3.0
        self.layer.shadowOpacity = 0.5
        self.layer.masksToBounds = false
    }
}

Adding rounded corner and drop shadow to UICollectionViewCell

17 Answers17

Linked