How can I force the Action Bar to be at the bottom

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?

Answer 1

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

Answer 2

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);
}

Answer 3

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);
}

Answer 4

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">

Answer 5

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 :- http://i.imgur.com/N8uKg6v.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