Android Material design toolbar custom actions menu does not align properly

Question

I just applied the Material Design Toolbar in my application. I followed the instructions from the Chris Banes blog for working on devices before Lollipop. However, it seems that I cannot get the action menu items to be vertically centered.

Here is a screenshot of how it looks on a Kitkat device.

As you can see, the names and icons of the menu are not aligned. Somehow the title is aligned correctly, but not the action menu or navigation icon. Instead, they align to the bottom.

Here is my toolbar layout

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?android:attr/actionBarSize" android:background="?attr/colorPrimaryDark"/> 

I tried to put android: gravity on the layout, but it does nothing.

Here is my abstract activity code that designates the toolbar as an action bar

 public abstract class BaseMaterialActivity extends ActionBarActivity { private Toolbar toolbar; public abstract int getLayoutResources(); public abstract boolean isShowActionBar(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(getLayoutResources()); if (isShowActionBar()) { toolbar = (Toolbar) findViewById(R.id.toolbar); if (toolbar != null) { setSupportActionBar(toolbar); toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_drawer)); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setDisplayShowTitleEnabled(true); getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_nav_back); } } if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); } } public Toolbar getToolbar() { return toolbar; } 

}

Here is my menu.xml

 <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_filter" android:icon="@drawable/ic_filter" android:orderInCategory="1" app:showAsAction="always|withText" android:title="@string/filters" /> <item android:id="@+id/action_cart" app:actionLayout="@layout/action_cart_icon_layout" android:orderInCategory="2" app:showAsAction="always" android:title="@string/cart" /> </menu> 

Any help or pointer on how to get the action menu to be vertically centered will be appreciated. Thanks!

Answer 1

Instead

  android:layout_height="?android:attr/actionBarSize" 

records

  android:layout_height="?actionBarSize" 

The second is determined by the AppCompat theme with the correct height (default 56dp, 48dp in normal landscape and 64dp on tablets).

Note. What you wrote will only work correctly on Android 5.0.