Android: Tabs at the BOTTOM

Question

I've seen some chatter about this, but nothing definite. Is there a way to put the tabs in a TabWidget to the bottom of the screen? If so, how?

I've tried the following, but didn't work:

a) setting the tabwidget below the framelayout
b) setting the tabwidget's gravity to "bottom"

Thanks! llappall

[Look here](http://stackoverflow.com/a/6992662/593709) if you want iPhone like tab hosts. — Adil Soomro, Mar 21 '12 at 11:09
I use one from the below site. it's working [http://kpbird.blogspot.com/2011/05/androidbottom-tabbar-control.html](http://kpbird.blogspot.com/2011/05/androidbottom-tabbar-control.html) — Juliousraj, Sep 07 '11 at 05:27

score 272 · Answer 1 · edited Feb 16 '12 at 08:53

272

Here's the simplest, most robust, and scalable solution to get tabs on the bottom of the screen.

In your vertical LinearLayout, put the FrameLayout above the TabWidget
Set layout_height to wrap_content on both FrameLayout and TabWidget
Set FrameLayout's android:layout_weight="1"
Set TabWidget's android:layout_weight="0" (0 is default, but for emphasis, readability, etc)
Set TabWidget's android:layout_marginBottom="-4dp" (to remove the bottom divider)

Full code:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:layout_weight="1"/>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:layout_marginBottom="-4dp"/>

    </LinearLayout>

</TabHost>

edited Feb 16 '12 at 08:53

Arne Evertsson

19,693
20
69
84

answered Apr 25 '10 at 23:40

stormin986

7,672
15
42
54

3

The divider is actually hard coded in. I was trying to change the drawables used for the tabs and found it. Total bummer. – Jeremy Logan Apr 26 '10 at 15:58
You actually found where it's coded in the Widget, and there's NO interface to change it? Surprising and disappointing. So currently the only solution is manually drawing a divider above it, and having the line below the tabs remain... – stormin986 Apr 26 '10 at 22:10
My approach is a simple realignment of the tabs to the bottom. For a custom TabWidget with this and other features, it looks like this guy made one that supports tab vertical alignment, as well as some other customizations such as tab backgrounds / icons. – stormin986 Apr 26 '10 at 22:20
6

You should select this (or something) as the accepted answer. – JediPotPie Dec 14 '10 at 17:09
4

The only required deviation here from Google's standard TabWidget example is setting `layout_weight=1` on the FrameLayout. This allows the tab control to "claim" its height out of the LinearLayout first. – Nick Farina May 16 '11 at 22:26
To anyone not able to get this just right, I had to add android:layout_gravity="bottom" to the TabWidget to get this to work in 2.3.3. +1, thanks so much for this. – Oh Danny Boy Jul 01 '11 at 18:29
19

In order to get rid of the divider at the bottom of the TabWidget, simply add `android:layout_marginBottom="-5px"` to the TabWidget. This will move the TabWidget off the bottom of the screen 5 pixels, just enough so you don't see the divider. The FrameLayout will compensate in size so it works out perfectly. I'm not sure if the size of the divider changes on larger devices or not. You might have to use `dp` instead of `px`. – Jake Wilson Sep 16 '11 at 15:43
This is showing only one tab at the bottom. I don't know the reason may be other tabs are overlapping.Please Tell me what is the problem ? – abhishek ameta Jan 13 '12 at 07:05
Worked for me. Thanks @stormin986 and Jakobud .. I have up voted your answers. Thanks for the solution.. – Ankit Jan 21 '12 at 12:14
1

I've incorporated the remove-divider comment into the answer. – Arne Evertsson Feb 16 '12 at 08:55
That's the solution I came up with, but upon focus of an `EditText`, the `TabWidget` moves up. Any possible fix for that? – Sufian Apr 29 '13 at 05:53
[This solution] (http://stackoverflow.com/a/9324334/1276636) worked for me (for the problem I asked previously). – Sufian May 31 '13 at 06:27
how can you accomplish this by using the actionbar.NAVIGATION_MODE_TABS? – Jake Oct 21 '13 at 02:47

score 38 · Answer 2 · answered Aug 20 '10 at 18:31

Try it ;) Just watch the content of the FrameLayout(@id/tabcontent), because I don't know how it will handle in case of scrolling... In my case it works because I used ListView as the content of my tabs. :) Hope it helps.

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    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_alignParentTop="true" 
             android:layout_above="@android:id/tabs" />
    <TabWidget android:id="@android:id/tabs"
             android:layout_width="fill_parent" 
             android:layout_height="wrap_content"
             android:layout_alignParentBottom="true" />
    </RelativeLayout>
</TabHost>

+1 But did you notice the black/gray bar on top of the screen? How did you remove it? — ahmet emrah, Nov 03 '10 at 14:32
I am using this to post the tab widget onto the left side of the form. — mr.j05hua, May 16 '12 at 03:19

score 11 · Answer 3 · edited Apr 05 '13 at 13:08

11

There is a way to remove the line.

1) Follow this tutorial: android-tabs-with-fragments

2) Then apply the RelativeLayout change that Leaudro suggested above (apply the layout props to all FrameLayouts).

You can also add an ImageView to the tab.xml in item #1 and get a very iPhone like look to the tabs.

Here is a screenshot of what I'm working on right now. I still have some work to do, mainly make a selector for the icons and ensure equal horizontal distribution, but you get the idea. In my case, I'm using fragments, but the same principals should apply to a standard tab view.

enter image description here

edited Apr 05 '13 at 13:08

kyogs

6,766
1
34
50

answered Nov 02 '11 at 02:42

Brill Pappin

4,692
1
36
36

Its been a while since you posted this, but your link now says __Welcome to nginx!__ and nothing else is there on page. – DroidDev Sep 09 '14 at 12:47
1

It wasn't my site, sop I don't have control over it unfortunately. After this amount of time though, the systems have changed enough that you likely shouldn't be implementing this kind of interface for your Android users, they would expect things to work a little differently now. – Brill Pappin Sep 09 '14 at 16:00

score 3 · Answer 4 · edited Apr 05 '13 at 13:08

3

For all those of you that try to remove the separating line of the tabWidget, here is an example project (and its respective tutorial), that work great for customizing the tabs and thus removing problems when tabs are at bottom. Eclipse Project: android-custom-tabs ; Original explanation: blog; Hope this helped.

edited Apr 05 '13 at 13:08

kyogs

6,766
1
34
50

answered Apr 13 '11 at 13:04

Djumaka

500
4
10

score 3 · Answer 5 · answered Jul 29 '11 at 23:52

3

Not sure if it will work for all versions of Android (especially those with custom UI stuff), but I was able to remove the gray bar at the bottom by adding

 android:layout_marginBottom="-3dp"

to the TabWidget XML...

answered Jul 29 '11 at 23:52

Justin

6,564
6
37
34

score 3 · Answer 6 · edited Apr 05 '13 at 13:09

3

There are two ways to display tabs at the bottom of a tab activity.

Using relative layout
Using Layout_weight attribute

Please check the link for more details.

edited Apr 05 '13 at 13:09

Hugo Dozois

8,147
12
54
58

answered Sep 20 '11 at 16:31

MduSenthil

2,019
3
18
39

score 1 · Answer 7 · answered Mar 07 '10 at 18:12

This may not be exactly what you're looking for (it's not an "easy" solution to send your Tabs to the bottom of the screen) but is nevertheless an interesting alternative solution I would like to flag to you :

ScrollableTabHost is designed to behave like TabHost, but with an additional scrollview to fit more items ...

maybe digging into this open-source project you'll find an answer to your question. If I see anything easier I'll come back to you.

score 1 · Answer 8 · edited Apr 05 '13 at 13:11

Yes, see: link, but he used xml layouts, not activities to create new tab, so put his xml code (set paddingTop for FrameLayout - 0px) and then write the code:

public class SomeActivity extends ActivityGroup {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

    TabHost tab_host = (TabHost) findViewById(R.id.edit_item_tab_host); 

    tab_host.setup(this.getLocalActivityManager());

    TabSpec ts1 = tab_host.newTabSpec("TAB_DATE"); 
    ts1.setIndicator("tab1"); 
    ts1.setContent(new Intent(this, Registration.class)); 
    tab_host.addTab(ts1); 

    TabSpec ts2 = tab_host.newTabSpec("TAB_GEO"); 
    ts2.setIndicator("tab2"); 
    ts2.setContent(new Intent(this, Login.class)); 
    tab_host.addTab(ts2); 

    TabSpec ts3 = tab_host.newTabSpec("TAB_TEXT"); 
    ts3.setIndicator("tab3"); 
    ts3.setContent(new Intent(this, Registration.class)); 
    tab_host.addTab(ts3); 

    tab_host.setCurrentTab(0);      


}

}

score 1 · Answer 9 · edited Apr 05 '13 at 13:11

1

I was having the same problem with android tabs when trying to place them on the bottom of the screen. My scenario was to not use a layout file and create the tabs in code, I was also looking to fire activities from each tab which seemed a bit too complex using other approaches so, here is the sample code to overcome the problem:

adding-tabs-in-android-and-placing-them

edited Apr 05 '13 at 13:11

kyogs

6,766
1
34
50

answered Jan 29 '11 at 18:29

Zeeshan

19
1

score 0 · Answer 10 · edited May 23 '17 at 12:34

0

I recomend use this code for stable work, it optimized for nested fragments in tab (for example nested MapFragment) and tested on "do not keep activities": https://stackoverflow.com/a/23150258/2765497

edited May 23 '17 at 12:34

Community

1
1

answered Apr 18 '14 at 09:12

Oleksandr B

3,400
1
25
28

Android: Tabs at the BOTTOM

10 Answers10

Linked

Related