How to create a card toolbar using appcompat v7

Question

I want to create a toolbar like the following image as proposed in the material design guidelines:

Answer 1

Thanks Gabriele for all the help. Here is working code:

Activity :

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mai);

        Toolbar toolbar = (Toolbar) findViewById(R.id.card_toolbar);
        if (toolbar != null) {
            // inflate your menu
            toolbar.inflateMenu(R.menu.main);
            toolbar.setTitle("Card Toolbar");
            toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem menuItem) {
                    return true;
                }
            });
        }

        Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
        if (maintoolbar != null) {
            // inflate your menu
            maintoolbar.inflateMenu(R.menu.main);
            maintoolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem menuItem) {
                    return true;
                }
            });
        }
    }

}

Layout XML File:

Make sure your activity theme is extending Theme.AppCompat.Light.NoActionBar.

Here is what it will look like:

Few things to note:

• If you are using card elevation then you need to alter the margin top so that your card aligns with the main toolbar.
• I am still seeing 1-2 pixel margin between bottom of main toolbar and card toolbar. Not sure about what to do in this case. For now, I am aligning it manually.