What happened to Android tabs default position? Ionic 2

Ionic Framework ionic-v3
1

Hi Guys, as far as I know the tabs by default according to the platform specification should appear in the bottom for android and on top for IOS. I wonder why does it now appear always for me in bottom regardless its for android or IOS. Does anyone have any idea?

2

In the app.js, add this:

.config(function($ionicConfigProvider, $sceDelegateProvider){
$ionicConfigProvider.tabs.position(‘bottom’);
$ionicConfigProvider.platform.android.tabs.position(‘bottom’);

3

Thanks for your reply, but I am having this problem on Ionic 2

4

The location of tabs was changed per the change in Material design. Tabs on Android are now located on the bottom.
https://material.io/guidelines/components/tabs.html#tabs-usage

Placement can be set via the tabsPlacement property:

2 Likes
5

Thanks Chris, that’s exactly what I meant… It should be on top, why does it appear for me in bottom? @ChrisGriiffith

6

Make sure you are running 2.0.0 of the framework and that you have not globally overridden that setting.

Quickly generate the sample tab template and see if it displays correctly.

7

Sorry… for now I’m working on Ionic 1 and I think this can work

8

I’m on version 2.2.1, and when i generated a new tab template project it also appeared in the bottom…

9

CLI 2.2.1
and Ionic is 2.0.0 according to package.json

10

According to the documentation is in the bottom on both platforms.

Placement
The position of the tabs relative to the content varies based on the mode. The tabs are placed at the bottom of the screen for iOS and Android, and at the top for Windows by default. The position can be configured using the tabsPlacement attribute on the component, or in an app’s config. See the Input Properties below for the available values of tabsPlacement. [1]

[1] Tabs - Ionic API Documentation - Ionic Framework

Try this code:

./src/app/app.module.ts

    IonicModule.forRoot(MyApp, {
      platforms: {
        android: {
          tabsPlacement: 'top',
        }
      }
    })
11

I misspoke earlier, the tabs are at the bottom per the MD spec. That is what I get for answering before coffee has taken hold.

1 Like
12

The MD spec has tabs at the top throughout, which change are you referring to?

13

This is what I was referring to :
https://material.io/guidelines/components/bottom-navigation.html

The short answer is in MD, tabs can live in either location.