Strange whitespace on Android Toolbar

Question

I'm working on putting a Toolbar to screen bottom. After I hide the toolbar title, the title still occupies spaces.

My question is: how can I remove the space?

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

In my Activity's onCreate():

toolbar = (Toolbar)findViewById(R.id.bar_bottom);
setSupportActionBar(toolbar);
getSupportActionBar().setSubtitle("");
getSupportActionBar().setDisplayShowTitleEnabled(false);

and in same activity's onCreateOptionsMenu and onOptionsItemSelected:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_bar_bottom, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    return super.onOptionsItemSelected(item);
}

and in my layout:

<?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:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".WelcomeActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:id="@+id/lbl_test"
            android:layout_width="match_parent"
            android:layout_height="20sp"
            android:text=""
            />
    </LinearLayout>
    <android.support.v7.widget.Toolbar
        android:id="@+id/bar_bottom"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary"
        android:layout_alignParentBottom="true"
         />
</RelativeLayout>

and the Menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".WelcomeActivity">
    <item
        android:id="@+id/btn_1"
        android:orderInCategory="100"
        android:title="Button 1"
        app:showAsAction="always" />
    <item
        android:id="@+id/btn_2"
        android:orderInCategory="200"
        android:title="Button 2"
        app:showAsAction="always" />
    <item
        android:id="@+id/btn_3"
        android:orderInCategory="300"
        android:title="Button 3"
        app:showAsAction="always" />
    <item
        android:id="@+id/btn_4"
        android:orderInCategory="400"
        android:title="Button 4"
        app:showAsAction="always" />
</menu>

I didn't hide the toolbar, I just hide the toolbar title via `getSupportActionBar().setDisplayShowTitleEnabled(false);` — Raptor, Dec 15 '15 at 09:21
I know, but I want the 4 menu items occupies full width equally. How can I achieve this? — Raptor, Dec 15 '15 at 09:31
why you aren't using individual buttons instead of menu? I guess that should work fine — karan, Dec 15 '15 at 11:05
Does your goal is to have a tool bar on bottom, with centered buttons / items / icons? — JJ86, Dec 15 '15 at 11:35
@Raptor if you use the Toolbar in this way, you cannot align contents as you wish. You can, instead, add a custom layout to your Toolbar, then manage all item click by your own, without settint as an ActionBar (it sucks, because you have to code all listener). It seems that your goal, like the G+ bottom bar, can be achieved only like this. — JJ86, Dec 18 '15 at 15:25

score 2 · Accepted Answer · answered Dec 21 '15 at 10:20

Maybe i'm not too late.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
    android:id="@+id/actionbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/Base.Theme.AppCompat.CompactMenu"
    android:layout_alignParentBottom="true">

    <LinearLayout
        android:id="@+id/toolbarMenuLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="3"
        android:gravity="center_horizontal">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:clickable="true"
            android:scaleType="fitXY"
            android:src="@drawable/ic_action_location" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:clickable="true"
            android:scaleType="fitXY"
            android:src="@drawable/ic_action_refresh" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:clickable="true"
            android:scaleType="fitXY"
            android:src="@drawable/ic_action_settings" />

    </LinearLayout>

</android.support.v7.widget.Toolbar>

If you use the Toolbar as stated in the classic mode, you cannot align contents as you wish. As you can see in the code above, add a custom layout to your Toolbar, then manage all item click by your own, without setting it as an ActionBar (it sucks, because you have to code all listener and style of course).

By the way, you will notice that the Toolbar will always have a padding in the left: this is normal, also G+ app has it (in the screenshot below, you will see it on the left of Home button).

score 1 · Answer 2 · edited May 23 '17 at 10:27

As far I know once you set the ToolBar as the SupportActionBar it will maintain the space on right for title even if you set it to empty string.

Also when you remove title and have no icon or navigation then you are actually not interested in an ActionBar but just a toolbar. Why not extend the toolbar as below and use so that the items you add to the same by inflating menu would be equally spaced

public class SplitToolbar extends Toolbar {

    public SplitToolbar(Context context) {
        super(context);
    }

    public SplitToolbar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SplitToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void addView(View child, ViewGroup.LayoutParams params) {
        if (child instanceof ActionMenuView) {
            params.width = LayoutParams.MATCH_PARENT;
        }
        super.addView(child, params);
    }
}

Instantiate as below and inflate XML

SplitToolbar toolbar = (SplitToolbar) findViewById(R.id.my_awesome_toolbar);
toolbar.inflateMenu(R.menu.menu_toolbar);

Add toolbar like below in Layout XML

<com.xxx.xxx.xxx.SplitToolbar
                android:id="@+id/my_awesome_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/primary" />

And finally same menu XML

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".XXXActivity">

    <item
        android:id="@+id/action_zoom2fit"
        android:icon="@drawable/ic_aspect_ratio_white_24dp"
        android:orderInCategory="100"
        android:title="@string/zoomfit"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_card"
        android:icon="@drawable/ic_action_eject"
        android:orderInCategory="100"
        android:title="@string/showcard"
        app:showAsAction="always" />
    <item
        android:id="@+id/actionZoom2Track"
        android:icon="@drawable/ic_drive_eta_white_24dp"
        android:orderInCategory="100"
        android:title="@string/zoom2Tracked"
        app:showAsAction="always" />

</menu>

NOTE/DISCLAIMER : The extension of Toolbar for this purpose is actually derived from an answer I found sometime ago on StackOverflow itself. I am trying to locate the same to give credit to the person. Will sure add it once I find it. I believe I got it from this thread Evenly spaced menu items on Toolbar

Tested, partially works well. With 720x1280 resolution, only 3 menu buttons can be shown (but they're equally spaced, nice!). — Raptor, Dec 21 '15 at 03:56

Strange whitespace on Android Toolbar

2 Answers2