Placing my ActionBar at the bottom

Question

I followed a tutorial on getting actionbars in my app. But even when I put android:uiOptions="splitActionBarWhenNarrow" in my Manifest file it still keeps it at the top. Anyone has any ideas on what to do with this code?

XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" 
android:orientation="vertical"
android:background="#f0f0f0" 
android:baselineAligned="false">

<LinearLayout 
    android:id="@+id/myFragments"
    android:layout_width="match_parent"
    android:layout_height="0dp">

</LinearLayout>

</LinearLayout>

Manifest File:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.alotoftesting"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
    android:minSdkVersion="11"
    android:targetSdkVersion="15" />

<application
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme" >
    <activity
        android:name=".MainActivity"
        android:label="@string/title_activity_main" 
        android:uiOptions="splitActionBarWhenNarrow">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

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

</manifest>

Which SDK version are you running this on? I see your target is 15 and your minimum is 11. — Quinma, Aug 31 '12 at 18:03
I've never heard of being able to move the action bar. If you figure it out please post the answer here. — Andi Jay, Aug 31 '12 at 18:04
How many menu items do you have in your ActionBar? The `splitActionBarWhenNarrow` option basically allows overflow into a second, "split" action bar on the bottom if your menu items won't fit at the top. If all your menu items fit at the top you won't see the split layout. — twaddington, Aug 31 '12 at 18:09
@twaddington Oh thats what it means. I had the wrong idea on this. Thank you for the clarification. — JoeyL, Aug 31 '12 at 18:13
No problem. It violates the Android Design patterns to use a bottom tab bar. As others have said, I'd advise against it: http://developer.android.com/design/patterns/pure-android.html — twaddington, Aug 31 '12 at 19:16

score 7 · Answer 1 · edited May 23 '17 at 12:09

According to this comment:

How many menu items do you have in your ActionBar? The splitActionBarWhenNarrow option basically allows overflow into a second, "split" action bar on the bottom if your menu items won't fit at the top. If all your menu items fit at the top you won't see the split layout.

If you would like to have a custom bottom toolbar, please check my answer to this question (added below):

Creating custom bottom toolbar

I've already created a simple app which should demonstrate you how to begin

Creating a custom ViewGroup

Here's my activity_main.xml layout file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="0dp"
    tools:context="com.example.piotr.myapplication.MainActivity">

    <LinearLayout
        android:id="@+id/show_pdf"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@color/primary_material_light"
        android:orientation="horizontal">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/abc_ic_menu_cut_mtrl_alpha"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/abc_ic_menu_copy_mtrl_am_alpha"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/abc_ic_menu_selectall_mtrl_alpha"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/abc_ic_menu_paste_mtrl_am_alpha"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/abc_ic_menu_share_mtrl_alpha"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/abc_ic_menu_selectall_mtrl_alpha"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"/>
    </LinearLayout>

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="75dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"/>
</RelativeLayout>

As you can see my parent ViewGroup is RelativeLayout, which simply allows me to create a view at the bottom of screen.

Notice that I set layout padding to zero (I think: setting layout margin to zero here is not necessary, the same effect). If you'd change it, the toolbar won't use full width and it won't stick with bottom of the screen.

Then I added a Linear Layout with hardcoded height which is:

          android:layout_height="40dp"

I wanted it, that my bottom toolbar would take full available width so I set it as match_parent.

Next, I added some ImageButton views with images from Android library.

There you have two possibilities:

if you really want to have a toolbar like in above example just remove in every ImageButton view this line:
```
      android:layout_weight="1"
```

After removing weights and some buttons you would get a view pretty similar to expected:

if you want to take the full width and make every button with the same size use in your project weight as in this mine example.

Now let's go to my AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.example.piotr.myapplication"
          xmlns:android="http://schemas.android.com/apk/res/android">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:windowSoftInputMode="stateVisible|adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

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

In that file I'd added as you can see only one additional line:

         android:windowSoftInputMode="stateVisible|adjustResize">

to make sure that device keyboard won't hide my custom bottom toolbar.

From: How to add a bottom menu to Android activity

I think in that way you can also put tabs at the bottom if needed.

If you have any question please free to ask.

Hope it help

score 5 · Accepted Answer · answered Aug 31 '12 at 18:37

5

The google default action bar does not in any case appear on the bottom. As it seems others have mentioned, splitActionBarWhenNarrow only puts a subset of your ActionBar (like tabs, etc) on the bottom of the screen when the device is narrow. Unfortunately, if you want to implement an ActionBar like interface on the bottom of the screen, you'll have to implement it yourself (a quick search finds this example), as I haven't seen any Libraries to do this for you.

In all, though, I would recommend against it, as it violates the Seamlessness design principle in the design documents by breaking user expectations of where ActionBar type controls will be - An android user is ideally used to doing things a certain way, and you would need a pretty compelling reason to break that expectation.

answered Aug 31 '12 at 18:37

JRaymond

11,625
5
37
40

`splitActionBarWhenNarrow` move the action items (defined in a menu xml), not tabs to the bottom – ericn Feb 19 '14 at 07:03
As a designer & developer I have to disagree with you view in the last paragraph. While yes it would break Android UI guidelines, but who is to say that that is the only way to design the UI for an app. Guidelines help ensure that most of Android apps are recognizable, reducing the learning curve for users. But if you know what you're doing you could push the envelope a bit and experiment, as long as you dont hinder user experience that is. – AlexVPerl Jul 03 '15 at 16:13
@AlexVPerl as I said, your reasons should be compelling to break expectations - I can't rule out that there's a use case where having that bar there would make the app better. It should not be done lightly, however. Like you said, you should make sure you know what you're doing when you deviate from the guidelines – JRaymond Jul 04 '15 at 17:16
Actually Droid Edit, or any text editor I know places UI controls such as undo at the bottom. And navigation tabs at top – Sep 28 '19 at 01:22

Placing my ActionBar at the bottom

2 Answers2

Creating custom bottom toolbar

Creating a custom ViewGroup

Linked