How can I force the Action Bar to be at the bottom in ICS?

Question

Ice Cream Sandwich (Android 4.0) adds the option of having the Action Bar at the bottom of the screen on phones, and that's something I'd love to have in an application of mine. The docs mention uiOptions="splitActionBarWhenNarrow" for when you want something, i.e. tabs, at the top and Action Bar shortcuts at the bottom. I've tried adding the line in the application manifest, as described in the docs, but haven't got it working thus far.

Here's an example:

Also, I noticed that on my Galaxy Nexus, which runs ICS, that the messaging application has the Action Bar the bottom and nothing but the title on the top, so it must be possible to somehow force the Action Bar to be at the bottom.

Any ideas?

Arcuate

You might be using appCompat. In ActionBarCompat this is done by setting the 'android.support.UI_OPTIONS' metadata field to 'splitActionBarWhenNarrow' in manifest. <meta-data android:name="android.support.UI_OPTIONS" android:value="splitActionBarWhenNarrow" /> – Barmen

Answer 1

I've tried adding the line in the application manifest, as described in the docs, but haven't got it working thus far.

It worked for me in this sample project. Here is the manifest:

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

  <application android:hardwareAccelerated="true"
               android:icon="@drawable/cw"
               android:label="@string/app_name">
    <activity android:label="@string/app_name"
              android:name=".InflationDemo"
              android:uiOptions="splitActionBarWhenNarrow">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
  </application>
  <uses-sdk android:minSdkVersion="4"
            android:targetSdkVersion="11" />
  <supports-screens android:anyDensity="true"
                    android:largeScreens="true"
                    android:normalScreens="true"
                    android:smallScreens="true"
                    android:xlargeScreens="true" />
</manifest>

Also, I noticed that on my Galaxy Nexus, which runs ICS, that the messaging application has the Action Bar the bottom and nothing but the title on the top, so it must be possible to somehow force the Action Bar to be at the bottom.

If you are referring to the conversation list, that is the ActionBar at the top and bottom, using splitActionBarWhenNarrow and the following setup code:

private void setupActionBar() {
    ActionBar actionBar = getActionBar();

    ViewGroup v = (ViewGroup)LayoutInflater.from(this)
        .inflate(R.layout.conversation_list_actionbar, null);
    actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM,
            ActionBar.DISPLAY_SHOW_CUSTOM);
    actionBar.setCustomView(v,
            new ActionBar.LayoutParams(ActionBar.LayoutParams.WRAP_CONTENT,
                    ActionBar.LayoutParams.WRAP_CONTENT,
                    Gravity.CENTER_VERTICAL | Gravity.RIGHT));

    mUnreadConvCount = (TextView)v.findViewById(R.id.unread_conv_count);
}

Airlike

Thanks, I'll have a look at it. – Arcuate

In other words, the fix is to always have an item in the top bar that prevents the bottom content from ever fitting in there, thus forcing everything into the bottom bar? – Propagate

@Matthias: I have not examined the contents of R.layout.conversation_list_actionbar, sorry. – Airlike

@Airlike hi I doesn't know how to do add these in programatically.you can check out my question here http://stackoverflow.com/questions/23821414/move-the-action-bar-tab-to-the-bottom-of-the-screen.please help me if you know how to solve these.Thank you – Determine

Answer 2

I'm using ActionBarSherlock and I had a similar problem. I solved it by putting android:uiOptions="splitActionBarWhenNarrow" within the <activity> tag, rather than the <application> tag.

For example, this worked:

<activity android:name=".my.Activity" 
          android:uiOptions="splitActionBarWhenNarrow"/>

and this didn't work:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.slowchop.etc"
          android:uiOptions="splitActionBarWhenNarrow">

Potaufeu

That almost certainly doesn't fix it, although I have no good explanation as to why this would even make a difference at all. Have you tried switching your app to landscape mode? Your bottom bar will probably appear at the top now, given there's enough room. A simple example for this is the ActionBarSherlock samples app. It declares splitActionBarWhenNarrow on the activity, but only in portrait mode it will actually show at the bottom of the screen. – Propagate

Answer 3

Edit here is the image :).

back again with a best results :). first thing you need to do is create a layout name it header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="@dimen/action_bar_height"
    android:layout_gravity="top"
    android:baselineAligned="true"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/share"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/action_bar_glyph_back" />

    <ImageView
        android:id="@+id/bright"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/action_bar_glyph_lux" />

    <ImageView
        android:id="@+id/rotate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/rotate" />

    <ImageView
        android:id="@+id/bright"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/action_bar_glyph_lux" />

    <ImageView
        android:id="@+id/rotate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/rotate" />

    <ImageView
        android:id="@+id/forwa"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/forward" />

</LinearLayout>

after that go to your MainActivity.class and create this method.

    private void setupActionBar() {
    ActionBar actionBar = getActionBar();
    //actionBar.setDisplayShowHomeEnabled(false);
    actionBar.setDisplayShowTitleEnabled(false);
    ViewGroup v = (ViewGroup)LayoutInflater.from(this)
        .inflate(R.layout.header, null);
    actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM,
            ActionBar.DISPLAY_SHOW_CUSTOM);
    actionBar.setCustomView(v,
            new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
                    ActionBar.LayoutParams.WRAP_CONTENT,
                    Gravity.CENTER_VERTICAL | Gravity.RIGHT));

} 

add setupActionBar(); to your onCreate Activity and run your app :).

now you have custom ActionBar with Dividers and Images P.S the divider is defined in the layout as an image background :).

Cablet

First of all , thanks a lot that really helped me except i am facing a problem that action bar layout doesnt fill the width of the screen. – Haematothermal

Answer 4

well you can't force to stay at the bottom on tablets but if phone yeah you can do that through the manifest. but you can do something is similar to bottom bar and top bar. will in this example i'll show you how to use merge to do that easily without the need of using android ActionBar.

first thing you need to create is your main_activity.xml in my case the main_activity.xml only contains ImageView on RelativeLayout. here is the code.

<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"
tools:context=".MainActivity" >
        <RelativeLayout android:id="@+id/RelativeLayout04"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:layout_alignParentTop="true">

    <include layout="@layout/header" />

</RelativeLayout>

<ImageView
    android:id="@+id/view"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_above="@+id/RelativeLayout03"
    android:layout_below="@+id/RelativeLayout04"
    android:layout_centerHorizontal="true"
    android:src="@android:drawable/alert_dark_frame" />

    <RelativeLayout android:id="@+id/RelativeLayout03"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:layout_alignParentBottom="true">

    <include layout="@layout/tryit" />

</RelativeLayout>

as you can see in above code, there are two merges i put inside the main_activity.xml one defined at bottom and one defined at the top. here is the fake bottom bar xml.

<merge xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout
    android:id="@+id/LinearLayout01"
    android:layout_width="match_parent"
    android:layout_height="80dp"
     android:layout_weight="0.14"
    android:background="@drawable/dock" >

    <ImageView
        android:id="@+id/dark"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="0.14" />

    <ImageView
        android:id="@+id/stock"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="0.14" />

    <ImageView
        android:id="@+id/open"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="0.14" />

    <ImageView
        android:id="@+id/border"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="0.15" />

    <ImageView
        android:id="@+id/color"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="0.15" 
        />

</LinearLayout>

i'm putting a fixed background to the LinearLayout and fake the ImageView for onClicks.

and here is the top bar. `

<LinearLayout
    android:id="@+id/LinearLayout02"
    android:layout_width="match_parent"
    android:layout_height="40dp"
     android:layout_weight="0.14"
    android:background="@drawable/dock1" 
    android:layout_gravity="top">

    <ImageView
        android:id="@+id/darka"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="0.14" />

    <ImageView
        android:id="@+id/stocka"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="0.14" />

    <ImageView
        android:id="@+id/opena"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="0.14" />

    <ImageView
        android:id="@+id/bordera"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="0.15" />

    <ImageView
        android:id="@+id/colora"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="0.15" 
        />

</LinearLayout>

`

which also copy paste from the bottom bar above. just change one thing from android:layout_alignParentBottom="true" to android:layout_alignParentTop="true" and you got an actionBar at the bottom and at the top. in this case you wont need to use the ActionBar so i suggest you to use Theme.Holo.NoActionBar

and here is the image result :- https://i.sstatic.net/uPsNb.png

this is a project i'm working on Now. done almost everything but still struggling with the design. hope my answer benefit you. please vote the answer up if you found it interesting.
best regards. ~Kosh

Cablet

Answer 5

try this...

private View contentView;

@Override
protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     contentView = getLayoutInflater().inflate(R.layout.activity_main, null);
     setContentView(contentView);
     LinearLayout layout = (LinearLayout) contentView.getParent().getParent();
     View view = layout.getChildAt(0);
     layout.removeViewAt(0);
     layout.addView(view);
}

Muchness

did you try it before posting it? this didn't work :) – Helpless

am using Real Device with 4.2, and its not working :D – Helpless

ill try it and reply to you – Helpless