android material design top app bar

Introduction

In this lecture we will describe about how can createToolbar in Android Material design.And also describe what is Toolbar. why we can use it.After reading this lecture you will understand Toolbar. And i hope you will create App bar or Toolbar of your application.

Prerequisite

If you not understand this lecture. Toolbar in android Material design.You should also read my previous lectures How to Create Project – Material design And Toggle button in android studio.This is a complete series for beginners. After reading these lecture you will also able Understand Material design and also create app bar of your application.

What is Toolbar

In any application Toolbar are appears at the top of the screen.These are the boxes at the top and control the different function of the application.Each box have there own functionality .Toolbar are also provide a quick access to use the different functionality of application.Toolbar are also called action bar used for layout while there is a part of activity.It always consists of Navigation button Logo image and title and subtitle.The Action Bar was both less customizable and hard to style.New components are available in API 5.0 and above

Toolbar in Android Material design

Implementation Section

First part we describe how can add Toolbar in app
Second part we describe how can Customize the Toolbar in app
Third part we describe how can add action in Toolbar bar

These are some step that are use to make ToolBar

Use the Theme.AppCompact.Light.NoActionBarActivity to prevent system for showing action bar.
Define app_bar.XML for containing a Toolbar.
Use <include> in your layout.xml to add the Toolbar.
Instantiate the toolbar using FindViewById inside the activity
Call SetSupportActionBar() and pass your Toolbar object.
Customize the App:Them And Popup them.

After that you will open Style.XML file and write the following code

</style>

<item name ="colorPrimary">@color/primaryColor</item>

<item name ="colorPrimaryDark">@color/primaryColorDark </item>

<item name ="colorAccent">@color/accentColor </item>

</style>

</resources>

And Write the following code Style. XML (V21)

<? xml version = "1.0" encoding = "utf-8" ?>

<item name ="android : colorPrimary">@color/primaryColor</item>

<item name ="android : colorPrimaryDark">@color/primaryColorDark </item> -->

<item name ="android : colorAccent">@color/accentColor </item> -->

</style>

</resources>

Now we create a new Layout.

Step 1=<- create a new Layout name app_bar.XMl->Right click> the ->layout folder-> select ->New option-> and click ->layout resource folder->

Step3=Step2->WriteName->Ok.

Alt Tag android material design image for toolbar

And Write the following code app_bar layout. XML file

<? 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 = "50dp "

android: background = "#CCC"

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

After that you will open color.XML file and write the following code

<? xml version = "1.0" encoding = "utf-8" ?>

</resources>

After that you will open activity_main.XML file and write the following code

<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 = "materialtes.alienslab.com.materialtes.MainActivity" >

<include android: id = "@+id/app_bar"

layout = "@layout/app_bar" />

<TextView

android: layout_below = "@+id/app_bar"

android: layout_width = "wrap_content"

android: layout_height = "wrap_content"

android: text = "@string/hello_world" />

</RelativeLayout>

After that you will open MainAvtivity.java class file and write the following code

package materialtes . alienslab . com . materialtes ;

import android . support . v7 . app . ActionBarActivity ;

import android . os . Bundle ;

import android . view . Menu ;

import android . view . MenuItem ;

import android . widget . Toast ;

import android . support . v7 . widget . Toolbar ;

public class MainActivity extends ActionBarActivity {

private Toolbar toolbar ;

@Override

protected void onCreate ( Bundle savedInstanceState ) {

super . onCreate ( savedInstanceState ) ;

setContentView ( R . layout . activity_main ) ;

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

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 ) {

Toast . makeText ( this , "run the application" + item . getTitle ( ) , Toast . LENGTH_LONG ) . show ( ) ;

return true ;

}

return super . onOptionsItemSelected ( item ) ;

}

Run the Application

Alt tag Toolbar in android material design

Second part we describe how can Customize the Toolbar in app

In this part we learn about how can customize the the Toolbar .So how can change the color So this is a work that will done this section.please read this lecture carefully all the detail is provides step by step.For more detail about How can customize the Toolbar in android material design please click on customize the Toolbar in android material design

After that you will open Style.XML file and write the following code

</style>

<item name ="colorPrimary">@color/primaryColor</item>

<item name ="colorPrimaryDark">@color/primaryColorDark</item>

<item name ="colorAccent">@color/accentColor</item>

</style>

<item name ="android : textColorSecondary">#FFFFFF</item>

</style>

</resources>

After that you will open color.XML file and write the following code

<? xml version = "1.0" encoding = "utf-8" ?>

</resources>

And Write the following code app_bar layout. XML file

<? 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 = "50dp "

xmlns: app = "http://schemas.android.com/apk/res-auto"

android: background = "@color/primaryColor"

app: theme = "@style/MyCostomToolbarThem"

app: popupTheme = "@style/ThemeOverlay.AppCompat.Dark"

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

Run the Application

Alt Tag toolbar abdroid materiald esign customize

Third part we describe how can add action in Toolbar bar

In this part we learn about how can can add action in Toolbar bar.In this part we add a image in app bar or toolbar and when user click on a image button or navigation then can be move in next page or open a new activity.In second Activity inside the app bar we also add a button. when user click on this button also move in your Main Activity. So this is a work that will done this section.please read this lecture carefully all the detail is provides step by step.For more detail about How can customize the Toolbar in android material design please click on customize the Toolbar in android material design.

Step 1=Image add<-copy image->and<-paste image>into <-drawable folder-> that are used in app bar.

And Write the following code menu_main . 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 = "materialtes.alienslab.com.materialtes.MainActivity" >

<item android: id = "@+id/action_settings" android: title = "@string/action_settings"

android: orderInCategory = "100" app: showAsAction = "never" />

<item android: id = "@+id/navigate"

android: title = "@string/next"

android: orderInCategory = "100"

android: icon = "@drawable/ic_next"

app: showAsAction = "always" />

</menu>

We need to create a new how can create following the below steps.

Step2: <-ADDActivity name SubActivity ->Click on <-java folder-> and expand this folder and right click on <-package name-> select <-new option-> then you select <-activity option-> they are many categories then you finally select <-blank activity-> show in below pic.

Alt Tag material design

Step3=Step2->WriteName->Ok

After that you will open activity_sub.XML file and write the following code

<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 = "materialtes.alienslab.com.materialtes.SubActivity" >

<include android: id = "@+id/app_bar"

layout = "@layout/app_bar" />

<TextView

android: layout_width = "wrap_content"

android: layout_height = "wrap_content"

android: text = "@string/hello_world1"

android: layout_below = "@+id/app_bar"

</RelativeLayout>

After that you will open SubAvtivity.java class file and write the following code

package materialtes . alienslab . com . materialtes ;

import android . support . v4 . app . NavUtils ;

import android . support . v7 . app . ActionBarActivity ;

import android . os . Bundle ;

import android . view . Menu ;

import android . view . MenuItem ;

import android . support . v7 . widget . Toolbar ;

public class SubActivity extends ActionBarActivity {

private Toolbar toolbar ;

@Override

protected void onCreate ( Bundle savedInstanceState ) {

super . onCreate ( savedInstanceState ) ;

setContentView ( R . layout . activity_sub ) ;

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

setSupportActionBar ( toolbar ) ;

getSupportActionBar ( ) . setHomeButtonEnabled ( true ) ;

getSupportActionBar ( ) . setDisplayHomeAsUpEnabled ( true ) ;

}

@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_sub , 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 ;

}

if ( id == android . R . id . home ) {

NavUtils . navigateUpFromSameTask ( this ) ;

}

return super . onOptionsItemSelected ( item ) ;

}

Note

When you run the application its gives errors. So you will open a manifests file add the following code inside Activity.

& lt ; meta - data android : name = "android.support.PARENT_ACTIVITY" android : value = ".MainActivity" & gt ; & lt ; / meta - data & gt ;

After that you will open MainAvtivity.java class file and write the following code

package materialtes . alienslab . com . materialtes ;

import android . content . Intent ;

import android . support . v7 . app . ActionBarActivity ;

import android . os . Bundle ;

import android . view . Menu ;

import android . view . MenuItem ;

import android . widget . Toast ;

import android . support . v7 . widget . Toolbar ;

public class MainActivity extends ActionBarActivity {

private Toolbar toolbar ;

@Override

protected void onCreate ( Bundle savedInstanceState ) {

super . onCreate ( savedInstanceState ) ;

setContentView ( R . layout . activity_main ) ;

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

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 ) {

Toast . makeText ( this , "run the application" + item . getTitle ( ) , Toast . LENGTH_LONG ) . show ( ) ;

return true ;

}

if ( id == R . id . navigate ) {

Intent r = new Intent ( MainActivity . this , SubActivity . class ) ;

startActivity ( r ) ;

}

return super . onOptionsItemSelected ( item ) ;

}

Run the Application

Alt Tag Toolbar in android material design navigation

When you run the application and click on navigation image then a new activity will open. this activity have action bar as they main activity.In this activity have also a button in left side when user click on this button will be move in mainActivity.

Alt Tag Toolbar in android material design navigation1

Conclusion

In this lecture we learn about Android Material design.First part we describe how can add Toolbar . Second part we describe how can Customize the Toolbar .Third part we describe how can add action in Toolbar bar. I hope you will understand this lecture.Thank you for reading this lecture Hope you got the idea.