How can I align Android Toolbar menu/icons to the left like in Google Maps app?

Question

Here is a screenshot of Google Maps Toolbar.

As you can see icons are aligned to the left instead of right (default behavior). I've tried adding android:layout_gravity="left" and android:gravity="left" to the toolbar but it didn't work. I also tried adding an internal LinearLayout (with same gravity values) to the Toolbar but that didn't work either. Any ideas?

I want to be able to use a regular Android menu with the Toolbar widget instead of recreating everything from scratch.

Solution 1

After some struggling and digging in Android Toolbar code I managed to make it work. Basically, the idea is to add a new android.support.v7.widget.ActionMenuView as child of the Toolbar, set its gravity to top|start, and then add the menu to that action menu view in your Activity. Here is the code:

my_toolbar.xml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tToolbar"
    android:layout_height="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:background="?attr/colorPrimary"
    android:gravity="center_vertical|start"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <android.support.v7.widget.ActionMenuView
        android:id="@+id/amvMenu"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>
</android.support.v7.widget.Toolbar>

my_activity.xml

<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">

    <!--Toolbar-->
    <include
        android:id="@+id/tToolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        layout="@layout/my_toolbar" />
</RelativeLayout>

MyActivity.java

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.ActionMenuView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;

public final class MyActivity extends ActionBarActivity {
  private ActionMenuView amvMenu;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // this layout includes the custom toolbar my_toolbar.xml
    setContentView(R.layout.my_activity);

    Toolbar t = (Toolbar) findViewById(R.id.tToolbar);
    amvMenu = (ActionMenuView) t.findViewById(R.id.amvMenu);
    amvMenu.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() {
      @Override
      public boolean onMenuItemClick(MenuItem menuItem) {
        return onOptionsItemSelected(menuItem);
      }
    });

    setSupportActionBar(t);
    getSupportActionBar().setTitle(null);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    // use amvMenu here
    inflater.inflate(R.menu.my_activity_menu, amvMenu.getMenu());
    return true;
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    // Do your actions here
    return true;
  }
}

Solution 2

If there is no special reason to add toolbar items as menu actions, UI controls can be directly added to the toolbar, and aligned similar to aligning any other item inside a layout.

For an example, following toolbar has a left aligned Spinner and a right aligned EditText.

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_actionbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/tab_background"
    android:gravity="center_vertical">

    <Spinner
        android:id="@+id/categorySpinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:hint="Name" />

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