Android’s new operating system named Android Lollipop, is highly focused on rich user experience and what they called it as material design. In this example we will take a look at the new Actionbar replacement called Toolbar.
Toolbar is a complete replacement to Android ActionBar. It provides greater control to customize its appearance unlike old ActionBar. Using Toolbar, application developer can now, show multiple toolbars on the screen, spanning only part of the width, etc.
It is introduced in Android Lollipop, API level 21 (Android 5.0 Lollipop) release, and hence it is available to use, out of box for the application that are targeted to 21 and above. However, as always Google provides fully supported Toolbar features to lower android os devices via AppCompact support library. In AppCompat, Toolbar is implemented in the android.support.v7.widget.Toolbar
class.
A Toolbar can be used in two ways.
If you are on the latest version of Android SDK you don’t have to add library of Appcombat v7 21 if not then please make sure you add that library to use ToolBar.
In this example I will show you how to implement ToolBar with ActionBar and without ActionBar (standalone).
Let’s get start by creating a project in Eclipse IDE.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java).
2. Open your your AndroidManifest.xml file and set TargetSDK to 21 or 22 according to Lollipop and I had added two more activities because i am using three activities.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.android_toolbar_demo" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="22" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.android_toolbar_demo.Toolbar_using_ActionBar"></activity> <activity android:name="com.android_toolbar_demo.Toolbar_without_ActionBar"></activity> </application> </manifest> |
3. Create a layout file for splash screen under res ⇒ layout folder. I named the layout file as activity_main.xml. This layout contains two buttons both to open different activities.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:orientation="vertical" android:padding="10dp" > <Button android:id="@+id/toolbar_with_actionbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/button_selector" android:gravity="center" android:text="Toolbar using ActionBar" android:textColor="#ffffff" android:textSize="18sp" /> <Button android:id="@+id/toolbar_without_actionbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/button_selector" android:gravity="center" android:layout_marginTop="30dp" android:text="Toolbar without ActionBar" android:textColor="#ffffff" android:textSize="18sp" /> </LinearLayout> |
4. Now, for button selector we have to create a new xml file in drawable directory under res directory naming button_selector.xml and set it to button background.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"><shape android:shape="rectangle"> <corners android:radius="10dp" /> <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" /> <solid android:color="#FF6600" /> <stroke android:width="1dp" android:color="#FF00" /> </shape></item> <item><shape android:shape="rectangle"> <corners android:radius="10dp" /> <padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" /> <solid android:color="#FF9800" /> <stroke android:width="1dp" android:color="#FF00" /> </shape></item> </selector> |
5. Following is strings.xml, the strings that i used in this exmple.
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Android_NavigationDrawer_Demo</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string name="edit">Edit</string> <string name="delete">Delete</string> <string name="share">Share</string> <string name="call">Call</string> </resources> |
6. Now, for material designing we have to select some primary colors and put it in our xml file by creating a new xml file naming colors.xml. You can select this colors palette from this link.
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- Colors for material designing --> <color name="colorPrimary">#FF1744</color> <color name="colorPrimaryDark">#D50000</color> <color name="textColorPrimary">#FFFFFF</color> <color name="windowBackground">#FFFFFF</color> <color name="colorAccent">#EF5350</color> </resources> |
Now what the use of this colors, you can see the image below
7. Now, we have to customize the theme also so go to values directory and add these code to your styles.xml file. In this we set all the colors and set actionbar false.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<resources> <!-- Base application theme, dependent on API level. This theme is replaced by AppBaseTheme from res/values-vXX/styles.xml on newer devices. --> <style name="AppBaseTheme" parent="Theme.AppCompat.Light"> <item name="windowActionBar">false</item> <item name="android:textColorPrimary">@android:color/white</item> <item name="android:textColorSecondary">@android:color/white</item> <item name="actionMenuTextColor">@android:color/white</item> <item name="android:windowNoTitle">true</item> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <!-- Theme customizations available in newer API levels can go in res/values-vXX/styles.xml, while customizations related to backward-compatibility can go here. --> </style> <!-- Application theme. --> <style name="AppTheme" parent="AppBaseTheme"> <!-- All customizations that are NOT specific to a particular API-level can go here. --> </style> </resources> |
8. Now, create a layout naming toolbar.xml in this layout create a toolbar set background and theme to it and this layout we are going to use in our other layouts.
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:local="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/common_toolbar" android:background="?attr/colorPrimary" android:elevation="4dp" local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > </android.support.v7.widget.Toolbar> |
9. Now, for other two activities we create two layouts containing toolbar. The include tag is used to include the other layouts in a layout. This make the layout reusable.
First layout name is toolbar_actionar.xml. This layout is for toolbar with actionbar.
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <include android:id="@+id/toolbar_n_actionbar" layout="@layout/toolbar" /> </LinearLayout> |
Second layout name is toolbar_noactionar.xml. This layout is for toolbar without actionbar.
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <include android:id="@+id/toolbar_noaction" layout="@layout/toolbar" /> </LinearLayout> |
10. Now, come to MainActivity.java and add the following code to that activity, in this activity i just call different activity on button clicked.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
package com.android_toolbar_demo; import android.content.Intent; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.View; import android.view.View.OnClickListener; public class MainActivity extends ActionBarActivity implements OnClickListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findViewById(R.id.toolbar_with_actionbar).setOnClickListener(this); findViewById(R.id.toolbar_without_actionbar).setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.toolbar_with_actionbar: newActivtiy(Toolbar_using_ActionBar.class); break; case R.id.toolbar_without_actionbar: newActivtiy(Toolbar_without_ActionBar.class); break; } } // Intent method void newActivtiy(Class<> activity) { startActivity(new Intent(MainActivity.this, activity)); } } |
11. For menu items on toolbar we have to make a new xml file under menu directory naming main.xml.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" > <item android:id="@+id/call" android:icon="@drawable/ic_call" android:title="@string/call" app:showAsAction="always"/> <item android:id="@+id/delete" android:icon="@drawable/ic_delete" android:title="@string/delete" app:showAsAction="always"/> <item android:id="@+id/edit" android:icon="@drawable/ic_edit" android:title="@string/edit" app:showAsAction="never"/> <item android:id="@+id/share" android:icon="@drawable/ic_share" android:title="@string/share" app:showAsAction="never"/> </menu> |
12. Now, for ToolBar with ActionBar we have to find the id of toolbar and add this line :
1 |
setSupportActionBar(toolbar); |
For inflating menu items we can inflate like we are inflating in our Android Menus Tutorial and other methods also.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
package com.android_toolbar_demo; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.widget.Toast; public class Toolbar_using_ActionBar extends ActionBarActivity { private static Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.toolbar_actionbar); // Find the id of toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_n_actionbar); // Set upon the actionbar setSupportActionBar(toolbar); // Now use actionbar methods to show navigation icon and title getSupportActionBar().setDisplayHomeAsUpEnabled(true); // or // toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_24dp); // Set title getSupportActionBar().setTitle("Toolbar using ActionBar"); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate menu items getMenuInflater().inflate(R.menu.main, menu); return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { // Show toast when menu items selected switch (item.getItemId()) { case R.id.call: Toast.makeText(Toolbar_using_ActionBar.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; case R.id.delete: Toast.makeText(Toolbar_using_ActionBar.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; case R.id.edit: Toast.makeText(Toolbar_using_ActionBar.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; case R.id.share: Toast.makeText(Toolbar_using_ActionBar.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; case android.R.id.home: // On navigation button pressed finis the activity finish(); break; } return super.onOptionsItemSelected(item); } } |
13. Now, for ToolBar without ActionBar i.e. standalone toolbar, we have to find the id of toolbar and use all the methods of toolbar only below code contains mostly all the code of toolbar like inflating menu and click listener over it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
package com.android_toolbar_demo; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.support.v7.widget.Toolbar; import android.support.v7.widget.Toolbar.OnMenuItemClickListener; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.Toast; public class Toolbar_without_ActionBar extends ActionBarActivity { private static Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.toolbar_noactionbar); toolbar = (Toolbar) findViewById(R.id.toolbar_noaction); // Set toolbar subtitle and color // toolbar.setSubtitle("Subtitle"); // toolbar.setSubtitleTextColor(getResources().getColor(R.color.textColorPrimary)); // Set toolbar logo // toolbar.setLogo(R.drawable.ic_launcher); // Inflate menu over toolbar toolbar.inflateMenu(R.menu.main); // Sett title toolbar.setTitle("Toolbar Only"); // Set navigation back icon toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_24dp); // Implement click listener on navigation icon toolbar.setNavigationOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { finish(); } }); // Implement menu click listener to do something when menu items // selected toolbar.setOnMenuItemClickListener(new OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.call: Toast.makeText(Toolbar_without_ActionBar.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; case R.id.delete: Toast.makeText(Toolbar_without_ActionBar.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; case R.id.edit: Toast.makeText(Toolbar_without_ActionBar.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; case R.id.share: Toast.makeText(Toolbar_without_ActionBar.this, item.getTitle(), Toast.LENGTH_SHORT).show(); break; } return false; } }); } } |
14. Finally, all done – run the app and you will get the output as shown in video.
Thanks.
Subscribe to us and get the latest news.