Creating a button in Android Toolbar

Question

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

Answer 1

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> 

Answer 2

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