Android Toolbar was introduced in Material Design in API level 21 (Android 5.0 i.e. Lollipop) and it works as an ActionBar in the Android Activity. Android toolbar can display activity title, back arrow icon, and other views.

We can use background attribute or setBackgroundColor() method to change Toolbar color.

<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/ThemeOverlay.AppCompat.ActionBar"/>
toolbar.setBackgroundColor(getResources().getColor(R.color.red));

Example of Toolbar

In the activity_main.xml file, we have used TextView and Toolbar in LinearLayout.

/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    tools:context=".MainActivity">
        
    <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/ThemeOverlay.AppCompat.ActionBar"/>
   
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Hello World!"
        android:textColor="@color/black"
        android:textSize="20dp"/>
          
</LinearLayout>

Create main_menu.xml file for Toolbar items.

/menu/main_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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.elevenzon.toolbar.MainActivity">

    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search_black_24dp"
        android:orderInCategory="1"
        android:title="Search"
        app:showAsAction="ifRoom"/>
   
     <item
        android:id="@+id/setting"
        android:icon="@drawable/ic_settings_black_24dp"
        android:orderInCategory="2"
        android:title="Settings"
        app:showAsAction="ifRoom|collapseActionView"/>
    
    <item
        android:id="@+id/about"
        android:title="About"/>
       
</menu>

Add color in colors.xml file.

/values/colors.xml

<resources>
    <color name="colorPrimary">#f4021a</color>
    <color name="colorPrimaryDark">#f4021a</color>
    <color name="colorAccent">#FF4081</color>
    <color name="white">#ffffff</color>
    <color name="black">#000000</color>
</resources>

Add theme in styles.xml file.

/values/styles.xml

<resources>
    
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>    
        <item name="android:textColorSecondary">@color/white</item>
    </style>

</resources>

In MainActivity.java file, Initiating Menu XML file and handling menu items click. Add the back button using the setNavigationIcon() method.

/MainActivity.java

package com.elevenzon.toolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
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);
       
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.drawable.ic_arrow_back_black_24dp);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
             }   
        });
        
    }
    
    @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, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if(id == R.id.search) {
            Toast.makeText(getApplicationContext(), "Search", Toast.LENGTH_LONG).show();
            return true;
        } else if(id == R.id.setting) {
            Toast.makeText(getApplicationContext(), "Settings", Toast.LENGTH_LONG).show();
            return true;
        } else if(id == R.id.about) {
            Toast.makeText(getApplicationContext(), "About", Toast.LENGTH_LONG).show();
            return true;   
        }
        return super.onOptionsItemSelected(item);
    }

}

11zon.com is optimized for easy to learn. Examples might be simplified to learn, reading and easy understanding. We cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy.
Home   About   Contact Us   © 2021 11zon.com. All Rights Reserved.
www.11zon.com