Android having tabs at the bottom of screen?

Question

I am trying to place tabs on the bottom of the screen and have each tab display a different activity.

However from what I have read you can only use this on phones 3.0+.

When most phones I know are around 2.3 this seems a little ridiculous.

Anyone have any ideas?

Bottom tabs are an iOS design pattern. They can feel pretty foreign on Android: http://developer.android.com/design/patterns/pure-android.html — Krylez, Aug 07 '12 at 03:48
refer this http://stackoverflow.com/questions/2395661/android-tabs-at-the-bottom — KMI, Aug 07 '12 at 04:28

score 1 · Answer 1 · answered Aug 07 '12 at 03:36

This can be implemented using the android usual tab,just you have to do is add some extra codes in the xml.I hope this piece of code will help you for getting it done...

<TabHost 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@android:id/tabhost"
        android:background="@android:color/background_dark"

>

    <RelativeLayout
        android:id="@+id/LinearLayout01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

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

        <TabWidget
            android:id="@android:id/tabs"
            style="@style/customtab"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"

           >
        </TabWidget>
    </RelativeLayout>

</TabHost>

The style is here @style/customtab

   <style name="customtab" parent="@android:style/Widget.TabWidget">
            <item name="android:tabStripEnabled">false</item>
            <item name="android:tabStripLeft">@null</item>
            <item name="android:tabStripRight">@null</item>
        </style>

score 0 · Answer 2 · answered Aug 07 '12 at 03:05

0

You can best achieve this with fragments and a set of buttons at the bottom.

So when a button is click, do a fragment transition on the main content area for whatever the user has clicked.

That being said, tabs at the bottom are bad form on Android.

answered Aug 07 '12 at 03:05

Pork 'n' Bunny

6,740
5
25
32

Just did a little reading on fragments...can they be used with phones on versions <3.0? – droider Aug 07 '12 at 03:08
Yes, use the support library jar, this has support going back to 1.6. – Pork 'n' Bunny Aug 07 '12 at 03:18

score 0 · Answer 3 · answered Aug 07 '12 at 05:21

Use below XML code for bottom tab bar.

<?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"
        android:orientation="vertical"
        android:padding="3dp" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_above="@android:id/tabs"
            android:layout_weight="1" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" />
    </RelativeLayout>

</TabHost>

and Use below java code.

public class MainActivity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

                setContentView(R.layout.tab_screen);
        TabHost tabHost = getTabHost();

        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("Home", getResources().getDrawable(R.drawable.home)).setContent(new Intent(this, HomeActivity.class)));

        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("Second", getResources().getDrawable(R.drawable.invoice)).setContent(new Intent(this, SecondActivity.class)));

        tabHost.setCurrentTab(0);
    }
}

Android having tabs at the bottom of screen?

3 Answers3

Linked