Evenly Spaced Menu Items on Toolbar

Evenly spaced menu items on Toolbar

Here's what worked* for me:

EnhancedMenuInflater.java

import android.support.v4.internal.view.SupportMenuItem;
import android.support.v7.internal.view.menu.MenuItemImpl;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;

import here.is.your.R;

public class EnhancedMenuInflater {

    public static void inflate(MenuInflater inflater, Menu menu, boolean forceVisible) {
        inflater.inflate(R.menu.menu, menu);

        if (!forceVisible) {
            return;
        }

        int size = menu.size();
        for (int i = 0; i < size; i++) {
            MenuItem item = menu.getItem(i);
            // check if app:showAsAction = "ifRoom"
            if (((MenuItemImpl) item).requestsActionButton()) {
                item.setShowAsAction(SupportMenuItem.SHOW_AS_ACTION_ALWAYS);
            }
        }
    }
}

MainActivity.java

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    if (toolbar == null) {
        EnhancedMenuInflater.inflate(getMenuInflater(), menu, false);
    }
    return super.onCreateOptionsMenu(menu);
}

// somewhere after views have been set.
if (toolbar != null) {
    EnhancedMenuInflater.inflate(getMenuInflater(), toolbar.getMenu(), true);
    toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            return onOptionsItemSelected(item);
        }
    });
}

SplitToolbar.java

import android.content.Context;
import android.support.v7.widget.ActionMenuView;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

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

Layout.xml

<here.is.my.SplitToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"/>

When I say worked I mean that it centered EVERYTHING in my menu, text and images alike. If you only use icons for your menu then it will look great. I'm still looking for a way to center them and have the text to be right next to the icons.

Strange whitespace on Android Toolbar

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

Distribute multiple items evenly throughout a dynamic space

Use a weighted LinearLayout. Check out the LinearLayout Tutorial for an example.

Equally space menu items of BottomNavigationView

Ok I managed to find a solution myself, the XML attribute that solves this is

app:itemHorizontalTranslation="false"

which is default to true. This "expands" the items to fit the entire width.

---

Related Topics