Tuesday, June 5, 2012

Android: Tabs at the BOTTOM




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


Source: Tips4all

12 comments:

  1. 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>

    ReplyDelete
  2. 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>

    ReplyDelete
  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: http://code.google.com/p/android-custom-tabs/ ;
    Original explanation: http://joshclemm.com/blog/?p=136;
    Hope this helped.

    ReplyDelete
  4. 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...

    ReplyDelete
  5. 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.

    ReplyDelete
  6. Yes, see: http://www.anddev.org/viewtopic.php?p=21932, 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);


    }


    }

    ReplyDelete
  7. 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:

    http://unforsaken24.blogspot.com/2011/01/adding-tabs-in-android-and-placing-them.html

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

    1) Using relative layout
    2) Using Layout_weight attribute

    Please check the below link for more details.
    http://justkumar.blogspot.com/2011/09/tabs-at-bottom-of-tabactivity-by.html

    ReplyDelete
  9. There is a way to remove the line.

    1) Follow this tutorial:
    http://android.codeandmagic.org/2011/07/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.

    ReplyDelete
  10. I got a way to make the android tabbar like i-phone.Take alook at the tutorial:

    I-phone style tabbar in Android

    ReplyDelete
  11. I use one from the below site.
    it's working

    http://kpbird.blogspot.com/2011/05/androidbottom-tabbar-control.html

    ReplyDelete
  12. I have a problem related to the solution posted by @stormin986 (http://stackoverflow.com/a/2710404/535452) but it seems that I can't reply to his comment.

    The tabbar is perfectly fine in the bottom, but when I'm navigating through the 4-way directional buttons the focus sequence is wrong. The tabbar gets the focus when I press UP on the first component on the top of the screen. I can even go all the way around pressing UP, but when I'm on the last component on the bottom and press down, nothing happens.

    I tried setting nextFocusUp, Right, Left and Down on the current layout, on the tabhost content frame, on the list that's being shown, but nothing worked. I don't know what else I can try. Any ideas?

    ReplyDelete