[Ionic Tutorial] Tabs with custom active/inactive Icons


#1

Hello i tried alot so i must post this tutorial so future Projects doesnt need as much research as my project did.

Today ill show you how to create tabs like this:



One more thing before i start:
If you need my TabImages i have my GitHub Project for you linked on the bottom!

And one tip before i start:
If you want to use your own icons the please create images with 48x48 cause we will resize them anyway but its important for a better resolution.

Ok now lets start:
First go to your Main.html where your Activity starts or where you want to show the tabs.
In the ion content write this:

<ion-content padding>
  <ion-tabs color="androidprimary" [selectedIndex]="1">
  <ion-tab [root]="tab2Root" tabIcon="categories"></ion-tab>
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="hot"></ion-tab>
</ion-tabs>
</ion-content>

If you wonder what color i use its this in my variables.scss:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  white:      #fff,
  subtext:      #e0e0e0,
  androidprimary:  #141414,
  androidprimarydark: #0a0a0a
);

Ok so for now we got the tabs with the names: categories, home and hot.

Well now lets modify the Main.ts file of this html file so we can change sites with clicks on the tabs.
Write something like that:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';
import { Explore } from '../Explore/Explore';
import { Hot } from '../Hot/Hot';
import { Categories } from '../Categories/Categories';

@Component({
  selector: 'page-MainActivity',
  templateUrl: 'MainActivity.html'
})

export class MainActivity
{
  tab1Root: any = Explore;
  tab2Root: any = Hot;
  tab3Root: any = Categories;

  constructor(public navCtrl: NavController)
  {

  }
}

Notice that i have imported the sites on top of the ts file! Dont forgett it!
Change the directions to the folder and site names you have.
So now the thabs have ther specified pages so lets move on.

Now the importand step. Lets create the images for the tabs.
Import your images for the tabs in YourApp/src/assets/img/ .

Good now we need to modify the Main.scss for (to show the images in android, ios and browser).
Notice that ios stands for iOS Devices, md stands for your Browser and wp stands for your Android Devices in the scss.

.tabbar, .tabs-ios, .tabs-md , .tabs-wp{
    .tab-button-icon {
        background-repeat:no-repeat;
        background-position:center;
        height:24px;
        width:24px;
        background-size:contain;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        &:before {
            display:none;
        }
    }
}

.tabs-ios {
  a[aria-selected=false]{
     .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
      background-image: url(../assets/img/categories_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_inactive.png);
    }
  }
 a[aria-selected=true] {
   //führ eventuellen text
   //span {
      //color: #f00; //whatever colour you want to use for the text
    //}
    .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
      background-image: url(../assets/img/categories_active.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_active.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_active.png);
    }
  }
}

.tabs-md {
  a[aria-selected=false]{
     .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
      background-image: url(../assets/img/categories_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_inactive.png);
    }
  }

 a[aria-selected=true] {
   //führ eventuellen text
   //span {
      //color: #f00; //whatever colour you want to use for the text
    //}
    .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
      background-image: url(../assets/img/categories_active.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_active.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_active.png);
    }
  }
}

.tabs-wp {
  a[aria-selected=false]{
     .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label="categories"] {
      background-image: url(../assets/img/categories_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_inactive.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_inactive.png);
    }
  }

 a[aria-selected=true] {
   //führ eventuellen text
   //span {
      //color: #f00; //whatever colour you want to use for the text
    //}
    .tab-button-icon[ng-reflect-name=categories], .tab-button-icon[aria-label=categories] {
      background-image: url(../assets/img/categories_active.png);
    }
    .tab-button-icon[ng-reflect-name=home], .tab-button-icon[aria-label=home] {
      background-image: url(../assets/img/explore_active.png);
    }
    .tab-button-icon[ng-reflect-name=hot], .tab-button-icon[aria-label=hot] {
      background-image: url(../assets/img/hot_active.png);
    }
  }
}

Hell yeah now you have the exactly same tabs as i have.

Solution if your images only shows on Browser but not on Device:
Many people face that problem and im 99% of them its because the path of the images is wrong.
If you have your images in src/assets/img/ then this is the right path:
background-image: url(../assets/img/hot_active.png);
If not try to change it until you see your images on your device.

GitHub Project where you can find the Images and the Main files:
https://github.com/lukasrein97/Ionic2TabsWithCustomIcons

Cheers!


--prod --release hides tab icons
#2

Hi Lukas,

Thanks for the tutorial, worked like a charm. Just one thing you must add the “outline” in the .tab-button-icon[aria-label=“categories outline”] in iOS when a[aria-selected=false] otherwise is not going to show in the iOS device.

Best,
Alex.


#3

Ah ok ill add this to my code. Did you test it on native iOS or with ionic View? Because on iOS i only tested it with Ionic View.

Im glad that it worked like a charm for you :slight_smile:


#4

Yes I did !

On Android worked perfect and iOS just add “outline” for all the icons are not active.

Best,
Alex


#5

Ok perfect thanks for the info!


#7

Sure:

This is the iOS snippet:

.tabs-ios {
a[aria-selected=false]{
.tab-button-icon[ng-reflect-name=inicio], .tab-button-icon[aria-label=“home outline”] {
background-image: url(…/assets/tabIcons/home-off.svg);
}
.tab-button-icon[ng-reflect-name=explorar], .tab-button-icon[aria-label=“explore outline”] {
background-image: url(…/assets/tabIcons/explore-off.svg);
}
.tab-button-icon[ng-reflect-name=news], .tab-button-icon[aria-label=“news outline”] {
background-image: url(…/assets/tabIcons/news-off.svg);
}
.tab-button-icon[ng-reflect-name=user], .tab-button-icon[aria-label=“user outline”] {
background-image: url(…/assets/tabIcons/users-off.svg);
}
}
a[aria-selected=true] {
.tab-button-icon[ng-reflect-name=inicio], .tab-button-icon[aria-label=“home”] {
background-image: url(…/assets/tabIcons/home-on.svg);
}
.tab-button-icon[ng-reflect-name=explorar], .tab-button-icon[aria-label=explorar] {
background-image: url(…/assets/tabIcons/explore-on.svg);
}
.tab-button-icon[ng-reflect-name=news], .tab-button-icon[aria-label=news] {
background-image: url(…/assets/tabIcons/news-on.svg);
}
.tab-button-icon[ng-reflect-name=user], .tab-button-icon[aria-label=user] {
background-image: url(…/assets/tabIcons/users-on.svg);
}
}
}


#8

Thank you very much i tested it also native on iOS now and with Outline it works perfect.

Well i marked it as solution because i cant edit my tutorial anymore so people witch facing the same problem have the right solution below my tutorial to show inactive icons on iOS!

Thank you for facing and sloving the problem! :slight_smile:


#9

good call on the path only going up 1 folder instead of 2! I spent forever trying to figure that out. cheers


#10

If the Github link doesnt work anymore please look at this link: https://github.com/lukay97/Ionic2TabsWithCustomIcons


Ionic2 <ion-tab> add custom image in tab-icon
#11

on android it appears the icon but transparent I don’t know why ?


#12

Really awesome works like charm… THAAAAAAAAAAAAAAAAAAAAAAAAAAAANKSSSSSSSSSSSSSSSSS


#13

It doesn’t work anymore - can you share it again?


#14

@maxpaj what doesnt work anymore? please be more specific.


#15

WOW yes, I can see how confusing that was, sorry!

I meant the Github repo link. It gives me a 404.

https://github.com/lukay97/Ionic2TabsWithCustomIcons


#16

The link seems broken, is there a new source for this? Thanks.


#17

See: Theming your Ionic 3 App - Bespoke SVG icons