Changing Tint Background color of UITabBar

Question

The UINavigationBar and UISearchBar both have a tintColor property that allows you to change the tint color  surprising  I know  of both of those items   I want to do the same thing to the UITabBar in my application  but have found now way to change it from the default black color   Any ideas

User · Answer

UITabBar appearance  setTintColor  UIColor redColor       UITabBar appearance  setBarTintColor  UIColor yellowColor

User · Answer

There are some good ideas in the existing answers  many work slightly differently and what you choose will also depend on which devices you target and what kind of look you re aiming to achieve  UITabBar is notoriously unintuitive when it come to customizing its appearance  but here are a few more tricks that may help   1   If you re looking to get rid of the glossy overlay for a more flat look do   tabBar backgroundColor    UIColor darkGrayColor      this will be your background  tabBar subviews 0  removeFromSuperview      this gets rid of gloss   2   To set custom images to the tabBar buttons do something like   for  UITabBarItem  item in tabBar items        item setFinishedSelectedImage selected withFinishedUnselectedImage unselected        item setImageInsets UIEdgeInsetsMake 6  0  -6  0        Where selected and unselected are UIImage objects of your choice  If you d like them to be a flat colour  the simplest solution I found is to create a UIView with the desired backgroundColor and then just render it into a UIImage with the help of QuartzCore  I use the following method in a category on UIView to get a UIImage with the view s contents   -  UIImage   getImage       UIGraphicsBeginImageContextWithOptions self bounds size  NO    UIScreen mainScreen scale          self layer  renderInContext UIGraphicsGetCurrentContext         UIImage  viewImage   UIGraphicsGetImageFromCurrentImageContext        UIGraphicsEndImageContext        return viewImage      3  Finally  you may want to customize the styling of the buttons  titles  Do   for  UITabBarItem  item in tabBar items        item setTitleTextAttributes   NSDictionary dictionaryWithObjectsAndKeys                   UIColor redColor   UITextAttributeTextColor                   UIColor whiteColor   UITextAttributeTextShadowColor                   NSValue valueWithUIOffset UIOffsetMake 0  1    UITextAttributeTextShadowOffset                   UIFont boldSystemFontOfSize 18   UITextAttributeFont              nil  forState UIControlStateNormal       This lets you do some adjustments  but still quite limited  Particularly  you cannot freely modify where the text is placed within the button  and cannot have different colours for selected unselected buttons  If you want to do more specific text layout  just set UITextAttributeTextColor to be clear and add your text into the selected and unselected images from part  2

User · Answer

iOS 5 has added some new appearance methods for customising the look of most UI elements   You can target every instance of a UITabBar in your app by using the appearance proxy    For iOS 5   6     UITabBar appearance  setTintColor  UIColor redColor      For iOS 7 and above  please use the following     UITabBar appearance  setBarTintColor  UIColor redColor      Using the appearance proxy will change any tab bar instance throughout the app  For a specific instance  use one of the new properties on that class   UIColor  tintColor     iOS 5 6 UIColor  barTintColor     iOS 7  UIColor  selectedImageTintColor  UIImage  backgroundImage  UIImage  selectionIndicatorImage

User · Answer

Swift 3 0 answer   from Vaibhav Gaikwad   For changing color of unselect icons of tabbar   if  available iOS 10 0               UITabBar appearance   unselectedItemTintColor   UIColor white       else              Fallback on earlier versions         for item in self tabBar items                item image   item image  withRenderingMode UIImageRenderingMode alwaysOriginal                For changing text color only   UITabBarItem appearance   setTitleTextAttributes  NSForegroundColorAttributeName  UIColor white   for   normal   UITabBarItem appearance   setTitleTextAttributes  NSForegroundColorAttributeName  UIColor red  for   selected

User · Answer

for me its very simple to change the color of Tabbar like  -   self TabBarController tabBar setTintColor  UIColor colorWithRed 0 1294 green 0 5686 blue 0 8353 alpha 1 0       self TabBarController tabBar setTintColor  UIColor  YOUR COLOR      Try this

User · Answer

Hi There am using iOS SDK 4 and i was able to solve this issue with just two lines of code and it s goes like this  tBar backgroundColor    UIColor clearColor   tBar backgroundImage    UIImage imageNamed   your-png-image png      Hope this helps

User · Answer

Following is the perfect solution for this  This works fine with me for iOS5 and iOS4     ---- For providing background image to tabbar UITabBar  tabBar    tabBarController tabBar     if   tabBar respondsToSelector  selector setBackgroundImage              ios 5 code here      tabBar setBackgroundImage  UIImage imageNamed   image png        else          ios 4 code here     CGRect frame   CGRectMake 0  0  480  49       UIView  tabbg view     UIView alloc  initWithFrame frame       UIImage  tabbag image    UIImage imageNamed   image png        UIColor  tabbg color     UIColor alloc  initWithPatternImage tabbag image       tabbg view backgroundColor   tabbg color       tabBar insertSubview tabbg view atIndex 0

User · Answer

On iOS 7     UITabBar appearance  setBarTintColor  UIColor colorWithRed  38 0 255 0  green  38 0 255 0  blue  38 0 255 0  alpha 1 0      I also recommend setting first depending on your visual desires     UITabBar appearance  setBarStyle UIBarStyleBlack     The bar style puts a subtle separator between your view content and your tab bar

User · Answer

When you just use addSubview your buttons will lose clickability  so instead of    self tabBar  addSubview v     use     self tabBar  insertSubview v atIndex 0

User · Answer

self tabBar  insertSubview v atIndex 0   works perfectly for me

User · Answer

Swift 3 using appearance from your AppDelegate do the following   UITabBar appearance   barTintColor   your color

User · Answer

I have an addendum to the final answer   While the essential scheme is correct  the trick of using a partially transparent color can be improved upon   I assume that it s only for letting the default gradient to show through   Oh  also  the height of the TabBar is 49 pixels rather than 48  at least in OS 3   So  if you have a appropriate 1 x 49 image with a gradient  this is the version of viewDidLoad you should use   -  void viewDidLoad         super viewDidLoad         CGRect frame   CGRectMake 0  0  480  49       UIView  v     UIView alloc  initWithFrame frame       UIImage  i    UIImage imageNamed   GO-21-TabBarColorx49 png        UIColor  c     UIColor alloc  initWithPatternImage i       v backgroundColor   c       c release         self tabBar  addSubview v        v release

User · Answer

There is no simple way to do this  you basically need to subclass UITabBar and implement custom drawing to do what you want  It is quite a bit of work for the effect  but it may be worth it  I recommend filing a bug with Apple to get it added to a future iPhone SDK

User · Answer

v setBackgroundColor ColorwithRed  Green  Blue

User · Answer

I have been able to make it work by subclassing a UITabBarController and using private classes    interface UITabBarController  private  -  UITabBar   tabBar   end   implementation CustomUITabBarController   -  void viewDidLoad        super viewDidLoad        CGRect frame   CGRectMake 0 0  0 0  self view bounds size width  48       UIView  v     UIView alloc  initWithFrame frame        v setBackgroundColor kMainColor        v setAlpha 0 5         self tabBar  addSubview v        v release       end

User · Answer

if   tabBar respondsToSelector  selector setBackgroundImage              ios 5 code here      tabBar setBackgroundImage  UIImage imageNamed   image png        else          ios 4 code here     CGRect frame   CGRectMake 0  0  480  49       UIView  tabbg view     UIView alloc  initWithFrame frame       UIImage  tabbag image    UIImage imageNamed   image png        UIColor  tabbg color     UIColor alloc  initWithPatternImage tabbag image       tabbg view backgroundColor   tabbg color       tabBar insertSubview tabbg view atIndex 0

User · Answer

Another solution  which is a hack  is to set the alpha on the tabBarController to 0 01 so that it is virtually invisible yet still clickable  Then set a an ImageView control on the bottom of the MainWindow nib with your custom tabbar image underneath the alpha ed tabBarCOntroller   Then swap the images  change colors or hightlight when the tabbarcontroller switches views     However  you lose the     more  and customize functionality

User · Answer

for just background color   Tabbarcontroller tabBar barTintColor  UIColor redcolour     or this in App Delegate    UITabBar appearance  setBackgroundColor  UIColor blackColor      for changing color of unselect icons of tabbar   For iOS 10      this code need to be placed on home page of tabbar     for UITabBarItem  item in self tabBarController tabBar items        item image    item image imageWithRenderingMode UIImageRenderingModeAlwaysOriginal       Above iOS 10      this need to be in appdelegate didFinishLaunchingWithOptions   UITabBar appearance  setUnselectedItemTintColor  UIColor blackColor

[ios] Changing Tint / Background color of UITabBar

Examples related to ios

Examples related to iphone

Examples related to uitabbarcontroller

Examples related to uitabbar