Android - Tabs in bottom of screen

Question

I have been looking for about a day for a way to get my android application have tabs in the bottom of the screen.

On the Android Developer website in the Styles and Themes section, they seem to have the exact example of what I am trying to do, however they did not find it necessary to provide a decent example of this:

enter image description here

All the tips/solutions I find on the web are failing. I always seem to get the following butt-ugly layout where the tabs are very misplaced in the top of the screen next to the application name :-(

enter image description here

Does anyone have a clue how to accomplish this ?

Thank you so much in advance for any tips !

That are no tabs but a split ActionBar. You can read more about it in the Android Developer Guide (http://developer.android.com/guide/topics/ui/actionbar.html). — Ridcully, Sep 22 '13 at 14:15
@Wesley, This is a `Split Action Bar` view functionality. You can find some good example. You need to define attribute in `Android Manifest`. — , Sep 22 '13 at 14:15

score 12 · Accepted Answer · edited May 23 '17 at 12:32

12

I think these examples will be useful to you: Android Bottom tab bar example AND THIS

edited May 23 '17 at 12:32

Community

1
1

answered Sep 22 '13 at 14:25

NagarjunaReddy

8,621
10
63
98

6

Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Apr 09 '15 at 18:43

score 4 · Answer 2 · answered Sep 22 '13 at 14:30

4

Here is the two link of github that has implemented tab at bottom.

enter image description here

https://github.com/AdilSoomro/Iphone-Tab-in-Android

enter image description here

https://github.com/AdilSoomro/Raised-Center-Tab-in-Android

answered Sep 22 '13 at 14:30

Md. Monsur Hossain Tonmoy

11,045
2
22
19

score 2 · Answer 3 · edited May 23 '17 at 12:09

I use this layout for locate Tabs in bottom of screen:

?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="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0"/>
        <FrameLayout
            android:id="@+android:id/realtabcontent"
            android:background="@drawable/bg_main_app_gradient"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>
        <TabWidget
            android:id="@android:id/tabs"
            android:background="#EAE7E1"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"/>
    </LinearLayout>
</TabHost>

examle of code: https://stackoverflow.com/a/23150258/2765497

score 1 · Answer 4 · edited May 28 '15 at 09:42

I think you have not search enough for your problem because you are searching using the wrong keyword.

What you are showing in 1st image at bottom of gmail app there are 4 menu and 5th overflow menu and upper at top action bar

You can place a menu at the bottom using a simple property in the manifest; one single line on main activity which showing action bar

android:uiOptions="splitActionBarWhenNarrow"

Like this :

<activity
    android:name="com.example.HomeActivity"
    android:screenOrientation="portrait"
        android:uiOptions="splitActionBarWhenNarrow"
    android:theme="@style/Theme.Sherlock.Light" >
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

score 1 · Answer 5 · answered Sep 28 '15 at 15:54

1

Google does not recommend to have Tabs at the bottom.

See the following official design pattern guide from Android,
And look for the section "Don't use bottom tab bars"

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

answered Sep 28 '15 at 15:54

revolutionary

3,314
4
36
53

no, while this is recommended by Android / Google, this sounds really ridiculous to layout designers. Using tabs is not really bad after all. – Raptor Nov 16 '15 at 03:17
5

The latest Google+ app has tabs at the bottom of the screen, exactly in the way the doc says it shouldn't be used. – moyheen Jan 05 '16 at 01:36
3

http://www.theverge.com/2016/3/15/11236152/material-design-update-bottom-navigation-bar – turbandroid Mar 17 '16 at 04:28
2

Latest Google apps like **Photo** , **Google+** use buttom navigation – Amir Apr 01 '16 at 07:45
2

The section you're talking about looks like it has been removed from the page. – lorenzo Jul 25 '16 at 13:03
Previously Android Docs recommended "Not to use Bottom Tabs", but now they have improved layout design patterns and have started implementing BottomTabs in Google+ app... – Chintan Soni Aug 19 '16 at 05:56

score 1 · Answer 6 · answered Mar 21 '16 at 16:35

I wanted to post an update here. Bottom nav bars are now Android Canon. The main take-aways from this are:

1) Use bottom nav bars only for 3-5 icons. Any less, use tabs. Any more, use scrollable tabs (page down on that same link).

2) Avoid using a bottom nav bar and tabs together, and be sure the responsibilities of both are clearly separated if you do.

3) Bottom nav bars should be used for navigation not actions (use the ActionBar for those)

score 1 · Answer 7 · edited May 23 '17 at 11:46

1

With the introduction of Bottom navigation.

https://material.google.com/components/bottom-navigation.html

You can do this

https://stackoverflow.com/a/36033640/6207502

edited May 23 '17 at 11:46

Community

1
1

answered Jun 25 '16 at 07:13

Sudhir

127
1
12

score 0 · Answer 8 · answered Mar 25 '14 at 05:43

Its very simple....

For simple tab bar we use

<?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">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>

But in Bottom Tab bar we use

**

<?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_height="fill_parent"
        android:layout_width="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_alignParentBottom="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </RelativeLayout>
</TabHost>**

The main thing is

 android:layout_alignParentBottom=”true”;

score 0 · Answer 9 · answered Oct 02 '14 at 22:11

0

I came across your question seeking to do the same thing, however according to androids development guidelines, you should not ever have a tab bar at the bottom, since this is an iOS feature...

Android Development Standards

answered Oct 02 '14 at 22:11

Jeremie D

4,145
1
35
41

The funny this is that their own Gmail app used to have menus on the bottom – Han May 28 '15 at 09:28

score 0 · Answer 10 · answered Sep 07 '15 at 08:24

0

You seem to have the bottom bar a bit confused. That's not a tab bar. The bottom bar is for actions, not navigating screens. For example, in the screenshot of the Gmail app you posted above, the bottom bar allows the user to: Compose Email, Search, Tag, Refresh and More. Refer: http://developer.android.com/design/patterns/actionbar.html

Technically these buttons do navigate the user to other screens but, the tab bar is usually used to "switch" screens. For example viewing content by category.

Hmm, but in the latest version of the Gmail app they have these action buttons on top. Sigh...

answered Sep 07 '15 at 08:24

Vasim

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Null Reference Sep 07 '15 at 10:12
Thanks for the tip. The link is for reference only. – Vasim Sep 07 '15 at 10:23

Android - Tabs in bottom of screen

10 Answers10

Linked