Moving UITabBarItem Image down?

Question

Normally on each tab of a UITabBar you have a small image and a title naming the tab. The image is positioned/centred towards the top of the tab to accommodate the title underneath. My question is: if you want to have a tabBar with just an image and no title is there a way to move the image down so it centers better within the tab?

I am using (see below) currently:

[tabBarItem setFinishedSelectedImage:tabSelected withFinishedUnselectedImage:tabUnselected];

but would prefer to use to larger image with no title, at the moment if I make the image bigger than about 70pixels@2x it starts edging off the top of the UITabBar whilst leaving a lot of unused space at the bottom.

Lukas Kukacka · Answer 1 · 2022-06-02T13:54:46.217

195

Try adjusting tabBarItem's imageInsets (for moving the icon image) and setting the controllers title to nil (so no title is displayed). Put something like this to -init or -viewDidLoad method in view controller:

Objective-C

self.tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
self.title = nil;

Swift

self.tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
self.title = nil

UITabBarItem is a subclass of UIBarItem which has UIEdgeInsets imageInsets property. Play a little with the insets until it looks good (depending on your tabbar icon images)

iPad specific adjustments

Tab Bar items on iPad are distributed horizontally (icon and label next to each other).

To adjust space between icon and label, adjust horizontal imageInsets instead of vertical ones.

edited Jun 02 '22 at 13:54

answered May 15 '13 at 15:15

Lukas Kukacka

7,604
2
25
50

This solved my problem. I made a subclass of UITabBarController and iterated self.tabBar.items. – Fogh Oct 14 '13 at 11:09
5

@Lukas: but this shrinks images. – Sourabh Bhardwaj Jan 10 '14 at 06:38
1

@Sourabh Doesn't shrink them for me – TigerCoding Mar 13 '14 at 16:03
@Javy I was doing it wrong earlier..its working fine now. appologies i didn't update the comment. – Sourabh Bhardwaj Mar 14 '14 at 05:30
8

The actual inset value is 5.5f if you need it to be pixel perfect. – user Aug 06 '14 at 05:00
where should this method be placed at? I mean I need to customise 3 tabbaritems but I can only customise one item in one viewDidLoad of the entry of tabs right? – Junchao Gu Jun 21 '15 at 06:48
this works fine, is there a way to also move the badge? I currently have a floating badge – rr1g0 Sep 18 '15 at 00:34
1

@rr1g0 Moving the badge to custom position is not possible. If you need custom position of a badge or custom badge appearance, you must implement it yourself – Lukas Kukacka Sep 18 '15 at 07:10
I used this too. Worked fine for iOS 9, 10 and 11 (iPhone 8). But with iPhone X it has no effect. Noting changed. Any Idea about that? – j0k4b0 Nov 23 '17 at 08:40
1

@Sourabh you have to offset the bottom with a negative value to not shrink the image. – Rmalmoe Aug 24 '18 at 17:36
any idea how can we achieve the same using SwiftUI? I use a tabView and have multiple TabItems inside – Natto May 18 '23 at 17:23

Neil Galiaskarov · Answer 2 · 2016-08-01T10:38:28.880

155

You can do it via storyboard too. Select your tabbaritem, go to size inspector and assign the appropriate insets.

*Demonstrated on Xcode, Version 7.3.1 (7D1014)

edited Aug 01 '16 at 10:38

answered Mar 20 '16 at 07:44

Neil Galiaskarov

5,015
2
27
46

nice and clean! – ken Nov 24 '17 at 13:58
Best of all the answers...Thank you so much @Neil Galiaskarov – Venkatesh Chejarla Nov 23 '18 at 12:07
Doesn't work for me – Eric Oct 29 '22 at 01:54

Brian · Answer 3 · 2017-01-16T13:35:40.893

55

Make a subclass of UITabBarController, and in its viewDidLoad:

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.viewControllers enumerateObjectsUsingBlock:^(UIViewController *vc, NSUInteger idx, BOOL *stop) {
        vc.tabBarItem.title = nil;
        vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0);
    }];
}

Swift 3:

for vc in self.viewControllers! {
    vc.tabBarItem.title = nil
    vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}

edited Jan 16 '17 at 13:35

answered Feb 14 '14 at 08:09

Brian

30,156
15
86
87

this worked for me. just that for swift the method enumerateObjectsUsingBlock is not available any more – Junchao Gu Jun 21 '15 at 06:54
don't subclass, instead put this in to your AppDelegate – Laszlo Apr 22 '16 at 14:13
1

putting this snippet in `AppDelegate` also works, but it's not obviously better than subclassing it. You can have your own preference though :) – Brian Apr 25 '16 at 03:26

score 11 · Answer 4 · answered Mar 31 '18 at 06:29

11

This worked for me

Swift 4

let array = tabBarController?.customizableViewControllers
for controller in array! {
    controller.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}

answered Mar 31 '18 at 06:29

Ahmadreza

6,950
5
50
69

score 10 · Answer 5 · answered Mar 15 '16 at 11:33

10

If you're using Xamarin, this works:

screen.TabBarItem.ImageInsets = new UIEdgeInsets(5, 0, -5, 0);
screen.TabBarItem.Title = "";

answered Mar 15 '16 at 11:33

Jelle

365
3
11

krish · Answer 6 · 2017-11-09T05:56:06.167

2

SWIFT 3.0

You can set image lnsets, set top,left,bottom and right according desing.

self.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: 0, right: 0)

edited Nov 09 '17 at 05:56

answered Nov 09 '17 at 05:10

krish

3,856
2
24
28

score 2 · Answer 7 · answered Dec 13 '17 at 10:13

2

For iOS 11 you need to override TraitCollection method apart from setting ImageInsets. Please add the method in your subclassed UITabBarController class

public override UITraitCollection TraitCollection {
 get {
  return UITraitCollection.FromHorizontalSizeClass(horizontalSizeClass: UIUserInterfaceSizeClass.Compact);
 }
}

answered Dec 13 '17 at 10:13

Prashant

244
2
16

Good tip that helped me solve an issue related to the image position for tab bar item on iPad and iOS 11. But it's too harsh to override the trait collection at the view controller level, it's better to subclass the UITabBar class and override the traitCollection property there. Also returning a trait collection with only the horizontal class, will drop other trait collection properties. `return UITraitCollection(traitsFrom: [ super.traitCollection, UITraitCollection(horizontalSizeClass: .compact)])` did the trick for me. – Emmanuel Paris Jan 09 '18 at 20:30

score 2 · Answer 8 · answered Dec 25 '18 at 17:55

In Swift 4.2, UIEdgeInsetsMake is depricated, instead we should use UIEdgeInsets,

let array = tabBarController?.customizableViewControllers
    for controller in array! {
        controller.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: -5, right: 0)
    }

score 1 · Answer 9 · answered Dec 09 '20 at 15:57

These didn't work for me, the only solution that worked was setting the alignmentRectInsets when adding the image. Here's what mine looked like:

let newsView = NewsViewController()
let newsIcon = UITabBarItem(title: nil, image: UIImage(systemName: "newspaper")?.withAlignmentRectInsets(UIEdgeInsets(top: 8.5, left: 0, bottom: -8.5, right: 0)), tag: 0)
newsView.tabBarItem = newsIcon
let viewControllers = [newsNavController]
self.viewControllers = viewControllers

score 1 · Answer 10 · answered Sep 03 '21 at 17:54

In 2021, Objective-C

I try all the approaches, no one is worked. Eventually I found that is because of using SF symbol as tabbaritem image. If I replace it with custom image, things worked.

    NSArray *tabItems = [self.tabBar items];
    // set tabItem icon, remove blue image with render mode set.
    UIImage *image1 = [[UIImage imageNamed:@"myIcon"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    
    // set title offset
    [tabItems[0] setTitlePositionAdjustment:UIOffsetMake(0, 20)];
    [tabItems[1] setTitlePositionAdjustment:UIOffsetMake(-20, 20)];
    [tabItems[2] setTitlePositionAdjustment:UIOffsetMake(20, 20)];
    [tabItems[3] setTitlePositionAdjustment:UIOffsetMake(0, 20)];

    // set image offset
    [tabItems[0] setImageInsets:UIEdgeInsetsMake(0, 0, -30, 0)];
    ...

For uitabbaritem image resolution, 50x50px for @2x, and 75x75px for @3x.

thanks a lot, i've been searching for hours and trying to figure out why it didn't worked for me because i was using sf symbols — dreampowder, Apr 19 '22 at 06:35
Use `imageWithoutBaseline()` to make the `imageInsets` work with SF symbols. — Oleg Barinov, Nov 02 '22 at 09:21

score 1 · Answer 11 · answered Nov 14 '22 at 08:53

1

//On tabbar viewDidload
override func viewDidLoad() {
    super.viewDidLoad()
    self.delegate = self
    
    tabBar.items![0].imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}

answered Nov 14 '22 at 08:53

Nurillo Umarov

11
2

how can i achieve this using swiftui? inside onAppear/init() i tried to do something like this UITabBar.appearance().items?[0].imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0) but that doesnt seem to work, any pointers? – Natto May 22 '23 at 05:34

Moving UITabBarItem Image down?

11 Answers11

In 2021, Objective-C

Linked