How do i display the Tabs on the bottom in android?

ionic-v1
1

Hi guys,

I want to view my tabs at the bottom on my application. Currently they’re being displayed at the top on android.

I’ve added this to my code in app.js.

.config(function($stateProvider, $urlRouterProvider) { 
$ionicConfigProvider.tabs.position('bottom');
$stateProvider

I read online that this is meant to display the tabs at the bottom on the application but now my application loads a white screen. If somebody could link me in the right direction i would be very grateful. Thank you.

2

You need to terminate your function call as at the moment you have a syntax error there. See the last line below. Also the line that has “$stateProvider” on it is an incomplete statement.

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

I recommend using the F12 tools of your browser when you run your app using ionic serve. For development I find chrome being very helpful. It will tell you at what code line you have a syntax error. If you deploy to an android phone, you can use logcat with the right arguments to show the JavaScript errors from your phone in the command prompt. If your phone got Android 4.4 or newer it should support remote debugging through chrome, but I haven’t yet had the chance to try that out so I can’t tell you how. But it is probably easier than the logcat command linked above.

3

Thanks for the response. Why is the “$stateProvider” line an incomplete statement and what can i do to fix it?

Is this better?

var myapp = angular.module('myApp', ['ionic']);

myapp.config(function($stateProvider, $urlRouterProvider) { 
	myapp.config(function($ionicConfigProvider) {
	$ionicConfigProvider.tabs.position('bottom');	
})
1 Like
4

A statement has to do something. A variable assignment or calling a function for example. It may be that technically it is correct in JavaScript to just write a variable name like that - depends on the programming language if it is allowed - but it doesn’t perform anything.

I haven’t looked at the source page you refer to or other instructions on what you try to accomplish. But just looking at that line of code it looks like you have missed something. What is the right solution for you is documented to work and also work for you.

5

Thank you for telling me about that F12 error checker, it was really helpful. :slight_smile: Fixed it now.

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 
  $ionicConfigProvider.tabs.position('bottom'); 

  $stateProvider
  
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.announcements', {
    url: '/announcements',
    views: {
      'tab-announcements': {
        templateUrl: 'templates/tab-announcements.html',
        controller: 'announcementsCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'chatsCtrl'
        }
      }
    })

    .state('tab.photos', {
      url: '/photos',
      views: {
        'tab-photos': {
          templateUrl: 'templates/tab-photos.html',
          controller: 'photosCtrl'
        }
      }
    })

      .state('tab.profiles', {
      url: '/profiles',
      views: {
        'tab-profiles': {
          templateUrl: 'templates/tab-profiles.html',
          controller: 'profilesCtrl'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/announcements');

 });