Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Evenly spaced menu items on Toolbar

Tags:

So I've been trying to implement android.support.v7.widget.Toolbar in my Activity and to make it look similar to the previously supported split ActionBar.

Here's the XML for my Toolbar:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_btm"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/toolbar_bkgnd"
    android:layout_alignParentBottom="true"
    app:theme="@style/ToolBarTheme" />

Here's the style for the Toolbar I'm using:

<style name="ToolBarTheme" parent="Theme.AppCompat">
    <item name="actionButtonStyle">@style/ActionButtonStyle</item>
    <item name="android:actionButtonStyle">@style/ActionButtonStyle</item>
    <item name="android:textColor">@android:color/white</item>
</style>

The style for the Toolbar menu buttons, my initial plan was to calculate the minWidth based on the screen size and then set it for each menu button.

<style name="ActionButtonStyle" parent="@android:style/Widget.Holo.Light.ActionButton">
    <item name="android:minWidth">56dip</item>
    <item name="android:paddingLeft">0dip</item>
    <item name="android:paddingRight">0dip</item>
</style>

And finally, here is what I'm calling in my activity.

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_btm);
toolbarBtm.inflateMenu(R.id.menu);

The problem is that the menu items in the bottom Toolbar are right aligned like this: Right aligned menu items

However I want them to be evenly spaced like this:

Evenly spaced menu items

like image 651
MrEngineer13 Avatar asked Oct 21 '14 14:10

MrEngineer13


People also ask

What is the layout for Toolbar?

In Android applications, Toolbar is a kind of ViewGroup that can be placed in the XML layouts of an activity. It was introduced by the Google Android team during the release of Android Lollipop(API 21). The Toolbar is basically the advanced successor of the ActionBar.

What is widget Toolbar?

android.widget.Toolbar. A standard toolbar for use within application content. A Toolbar is a generalization of action bars for use within application layouts.

What is the Toolbar in Android?

Overview. Toolbar was introduced in Android Lollipop, API 21 release and is the spiritual successor of the ActionBar. It's a ViewGroup that can be placed anywhere in your XML layouts. Toolbar's appearance and behavior can be more easily customized than the ActionBar.

Can I equally space the width of Divi menu module links?

This tutorial will let you equally space the width of Divi Menu module links, meaning the menu items will be spaced out horizontally across the entire width of the parent container. This quick tutorial is only for the Menu module, as I have not tried it nor do I use the default menu anymore. So please note this before asking the comments

How do I add a Sext alignment to a Divi menu?

In the Divi Menu module, go to the Menu Text toggle and set the sext alignment to Justified. You will need to choose the snippet below that suites your needs, whether you have a logo in the module or not. This will need to be the same as the custom class that you add as well. The snippet will do most of the work of spacing out the Divi menu items.

How to create a navigation bar with equal-width navigation links?

Learn how to create a navigation bar with equal-width navigation links. <!-- The navigation menu --> width: 25%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */ Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.


1 Answers

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.

like image 91
MrEngineer13 Avatar answered Sep 22 '22 01:09

MrEngineer13