HOW TO SET CUSTOM PROFILE IMAGE IN TOOLBAR MENU ITEM LIKE GOOGLE

Hey, what's up guys in this post I will tell you how to make google like toolbar with customizable menu item like in every google product we see a profile icon which is changing depending on user login.

Here is the video tutorial for this

First, create a new project in your android studio.

Now open app-level build file and add this dependency.

dependencies {
    implementation 'de.hdodenhof:circleimageview:3.0.0'
    implementation 'com.github.bumptech.glide:glide:4.9.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
}

Now open your style.xml file and change the file according to this.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowLightStatusBar">true</item>
    </style>

</resources>

Here we change the style as NoActionbar and added the windiwLightStatusBar.

Now open your color.xml file and change all color as white.

Now download all resources from this URL and paste it under your drawable folder. -> Download

Now open your activity_main.xml file and add this code.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    tools:context=".MainActivity">


    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="2dp"
        android:background="@drawable/toolbar_background"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Now create a menu folder under your res folder and create a menu XML file and then add this code.

<?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:title="Menu One"
        android:id="@+id/menu_one"
        app:showAsAction="always"
        android:icon="@drawable/ic_attachment_black_24dp"/>
    <item
        android:title="Menu Two"
        android:id="@+id/menu_two"
        app:showAsAction="always"
        app:actionLayout="@layout/profile_menu_layout"/>
    <item
        android:title="Menu Three"
        android:id="@+id/menu_three"/>
</menu>

Now create a new layout file under your layout folder and name it as profile_menu_layout.xml and past this code.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:padding="5dp"
    android:clickable="true">
 
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/toolbar_profile_image"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"/>

</FrameLayout>

Now open your MainActivity.java and past this code.

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.MenuItemCompat;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

import com.bumptech.glide.Glide;

import de.hdodenhof.circleimageview.CircleImageView;

public class MainActivity extends AppCompatActivity {

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

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

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu, menu);

        MenuItem menuItem = menu.findItem(R.id.menu_two);
        View view = MenuItemCompat.getActionView(menuItem);

        CircleImageView profileImage = view.findViewById(R.id.toolbar_profile_image);

        Glide
                .with(this)
                .load("https://images.unsplash.com/photo-1478070531059-3db579c041d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80")
                .into(profileImage);

        profileImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"Profile Clicked",Toast.LENGTH_SHORT).show();
            }
        });

        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.menu_one:
                Toast.makeText(MainActivity.this,"Menu One Clicked",Toast.LENGTH_SHORT).show();
                break;

                //When we use layout for menu then this case will not work
            case R.id.menu_two:
                Toast.makeText(MainActivity.this,"Menu Two Clicked",Toast.LENGTH_SHORT).show();
                break;
            case R.id.menu_three:
                Toast.makeText(MainActivity.this,"Menu Three Clicked",Toast.LENGTH_SHORT).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

That's it now runs this project and looks how is it looking.

Thanks for your time we will meet in a new post.

Download the Source code - > https://github.com/MonsterTechnoGits/Google-Like-Toolbar-With-Custom-Profile-Image-In-MenuItem