Joseph Michael Pesch
VP Programming

xCode Custom Icons - Tab Bar Item - System Item Custom - Bar Item Image

by 14. October 2017 09:56

The steps below are for creating an app icon fro an xCode/Swift iOS application.  The xCode steps are specifically for setting a custom icon on a tab of a  tabbed application.  

I use Gimp for image editing and follow these steps to create the icon:

  1. Import (or create) the image you want to use as the tab bar icon. NOTE: For importing an existing image it's best to use a black and white image so that you don't have to remove colors. Also, for your starting image it's best to have 75x75 pixel image (or larger) as the large image, then it can easily be scaled down to medium (50x50) and standard (25x25).
  2. Set the background to 'Transparent' rather than white.
  3. Remove all white from the image so that it was just a black image with a transparent background.
  4. Resize the image to be a square with dimensions 75x75 pixels, export/save as .png file format and name imageName@3x.png
  5. Resize the image to be a square with dimensions 50x50 pixels, export/save as .png file format and name imageName@2x.png
  6. Resize the image to be a square with dimensions 25x25 pixels, export/save as .png file format and name imageName.png

In xCode I perform the following steps:

  1. Drag the images into xCode project.
  2. Highlight select the images in xCode project, right-click and select 'New Group from Selection', name the image group iconImageName.
  3. Select the desired tab on the storyboard view.
  4. From the properties, set the 'Tab Bar Item' => 'System Item' = 'Custom'.
  5. From the properties, set the 'Bar Item' => 'Image' = 'imageName.png'
  6. NOTE: Do not set the 'Selected Image' under the 'Tab Bar Item' (leave this blank).

Tags:

XCode