Material "close" button in Toolbar instead of Back

Solution 1:

Use  

this.getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_action_close);

to achieve this.

You can create your own close icon or get from material design icon set on GitHub. Also, add this line before above line to make close function as the back arrow.

this.getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Solution 2:

You need to define a parent in the manifest, then override onSupportNavigationUp() if using the support app bar of course. Also, go to this handy site for the icon packs: https://www.google.com/design/icons/

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.yourAwesomeLayout);

    setupToolBar();    
}

private void setupToolBar() {
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    if (toolbar == null) return;

    setSupportActionBar(toolbar);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_close_white_24dp);
}

@Override
public boolean onSupportNavigateUp() {
    finish(); // close this activity as oppose to navigating up

    return false;
}

Solution 3:

sorry for late reply. i found easiest solution for you. here above all answer not works for me (because i want to use toolbar not actionBar due to theming). so try to add close button through xml layout. and it works.

here is an xml syntax to add close button to toolbar(v7) .

app:navigationIcon="@drawable/ic_close_black_24dp"

ans here is an out put image