How to place ionic tabs at the bottom of the screen?

Since the beta 14 of Ionic (http://blog.ionic.io/the-final-beta/), there are some config variables that now default to their platform values, which means that they will try to behave according to the platform that they are built on. In the case of tabs, for iOS the default is to display on bottom, and Android on top.

You can easily "hard set" the location for all platforms by setting the tabs.position function in the $ionicConfigProvider, inside your config function like this:

MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom'); // other values: top

}]);

You can check documentation here

To place the ionicFramework tabs at the bottom of the screen for android devices just open your app.js file, and under angular.module add the following lines of code:

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Hope this will help.

Update for Ionic 2 (cleaner/improved syntax):

In app.js:

@App({
  ...
  config: {
    tabbarPlacement: 'bottom',
  }
})

See Configs

Placing it in your app.js does the work.

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Ionic automatically takes platform configurations into account to adjust things like what transition style to use and whether tab icons should show on the top or bottom.

For example, In the case of tabs, for iOS the default is to display on bottom, and Android on top.

Note1 : It should be noted that when a platform is not iOS or Android, then it’ll default to iOS

Note2 : if you are developing on a desktop browser, it’s going to take on iOS default configs