How to create a UITableViewCell with a transparent background

Question

I'm trying to set the background color of a UITableViewCell to transparent. But nothing seems to work. I have some images/buttons inside the tableViewCell and I would like to make the white grouptableview background disappear to get a 'floating' effect for the images and buttons (as if they were not inside the tableview).

Any idea how this could be accomplished?

Titular

Answer 1

If both the other options didn't work try this

UIView *backView = [[[UIView alloc] initWithFrame:CGRectZero] autorelease];
backView.backgroundColor = [UIColor clearColor];
cell.backgroundView = backView;

Cannabis

myTable.backgroundColor = [UIColor clearColor]; worked for me! Thanks – Stranglehold

This worked for me as well, although I additionally had to use: cell.backgroundColor = [UIColor clearColor]; – Laine

I had to use cell.textLabel.backgroundColor=[UIColor clearColor] too! – Arthritis

Note: this method works when you want to also eliminate the BORDER around a UITableViewStyleGrouped styled cell. (this comment is to help google find this answer when looking for UITableViewStyleGrouped and clear.) – Electrify

Thanks! This worked for me, while cell.backgroundView.hidden = YES did not. – Pickaninny

This works. But please add that you have to background color to clear color before. – Wiltz

You don't have to create the background view. It is there by default. cell.backgroundView.background = [UIColor clearColor] is enough. You can also do self.backgroundColor = [UIColor clearColor]; , but this can be set in Interface Builder – Retrospection

Answer 2

This is actually answered in the docs of UITableViewCell. So while you do have to setup transparency on your controls, the actual cell background color must be set per below.

"Note: If you want to change the background color of a cell (by setting the background color of a cell via the backgroundColor property declared by UIView) you must do it in the tableView:willDisplayCell:forRowAtIndexPath: method of the delegate and not in tableView:cellForRowAtIndexPath: of the data source. Changes to the background colors of cells in a group-style table view has an effect in iOS 3.0 that is different than previous versions of the operating system. It now affects the area inside the rounded rectangle instead of the area outside of it."

https://developer.apple.com/documentation/uikit/uitableviewcell

Gschu

You saved my life. This is the only solution that really work. – Dullish

If there would be an Academy Award for Coders, you would be holding an Oscar now! – Ascensive

Answer 3

Start with these articles to get the background color correctly setup:

http://howtomakeiphoneapps.com/2009/03/how-to-add-a-nice-background-image-to-your-grouped-table-view/

http://pessoal.org/blog/2009/02/25/customizing-the-background-border-colors-of-a-uitableview/

Then try all the following lines:

[[cell contentView] setBackgroundColor:[UIColor clearColor]];
[[cell backgroundView] setBackgroundColor:[UIColor clearColor]];
[cell setBackgroundColor:[UIColor clearColor]];

There is more than just one view hiding in a UITableViewCell. This should make all of the ones in your way clear.

Illegitimacy

works perfectly... except one typo: setBbackgroundColor =>setBackgroundColor – Shoon

cell.contentView's backgroundColor seemed to be the real key for me. (Confirmed on iOS7 only) – Tertullian

you are awesome. +100 if i could – Catercousin

Answer 4

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{

    cell.backgroundColor = [UIColor clearColor];
    cell.backgroundView.backgroundColor = [UIColor clearColor];
}

Phone

If your table view has a background color and you want your cell to be transparent so you can see your table view's background color, this is the correct solution. – Overall

How is this not the ONLY answer. Works like a charm. – Seow

Answer 5

I have a simple solution

Objective-c version:

cell.backgroundColor = [UIColor clearColor];

Swift version:

cell.backgroundColor = UIColor.clearColor()

Ebracteate

but always set it inside - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath – Viosterol

Answer 6

By default the background of your UITableViewCell is white. Doing myCell.backgroundColor = [UIColor clearColor]; will make your UITableViewCell transparent BUT you will don't feel the difference because the UITableView (the contener of your UITableViewCell) also have a white background by default.

If you wanna see your UIView background you will have to make your cell and your table background transparent :

myTableView.backgroundColor = [UIColor clearColor];
myTableCell.backgroundColor = [UIColor clearColor];

Martin Magakian

Pedo

Answer 7

I had a problem where my custom tableviewcell backgroundimage was overlaid with a white label background, i tried everything and finally setting background to clear color in the viewWillAppear did the trick.

      - (void)viewWillAppear:(BOOL)animated
    {
[super viewWillAppear:animated];
    self.tableView.backgroundColor = [UIColor clearColor]; // if this is not here, cell background image is covered with a white rectangle :S
    }

and in the rowForCellAtIndexPath I set the background image:

 if(!cell) {
    cell = [[[UITableViewCell alloc] initWithFrame: ...
    UIImageView *cellBG = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cellbg.jpg"]];
    [cell setBackgroundView:cellBG];
    [cellBG release];
}

Grassplot

Answer 8

If you're using storyboards, make sure to uncheck "Opaque" for your prototype UITableViewCells

Lunatic

Answer 9

There are 3 steps:

1. cell.contentView.backgroundColor = UIColor.clear
2. Uncheck opaque check box for table view cell in attributes inspector in Drawing section. This you can find by clicking on the table view cell prototype in storyboard and opening the attribute inspector. Scroll down and you will find it.
3. Select Background as Clear Color from dropdown at same location as in step 2.
4. Run your app

Paperboy

Answer 10

Solution for Swift 5.1

let cell = tableView.dequeueReusableCell(withIdentifier: "cellIdentifier", for: indexPath)
cell.backgroundColor = UIColor.clear

Carpenter

Answer 11

After pulling hair out most of my hair, this turned out to be quite simple for xCode 13 / Swift 5.1. There are 2 things that need to be changed.

In your numberOfRowsInSection, add:

tableView.backgroundColor = UIColor.clear

so it looks something like this:

   func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        tableView.backgroundColor = UIColor.clear
        return 40
    }

Then in your cellForRowAt, add:

cell?.backgroundColor = UIColor.clear

so it looks like:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell")
    cell?.backgroundColor = UIColor.clear
    return cell!
}

Thats it. Couldnt believe my eyes when it worked. :)

Torrie

Answer 12

I'm late to the party, but will share my findings as they differ from all of the answers here. After spending 2 hours trying out different solutions, I managed to achieve table cell's transparency solely by tweaking two properties in the Interface Builder:

1. Set the table view background (close to the bottom of the Attributes inspector, in the View section) to Clear Color,
2. Set the Table View Cell background (again, in the View section) to Clear Color.

I didn't have to change the code, and the additional advantage for those still using the Interface Builder is that the table cell is displayed with transparent (not white) background, which is important when the cell's content items' color is white:

Informality

Answer 13

Here is my solution in Swift 4.1:

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.backgroundView = UIImageView(image: "Image")
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    cell.backgroundColor = UIColor.clear
{

Rehearing