Show/Add ImageView icon inside Material Design Toolbar in android

How to insert navigational icon into Toolbar widget header in Android Studio example tutorial.

In this tutorial we are inserting icon inside Toolbar as application icon but as per as developer requirement you can also insert back navigational icon as to go previous activity inside toolbar. So here is the complete step by step tutorial for Show/Add ImageView icon inside Material Design Toolbar in android.

android-project-download-code-button

Follow all the below steps very carefully to add Toolbar Widget in your project.

1. Open your Project’s build.gradle ( Module : app ) and  add com.android.support:appcompat-v7:23.4.0  library file.

build-gradle-app

2. Here is the code to add appcompat library inside build.gradle file.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
}

Screenshot after add this code into build.gradle file.

support-appcompat

3. Open your project’s styles.xml file and change the theme with below theme.

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

4. Open colors.xml file and set primary color and secondary color for toolbar.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#009688</color>
    <color name="colorPrimaryDark">#004D40</color>
    <color name="colorAccent">#FF4081</color>
</resources>

How to Show/Add ImageView icon inside Material Design Toolbar in android.

Code for MainActivity.java file.

package com.android_examples.toolbarwithicon_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    Toolbar toolbarWidget;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbarWidget = (Toolbar) findViewById(R.id.toolbar1);

        toolbarWidget.setTitle("Toolbar With Icon");

        toolbarWidget.setNavigationIcon(R.mipmap.ic_launcher);

        setSupportActionBar(toolbarWidget);

    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<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="com.android_examples.toolbarwithicon_android_examplescom.MainActivity"
    android:background="#ECEFF1">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar1"
        android:layout_width="fill_parent"
        android:layout_height="58dp"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:titleTextColor="#ffffff"
        >

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


</RelativeLayout>

Screenshot:

Show/Add ImageView icon inside Material Design Toolbar in android

Click here to download Show/Add ImageView icon inside Material Design Toolbar in android project with source code.

 

Leave a Reply

Your email address will not be published. Required fields are marked *