askIT

Android Programming Tutorials - Toolbar title, menu and back button

save.png Download source code

In Android 6 and newer the toolbar is at the top in all apps. It is normal with a title, back button and menu in the toolbar. This tutorial will show how to make this possible.

Example of toolbar:

example_toolbar.png

res/drawable

ic_search_white_24px.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="#ffffff"
        android:pathData="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91
3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27 .28 v.79l5 4.99L20.49
19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5
14z" />
    <path
        android:pathData="M0 0h24v24H0z" />
</vector>

ic_menu_white_24px.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:pathData="M0 0h24v24H0z" />
    <path
        android:fillColor="#000000"
        android:pathData="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
</vector>

res/menu

menu_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/navigationSearch"
        android:icon="@drawable/ic_search_white_24px"
        app:showAsAction="always"
        android:title="@string/search" />

    <item
        android:id="@+id/navigationMenu"
        android:icon="@drawable/ic_menu_white_24px"
        app:showAsAction="always"
        android:title="@string/menu" />

</menu>

MainActivity

toolbar() - shows the toolbar, sets title and enables back icon

    /*- Toolbar ------------------------------------------------------------------------- */
    public void toolbar(){
        /* Toolbar */
        ActionBar actionBar = getSupportActionBar();
        actionBar.setTitle(getResources().getString(R.string.app_name));

        // Back icon
        actionBar.setDisplayHomeAsUpEnabled(true);

        // Show
        actionBar.show();

    } // Toolbar

onCreateOptionsMenu(Menu menu) - loads the menu

    /*- On Create Options Menu ----------------------------------------------------------- */
    // The menu on the toolbar
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
    }

onOptionsItemSelected(MenuItem item) - Handle click on toolbar

    /*- On Options Item Selected --------------------------------------------------------- */
    // One of the toolbar icons was clicked
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.navigationSearch) {
            Intent i = new Intent(MainActivity.this, SearchActivity.class);
            startActivity(i);
            finish();
        }
        else if (id == R.id.navigationMenu) {
            Intent i = new Intent(MainActivity.this, MenuActivity.class);
            startActivity(i);
            finish();
        }
	else{	
            // Back icon clicked
            Intent i = new Intent(MainActivity.this, PreviousActivity.class);
            startActivity(i);
            finish();
	}

        return super.onOptionsItemSelected(item);
    }

Add comment

avatar_blank_60.png

Comment:

Name:

Email:

Comments

No comments yet. You can be the first one to comment. Just write your comment in the form and click on the submit button.