83

I have seen in Google's Inbox App, composing a new email, in the toolbar instead of the back button (an arrow) it has a "close" button (see picture).

How can I achieve this?

inbox compose close button

7 Answers 7

112

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);
5
  • It doesn't work. It doesn't replace the back arrow with the new icon, both appear. Furthermore, with this solution the icon doesn't get the "colorPrimaryDark" property. Nov 25, 2014 at 11:47
  • It works but is not exactly what I wanted. I expected to work as back icon does, with "colorPrimaryDark". But it seems that "close" icon is not part of the SDK. Thanks @AlokNair! Nov 25, 2014 at 12:08
  • 1
    Works fine when using ActionBarActivity and PARENT is specified in manifest. +1 for the answer. Thanks mate!
    – PsyGik
    Jan 8, 2015 at 5:24
  • 7
    I found that I had to call setDisplayHomeAsUpEnabled before SetHomeAsUpIndicator otherwise the icon would not be replaced.
    – CodeChimp
    Feb 11, 2015 at 13:47
  • 1
    and how to change back to the original? Oct 28, 2018 at 7:33
25

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;
}

enter image description here

1
  • 3
    any reason you returned false out of onSupportNavigateUp()? The documentation says its just a success flag May 7, 2017 at 18:28
8

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 output image

3
  • Where does @drawable/ic_close_black_24dp come from? Aug 27, 2018 at 22:58
  • @CACuzcatlan That's just a random image he has in his drawable's folder. You can pick whatever icon. Jan 16, 2019 at 13:11
  • @CACuzcatlan you can find it in Android Studio vector assets. Nov 21, 2019 at 5:08
5
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("Search");
toolbar.setNavigationIcon(R.drawable.abc_ic_clear_mtrl_alpha);
setSupportActionBar(toolbar);
3

An alternative to defining the parent activity in the manifest is to handle what action to take in the onOptionsItemSelected method like in this example:

 @Override
public boolean onOptionsItemSelected(MenuItem item){
    switch (item.getItemId()) {
        // Respond to the action bar's Up/Home/back button
        case android.R.id.home:
            finish();
            break;
    }
    return super.onOptionsItemSelected(item);
}
1

You can use this function

fun setNavigationIcon(@DrawableRes resId: Int? = null) {
        this.supportActionBar?.apply {
            setDisplayHomeAsUpEnabled(true)
            setHomeAsUpIndicator(resId ?: R.drawable.ic_close)
        }
    }
-5

You can define a style:

<style name="Theme.Toolbar.Clear">
    <item name="toolbarNavigationIcon">@drawable/abc_ic_clear_mtrl_alpha</item>
</style>

and use it in your theme:

<style name="Theme.Clear">
    <item name="toolbarTheme">@style/Theme.Toolbar.Clear</item>
</style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.