Android Overflow Menu on Action Bar Toolbar with Icons Tutorial

June 05, 2018 , , 0 Comments

The android overflow menu also known as Option Menu is used to show a list of vertical menus with icons inside it. Overflow menu is place above on android application screen at the top right side of it. User can itself customize the over flow menu icons. So in this tutorial we would going to create customized Overflow menu with multiple icons. So let’s get started 🙂 .


Contents in this project Overflow Menu on Action Bar Toolbar Tutorial :


1. Open the build.gradle( Module:app ) file of your project.



2. Add compile ‘com.android.support:design:26.0.0-alpha1’ inside the dependencies block.


3. Download All 5 icons from below and paste it into res -> drawable folder. These are the Overflow menu icons.









4. Now open res -> values -> styles.xml file and replace your code with mine.








5. Create a menu file inside res -> menu -> toolbar_main_menu.xml .


Code for toolbar_main_menu.xml file.



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
>
android:id="@+id/ADD"
android:title="Add now"
android:icon="@drawable/ic_add_circle_black"
app:showAsAction="never"
/>
android:id="@+id/CALL_BACK"
android:title="Call Back"
android:icon="@drawable/ic_call_black"
app:showAsAction="never"
/>
android:id="@+id/CAMERA"
android:title="Camera"
android:icon="@drawable/ic_camera_alt_black"
app:showAsAction="never"
/>
android:id="@+id/CART"
android:title="CART"
android:icon="@drawable/ic_shopping_cart_black"
app:showAsAction="never"
/>
android:id="@+id/VIDEO"
android:title="Video"
android:icon="@drawable/ic_videocam_black"
app:showAsAction="never"
/>

6. Code for activity_main.xml file.



xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>

android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>

android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>





7. Code for MainActivity.java file .


package com.android_examples.overflowmenu_android_examplescom;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.view.menu.MenuBuilder;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

toolbar = (Toolbar)findViewById(R.id.toolbar);

toolbar.setTitle("Android Overflow Menu Icon Tutorial");

toolbar.setTitleTextColor(Color.WHITE);

setSupportActionBar(toolbar);

}

@Override
public boolean onCreateOptionsMenu(Menu menu){
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.toolbar_main_menus,menu);

if(menu instanceof MenuBuilder){

MenuBuilder menuBuilder = (MenuBuilder) menu;
menuBuilder.setOptionalIconsVisible(true);
}

return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {
case R.id.ADD:
Toast.makeText(getApplicationContext(),"Add Clicked",Toast.LENGTH_LONG).show();
return true;

case R.id.CALL_BACK:
Toast.makeText(getApplicationContext(),"Call Back Clicked",Toast.LENGTH_LONG).show();
return true;

case R.id.CAMERA:
Toast.makeText(getApplicationContext(),"Camera Clicked",Toast.LENGTH_LONG).show();
return true;

case R.id.CART:
Toast.makeText(getApplicationContext(),"Cart Clicked",Toast.LENGTH_LONG).show();
return true;

case R.id.VIDEO:
Toast.makeText(getApplicationContext(),"Video Clicked",Toast.LENGTH_LONG).show();
return true;

default:

super.onOptionsItemSelected(item);

}
return true;

}
}

Screenshots :


Overflow Menu


The post Android Overflow Menu on Action Bar Toolbar with Icons Tutorial appeared first on Android Examples.

siddharth makadiya

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google

0 comments:

Popular Posts