How to Implement Android Toolbar to Display Different Activity Navigation

The Android toolbar has replaced the old Android action bar. In fact, Android has changed a lot of visual designs to build modern Android applications. And, with the introduction of Material Design with the release of Android Lollipop, the design changes now focus on offering rich user experience, user interface, and added the Android toolbar.

The Android toolbar provides a great control to customize the appearance of action bar. Moreover, by implementing toolbar in Android, developers can show multiple toolbars with different animations for developing a modern application

Today, in Android app tutorial, we’ll build Android app to demonstrate the basic implementation process of Android toolbar.

Let’s Get Started

Open your Android Studio and create a new project under file menu.

In the next tab, select targeted Android device.

Select Empty Activity and click on next.

Lastly, customize the activity.

Start Code Integration

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:titleTextColor="#ffffff">

</android.support.v7.widget.Toolbar>
</LinearLayout>

Create menu.xml in res/menu folder

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/miCompose"
android:icon="@drawable/ic_email"
app:showAsAction="ifRoom"
android:title="Compose">
</item>
<item
android:id="@+id/miProfile"
android:icon="@drawable/ic_profile"
app:showAsAction="ifRoom|withText"
android:title="Profile">
</item>
</menu>

MainActivity.java

package com.spaceo.demotoolbar;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
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);
initToolBar();
}
public void initToolBar() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle(R.string.toolbarTitle);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_toolbar_arrow);
toolbar.setNavigationOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "clicking the Back!", Toast.LENGTH_SHORT).show();
}
}
);
}
// Menu icons are inflated just as they were with actionbar
@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, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle item selection
switch (item.getItemId()) {
case R.id.miCompose:
Toast.makeText(MainActivity.this, "clicking on email", Toast.LENGTH_SHORT).show();
return true;
case R.id.miProfile:
Toast.makeText(MainActivity.this, "clicking on profile", Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}

And done!

After completing all these steps, run your Android toolbar example, and it’ll give you output like following screenshot.

However, there is a lot more customization can be done in Android tool bar, but if you’re developing an app for your business or startup, then it’s advisable that you talk to experienced developers, or hire Android app development company so that it could be implemented suiting your startup app idea.

Get a free copy of AndroidToolbar Demo from Github.