Develop Reference

Android custom toolbar items not showing

I want to make an app with a custom toolbar with a menu on the toolbar. The problem I have is that when I run the app and I click on the menu on the right side of the toolbar, the options do not appear but the menu box appears. One of the options closes the app and if I click the menu area where the exit option is the app closes.
Here is my activity_main.xml file:
<?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">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/toolbar_color"
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="#string/app_name"
app:logo="#drawable/applogo">
</androidx.appcompat.widget.Toolbar>
Here is my mainActivity.java:
public class MainActivity extends AppCompatActivity {
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
return super.onCreateOptionsMenu(menu);
}
#Override
public boolean onOptionsItemSelected(#NonNull MenuItem item) {
int id = item.getItemId();
if(id == R.id.exit)
{
this.finishAffinity();
}
return true;
}
}
This is my menu.xml file:
<?xml version="1.0" encoding="utf-8"?>
<item
android:title="#string/new_entry"
android:id="#+id/add">
</item>
<item
android:title="#string/about"
android:id="#+id/about">
</item>
<item
android:title="#string/exit"
android:id="#+id/exit">
</item>
I created the toolbar xml I set it in MainActivity .. I created the menu xml and I inflate it in MainActivity from all the tutorials these are the steps that I had to go through to get here, yet I don't know why the items in the menu xml file won't show up in the emulator.

Big thanks to Gabriele Mariotti. In his words: " The issue is the text color in the popup menu." .All I had to do was to was to add the following line of code to the Toolbar xml.
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"

Try this one I have made a demo for you it is working I have tested it on the emulator as well as the device.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/teal_700"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Hello World!" />
</RelativeLayout>
MainActivity
public class MainActivity extends AppCompatActivity {
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.my_menu, menu);
return true;
}
}
my_menu
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/item1"
android:title="Item 1"
app:showAsAction="never" />
<item
android:id="#+id/item2"
android:title="Item 2"
app:showAsAction="never" />
<item
android:id="#+id/item3"
android:title="Item 3"
app:showAsAction="never" />
<item
android:id="#+id/item4"
android:title="Item 4"
app:showAsAction="never" />
</menu>

How to add multiple icons on action bar in android?

I want to add 2 or 3 icons on action Bar in android app. I already took the empty activity and added the toolbar. I also set the Icon at left side. Now i want to add another two icons on it. But there is no Menu folder in my project directory structure. So any one tell me how i can do this all with proper guidelines?
My code is here :
My activity file
public class ActionBarActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_action_bar);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setIcon(R.drawable.left_nav);
getSupportActionBar().setTitle("");
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
}
my .xml file
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
android:background="#ffffff"
android:fitsSystemWindows="true"
tools:context="firstapp.vaibhav.com.firstapp.ActionBarActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Screen shot of my project directory structure

1. Create a menu folder in your existing resource res folder. (Ex. .../res/menu)
2. Create a main.xml file in menu folder. (Ex. .../res/menu/main.xml)
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/action_item_one"
android:title="Camera"
android:icon="#drawable/ic_menu_camera"
app:showAsAction="always" />
<item
android:id="#+id/action_item_two"
android:title="Send"
android:icon="#drawable/ic_menu_send"
app:showAsAction="always" />
</menu>
3. In your activity, Override onCreateOptionsMenu() and onOptionsItemSelected() to work with option menus.
ActionBarActivity.java
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_camera) {
// Do something
return true;
}
if (id == R.id.action_send) {
// Do something
return true;
}
return super.onOptionsItemSelected(item);
}
OUTPUT
Hope this will help~

create menu.xml with item like this
<?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/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />-->
<item
android:id="#+id/action_refresh"
android:orderInCategory="100"
app:showAsAction="always"
android:icon="#drawable/ic_action_autorenew"
android:title="Search"/>
<item
android:id="#+id/action_search"
android:orderInCategory="100"
app:showAsAction="always"
android:icon="#drawable/ic_action_search"
android:title="Search"/>
</menu>
and use it in activity
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
// MenuInflater inflater1 = getActivity().getMenuInflater();
inflater.inflate(R.menu.cartmenu, menu);
return ;
}

in your res/menu/menu_main.xml:
add
<?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/icon_id"
android:visible="true"
android:title="#string/icon_name"
android:icon="#drawable/your_image"
app:showAsAction="always">
</item>
</menu>
in your activity:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_main, menu);
// return true so that the menu pop up is opened
return true;
}
To access your menu item in activity add:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.your_item_id) {
// your code
return true;
}
return super.onOptionsItemSelected(item);
}

You can use showAsAction option found at item in menu resource file.
1) If you want to add popup menu then write app:showAsAction="never"
2) If you want to add icons as an action (multiple icons in actionbar) then write app:showAsAction="always"

How to show menu item in action bar?

I want the menu items to show on action bar. There is a lot of space on the ActionBar, but still they don't show up. Every item shown as three dots, why?
.java file
public class GalleryActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.gallery_layout);
}
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_menu, menu);
return true;
}
}
.xml file
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:MissionAndroid="http://schemas.android.com/tools">
<item
android:id="#+id/facebookId"
android:title="facebook"
android:icon="#drawable/facebook"
MissionAndroid:showAsAction="always"/>
<item
android:id="#+id/shareId"
android:title="share"
android:icon="#drawable/share"
MissionAndroid:showAsAction="always"/>
<item
android:id="#+id/delete"
android:title="delete"
android:icon="#drawable/delete"
MissionAndroid:showAsAction="always"/>
<item
android:id="#+id/searchId"
android:title="search"
android:icon="#drawable/search"
MissionAndroid:showAsAction="ifRoom"/>
</menu>

Currently, you're using "http://schemas.android.com/tools" which does not offer the functionality you're looking for and your showAsAction modifiers are being ignored.
Try updating your main_menu.xml with the following:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:MissionAndroid="http://schemas.android.com/apk/res-auto">
...
</menu>
Better yet, to follow convention, replace MissionAndroid in this file with app:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/facebookId"
android:title="facebook"
android:icon="#drawable/facebook"
app:showAsAction="always"/>
...
</menu>

Creating a button in Android Toolbar

How can I create a button inside Android's Toolbar that looks like this iOS example?

ToolBar with Button Tutorial
1 - Add library compatibility inside build.gradle
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:21.0.3'
}
2 - Create a file name color.xml to define the Toolbar colors
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ColorPrimary">#FF5722</color>
<color name="ColorPrimaryDark">#E64A19</color>
</resources>
3 - Modify your style.xml file
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
<!-- Customize your theme here. -->
</style>
</resources>
4 - Create a xml file like tool_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="4dp" />
5 - Include the Toolbar into your main_activity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar" />
<TextView
android:layout_below="#+id/tool_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/TextDimTop"
android:text="#string/hello_world" />
</RelativeLayout>
6 - Then, put it inside your MainActivity class
package com.example.hp1.materialtoolbar;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;
/* When using AppCompat support library
* (you need to extend Main Activity to
* ActionBarActivity)
* ActionBarActivity has deprecated, use AppCompatActivity
*/
public class MainActivity extends ActionBarActivity {
// Declaring the Toolbar Object
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
// Attaching the layout to the toolbar object
toolbar = (Toolbar) findViewById(R.id.tool_bar);
// Setting toolbar as the ActionBar with setSupportActionBar() call
setSupportActionBar(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);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
7 - And finally, add your "Button Items" to the menu_main.xml inside of /res/menu/ directory
<?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:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
<item
android:id="#+id/action_search"
android:orderInCategory="200"
android:title="Search"
android:icon="#drawable/ic_search"
app:showAsAction="ifRoom"/>
<item
android:id="#+id/action_user"
android:orderInCategory="300"
android:title="User"
android:icon="#drawable/ic_user"
app:showAsAction="ifRoom" />
</menu>

Toolbar customization can done by following ways
write button and textViews code inside toolbar as shown below
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:layout_width="wrap_content"
android:layout_height="#dimen/btn_height_small"
android:text="Departure"
android:layout_gravity="right"
/>
</android.support.v7.widget.Toolbar>
Other way is to use item menu as shown below
#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);
return true;
}

Another possibility is to set the app:actionViewClass attribute in your menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/get_item"
android:orderInCategory="1"
android:text="Get"
app:showAsAction="always"
app:actionViewClass="android.support.v7.widget.AppCompatButton"/>
</menu>
In your code you can access this button after the menu was inflated:
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater menuInflater = getMenuInflater();
menuInflater.inflate(R.menu.sample, menu);
MenuItem getItem = menu.findItem(R.id.get_item);
if (getItem != null) {
AppCompatButton button = (AppCompatButton) getItem.getActionView();
//Set a ClickListener, the text,
//the background color or something like that
}
return super.onCreateOptionsMenu(menu);
}

I have added text in ToolBar :
menu_skip.xml
<menu 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"
tools:context=".MainActivity">
<item
android:id="#+id/action_settings"
android:title="#string/text_skip"
app:showAsAction="never" />
</menu>
MainActivity.java
#Override
boolean onCreateOptionsMenu(Menu menu) {
inflater = getMenuInflater();
inflater.inflate(R.menu.menu_otp_skip, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
// action with ID action_refresh was selected
case R.id.menu_item_skip:
Toast.makeText(this, "Skip selected", Toast.LENGTH_SHORT)
.show();
break;
default:
break;
}
return true;
}

They are called menu items or action buttons in toolbar/actionbar. Here you have Google tutorial how it works and how to add them
https://developer.android.com/training/basics/actionbar/adding-buttons.html

You can actually put anything inside a toolbar. See the below code.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:background="#color/colorPrimary">
</android.support.v7.widget.Toolbar>
Between the above toolbar tag you can put almost anything. That is the benefit of using a Toolbar.
Source: Android Toolbar Example

You could use actionLayout from the support library.
menu.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/button_item"
android:title=""
app:actionLayout="#layout/button_layout"
app:showAsAction="always"
/>
</menu>
button_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
Activity.java
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
MenuItem item = menu.findItem(R.id.button_item);
Button btn = item.getActionView().findViewById(R.id.button);
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "Toolbar Button Clicked!", Toast.LENGTH_SHORT).show();
}
});
return true;
}

I was able to achieve that by wrapping Button with ConstraintLayout:
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/top_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white_color">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cancel"
android:layout_marginStart="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_publish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/publish"
android:background="#drawable/button_publish_rounded"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="10dp"
app:layout_constraintLeft_toRightOf="#id/cancel"
tools:layout_editor_absoluteY="0dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You may create a drawable resourcebutton_publish_rounded, define the button properties and assign this file to button's android:background property:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/green" />
<corners android:radius="100dp" />
</shape>

why the actionBar is placed at the bottom?

I was following some tutorials to learn how to create an activity with ActionBar, I followed the tutorial literally, but in the end, I found that the action bar is unlike the action bar resulted in the tutorial, mine is placed at the bottom of activity and appears only when I press the optionsMenueButton, while the result from the tutorial is at the top. And my activity extends ActionBarActivity Any idea why that happens.
Java_Code:
public class ActionBarActivityTest00 extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_action_bar_activity_test00);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.action_bar_activity_test00, menu);
return true;
}
xml_file:
<menu 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"
tools:context="com.example.actionbaractivitytest.ActionBarActivityTest00" >
<item
android:id="#+id/action_search"
android:orderInCategory="100"
android:showAsAction="always"
android:icon="#drawable/search"
android:title="Search"/>
<item
android:id="#+id/action_copy"
android:orderInCategory="100"
android:showAsAction="always"
android:icon="#drawable/copy"
android:title="Copy"/>
<item
android:id="#+id/action_share"
android:orderInCategory="100"
android:showAsAction="always"
android:icon="#drawable/share"
android:title="Share"/>