put tabs in the bottom of screen

Question

I want to put tabs at the bottom part of my screen . For this purpose I have the following code :

package info.androidhive.tabsswipe;

import info.androidhive.tabsswipe.adapter.TabsPagerAdapter;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity implements
        ActionBar.TabListener {

    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private ActionBar actionBar;
    // Tab titles
    private String[] tabs = { "Top Rated", "Games", "Movies" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initilization
        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar(); 
        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(mAdapter) ;
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        actionBar.setDisplayShowHomeEnabled(false);
        actionBar.setDisplayShowTitleEnabled(false);

        // Adding Tabs
        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));
        }

        /**
         * on swiping the viewpager make respective tab selected
         * */
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // on changing the page
                // make respected tab selected
                actionBar.setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // on tab selected
        // show respected fragment view
        viewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    }

}

By this code , I have the following layout :

package info.androidhive.tabsswipe;

import info.androidhive.tabsswipe.adapter.TabsPagerAdapter;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity implements
        ActionBar.TabListener {

    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private ActionBar actionBar;
    // Tab titles
    private String[] tabs = { "Top Rated", "Games", "Movies" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initilization
        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar(); 
        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(mAdapter) ;
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        actionBar.setDisplayShowHomeEnabled(false);
        actionBar.setDisplayShowTitleEnabled(false);

        // Adding Tabs
        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));
        }

        /**
         * on swiping the viewpager make respective tab selected
         * */
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // on changing the page
                // make respected tab selected
                actionBar.setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // on tab selected
        // show respected fragment view
        viewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    }

}

By this code , This is how the screen looks after compilation :

enter image description here

How can I put tabs at the bottom of the screen ?

score 15 · Answer 1 · answered Feb 04 '14 at 08:46

15

Actually it's against Android Design Guideline since at bottom there are soft/hard buttons like back button home button etc.

http://developer.android.com/design/patterns/pure-android.html

But if you insist on to put them at the bottom, you can implement it like GitHub example consists tabs in bottom, using FragmentTabHost.

https://github.com/rameshkec85/BottomTabsFragmentTabHost

answered Feb 04 '14 at 08:46

Priyank Patel

12,244
8
65
85

1

Material design actually suggests using the bottom bar navigation pattern - http://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-usage – enyciaa Mar 16 '16 at 11:07
@enyciaa That's not tab actually it's bottom navigation. It should be used for: Three to five top-level destinations of similar importance (Alternative: A [persistent navigation drawer](http://www.google.com/design/spec/patterns/navigation-drawer.html) accessible from anywhere in the app) – Priyank Patel Mar 16 '16 at 11:50

score 7 · Accepted Answer · answered Apr 28 '14 at 06:04

These sample xml code defines move tab to bottom of the screen:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_below="@android:id/tabs" >

                <FrameLayout
                    android:id="@+id/tab_home"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />

                <FrameLayout
                    android:id="@+id/tab_video"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />

                <FrameLayout
                    android:id="@+id/tab_audio"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>

                <FrameLayout
                    android:id="@+id/tab_blog"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>

                <FrameLayout
                    android:id="@+id/tab_gal"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>

                <FrameLayout
                    android:id="@+id/tab_more"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>
            </FrameLayout>

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"  //align parent bottom mainly used for move the tab to bottom of the screen.
                android:background="@drawable/ic_launcher"
                android:divider="@null" />

            <!-- android:background="#d8e49c" -->
        </RelativeLayout>
    </TabHost>

</LinearLayout>

my tab layouts appear to be covered by the tabs. Is this supposed to be like that? Even gravity.Top doesn't move my contents to the top, they stay at the bottom. What am i doing wrong? — user1651105, Jul 24 '14 at 17:41
I figured it out. For the frame layout it has to be `android:layout_above="@android:id/tabs"` not `android:layout_below="@android:id/tabs"`. — user1651105, Jul 24 '14 at 18:05

score 2 · Answer 3 · edited May 23 '17 at 11:53

2

with an action bar you will only be able to add tabs at the top, since that is the way android apps should look like. Having tabs at the bottom is purely ios style. and if you still wish to achieve the same look at :

this. Github source can be found here

edited May 23 '17 at 11:53

Community

1
1

answered Feb 04 '14 at 08:44

Rat-a-tat-a-tat Ratatouille

7,109
5
31
41

score 0 · Answer 4 · answered Mar 12 '14 at 10:05

0

Don't do this, tabs should always be at the top in Android.

answered Mar 12 '14 at 10:05

Mark Buikema

2,483
30
53

5

Instagram on Android uses the bottom tab bar. Ultimately you should not follow a rule for UI design, you should do what's best for the user regardless of what Google says to do. – mnearents Jan 29 '15 at 05:40
Obviously, Google's design guidelines are made to give the user the best experience. Instagram's app does not follow the guidelines at all, unfortunately. – Mark Buikema Jan 29 '15 at 09:20
Tab bar location is not user experience. It's maybe a usability issue, but hardly. User experience is the entire design, how it affects the user's mood, behavior, productivity, happiness, etc. So no, I don't think it's unfortunate at all. And the best experience isn't determined by a set, unchanging rule. It's determined through research, testing, and a whole bunch of other factors. Tell me how Instagram's user experience is hurt by their tab bar location. – mnearents Feb 18 '15 at 22:36
1

And to top that, hybrid apps are made to run on any device, regardless of OS. So what are the UI rules for those? Should they do top tab bar like android or bottom like iPhone? Googles interface guidelines are nice, but not Biblical. Users have enough experiences with non-native apps (web sites and hybrid apps) that straying slightly from Android interface guidelines isn't going to cause android users any pain at all. – mnearents Feb 18 '15 at 22:39
Ultimately its opinion. As a UX designer, I believe designers should consider guidelines but ultimately choose the best experience even if that means straying from guidelines at times. I will never be convinced that the Android Instagram app has a lesser user experience with tabs on the bottom than on the top. To tell people "don't do that" is very presumptuous. You have no idea what their app is and why they are doing it. A good artist knows the rules, but chooses when to follow and when to break them. If you're always following rules by the book, you're probably not creating great art. – mnearents Feb 19 '15 at 18:29
Its not about art, although. People get accustomed to what they see everywhere. Google design in my opinion should be strictly followed as far as you are designing something for Android and its users. A simple example would be to give an Windows 8 user an Ubuntu machine and ask him to upgrade the machine. Lost! – User3 Apr 29 '15 at 12:30
2

Please do not answer like this. When someone asks how to do something, "Don't do it" is not the best answer;) If you want to have the same user interface on all platforms (iOS,Android,Windows), if app really needs the bottom tab bar, you might want to add it. – kalan nawarathne Jul 03 '15 at 06:22
There is no case you want your app to look exactly the same on all platforms. Use the design guidelines of the platform you are designing for! – Mark Buikema Jul 03 '15 at 07:17
Material design actually suggests using the bottom bar navigation pattern - http://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-usage – enyciaa Mar 16 '16 at 11:14
@enyciaa This is actually a new pattern, it looks great. – Mark Buikema Mar 17 '16 at 08:22

score 0 · Answer 5 · edited May 23 '17 at 12:06

0

one more solution: https://stackoverflow.com/a/23150258/2765497 for support api<11 replace TabView to FragmentTabVeiw and add enother imports from Sherlock of Support library

edited May 23 '17 at 12:06

Community

1
1

answered Apr 18 '14 at 08:43

Oleksandr B

3,400
1
25
28

put tabs in the bottom of screen

5 Answers5

Linked