Adding a menu to the toolbar in android

  • Post comments:0 Comments

Adding menu in the action bar

Most apps have menus on the Actionbar. Additionally, you would have noticed an overflow menu on the Actionbar with different submenu items.

What new in app in android?

We will add the menu and overflow menu to the toolbar.

We will use the search icon, the eye icon and the overflow menu. Also, use the various submenu option in the overflow menu.

Clicking on the three dots open the overflow menu.

Also Read: press back button to exit android

When clicking View, another activity will open. We will create a menu folder in the res directory and add a new menu xml resource file.

Let’s build the menu on the toolbar step by step.

Step 1:

Start Android Studio and create a new project.

Step 2:

Fill all required fields and wait until gradle build is finished.

Step 3:

In this step, we’ll create a menu folder.

Right-click on the res folder ⇾ New ⇾ android recourse directory.

After making a menu, create a menu xml file to add the overflow menu and another menu on the action bar like “viewsearch icon etc.

As like below image

Create a menu resource folder in android

Step 4:

After creating the menu folder, add the menu resource file to it.

Right-click on Menu ⇾ New ⇾ menu resource file.

For the menu resource file, we’ll add the string value to the string file and some icons in the drawable folder.

So first, add the icon to the drawable folder that you want to add the icon to the toolbar. Then open the strings values file and add the string values as you want to create the menu.

App ⇾ Res ⇾ values ⇾ string.xml

Add the below code in the string.xml file.

strings.xml

<resources>
    <string name="app_name">IconOnActiBar</string>
    <string name="exit">Save and Exit</string>
    <string name="protect">Protect</string>
    <string name="print">Print</string>
    <string name="share">Share</string>
</resources>

Next, return the menu xml file and add some menu items. In this tutorial, we will add an overflow menu, search bar and view eye menu to the action bar.

Let’s look at the menu xml file code.

<?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"
    xmlns:toools="http://schemas.android.com/tools"
    
    toools:context=".MainActivity">

    <item
        android:id="@+id/ac"
        android:icon="@drawable/ic_remove_red_eye_black_24dp"
        android:orderInCategory="1100"
        android:title="menu"
        app:showAsAction="always|withText" />
    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_baseline_search_24"
        android:title="search"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/share"
        android:icon="@drawable/ic_baseline_share_24"
        android:title="@string/share" />
    <item
        android:id="@+id/print"
        android:icon="@drawable/ic_baseline_print_24"
        android:title="@string/print" />
    <item
        android:id="@+id/protect"
        android:icon="@drawable/ic_baseline_security_24"
        android:title="@string/protect" />
    <item
        android:id="@+id/exit"
        android:icon="@drawable/ic_baseline_exit_to_app_24"
        android:title="@string/exit" />
</menu>

In the above code, we used four menus on the overflow menu and 2 menus on the action bar menu. You can add as you like. You can also customize menu as per your app type.

ifRoom: for shoving menu on actionbar.

Lastly, the menus are ready.

Step 5:

Now, go to activity_main.xml for showing a message or image.

Below is the code for activity_main.xml.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="course code!"
        android:textSize="25dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 6:

Go to Mainactivity. App⇾ java ⇾ package name ⇾MainActivity.java.

We’ll add the onCreateoptionsMenu() override method to show the menu icon on Actionbar.

Also Read : Create a navigation drawer

Below, code of method “onCreateOpitonsMenu.”

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater ().inflate ( R.menu.menu,menu );
        return super.onCreateOptionsMenu ( menu );

    }

Now, create a new override method onOptionsItemSelected for a different options like when you click on view, there will open a new activity, when you click on share icon, there will open share dialog.

Like this below code of onOptionsItemSelected.

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.ac:
                Intent intent = new Intent(this, MainActivity2.class);
                startActivity(intent);
                break;
            case R.id.share:
                //action
                break;
            case R.id.print:
                //action
                break;
            case R.id.exit:
                //action
                break;
            case R.id.protect:
                //action
                break;

        }
        return true;
    }

Now let’s see the complete code of MainActivity.java class.

MainActivity.java

package com.example.icononactibar;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.content.ClipData;
import android.content.Intent;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate ( savedInstanceState );
        setContentView ( R.layout.activity_main );
        getActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#0ff")));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater ().inflate ( R.menu.menu,menu );
        return super.onCreateOptionsMenu ( menu );

    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.ac:
                Intent intent = new Intent(this, MainActivity2.class);
                startActivity(intent);
                break;
            case R.id.share:
                //action
                break;
            case R.id.print:
                //action
                break;
            case R.id.exit:
                //action
                break;
            case R.id.protect:
                //action
                break;

        }
        return true;
    }
    }

When you click on “view or eye icon” will open a second activity, So we’ll create a new empty activity.

App ⇾ java ⇾ right click on package name ⇾ New ⇾ Activity ⇾ Empty Activity

Open MainActivity2.java class and below code for back button.

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);

Let’s see a full example.

MainActivity2.java

package com.example.icononactibar;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.Menu;
import android.widget.Toolbar;

public class MainActivity2 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);

    }
}

Now, go to the resource file activity_main2.xml and add TextView and ImageView.

You can see the code given below.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity2">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/courcecode"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Open AndroidManifest.xml and type the below code.

<meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value=".MainActivity2" />

As a result, your app ready.

Click on Run icon.

You can see below image as output.

Adding a menu to the toolbar in android output
Adding a menu to the toolbar in android overflow menu
Adding a menu to the toolbar in android, click on menu open second activity

Watch on YouTube

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments