Android Material design toolbar custom action menu is not aligned correctly

Question

I have just adopted Material Design Toolbar into my app. I have followed the guidance from Chris Banes blog for getting it working on pre-Lollipop devices However, it seems that I can't get my action menu items to be vertically centered.

Here is a screenshot of what it looks like on Kitkat device.

As you can see the title and menu icons are not aligned. Somehow title is aligned correctly but not the action menus nor navigation icon. They are instead align to 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 putting android:gravity on the layout but it doesn't do anything.

Here is my abstract activity code that assign toolbar as 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 would be appreciated. Thank you!

Answer 1

Instead of

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

write

 android:layout_height="?actionBarSize"

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

Note: What you wrote would work correctly only on Android 5.0.