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 we change the style as NoActionbar and added the windiwLightStatusBar.
Now create a menu folder under your res folder and create a menu XML file and then add this code.
Now open your MainActivity.java and past this code.
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
Download the Source code - > https://github.com/MonsterTechnoGits/Google-Like-Toolbar-With-Custom-Profile-Image-In-MenuItem
Comments
Post a Comment