Develop Reference

Aligning an overflow menu item's icon with the Toolbar Title

EDIT: I now have a custom Toolbar in a separate layout (toolbar.xml) from that of my activity_main.xml. The new layout now contains just one TextView for the title. The Toolbar however, has an overflow menu which contains only one item (the settings icon) and it's set to showAsAction="always". However, in the layout preview i can't see the actual settings icon thus i'm not able to align my title TextView with the icon in order to avoid any misalignments (see image). Any ideas?
toolbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#drawable/toolbar_gradient"
android:elevation="4dp"
app:titleTextColor="#android:color/white"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/toolbar_title_placeholder"
android:fontFamily="#font/montserrat_semibold"
android:textColor="#android:color/white"
android:textSize="20sp" />
</androidx.appcompat.widget.Toolbar>
As you can see in the image below, my title TextView is misaligned in regards to the overflow menu item (settings icon). Is there a way i can fix that?

70dp is a non-standard height for a toolbar which is the underlying issue with your layout. If you stay with the 70dp toolbar height, you will need to make adjustments to the toolbar layout.
Here is one way that just modifies the XML layout. The 7dp padding in the toolbar will shift the icon down. Corresponding changes to the text view keep it aligned.
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#android:color/holo_blue_light"
android:elevation="4dp"
android:paddingTop="7dp"
app:layout_scrollFlags="scroll|enterAlways"
app:titleTextColor="#android:color/white">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="center_horizontal|top"
android:gravity="center"
android:text="#string/toolbar_title_placeholder"
android:textColor="#android:color/white"
android:textSize="20sp" />
</androidx.appcompat.widget.Toolbar>
To understand what is happening, make the changes and run the app. In Android Studio, go to Tools->Layout Inspector and choose your device and the app. What you will see is a dump of the layout that you can examine.
This method works with what you have posted. It may have side effects with the placement of other views so be on the lookout.
An alternatative involves code to retrieve the view that corresponds to the settings icon. If I recall, it's not pretty.
btw, you don't see the settings icon in Android Studio because menu items are added at run time.

Add CoordinatorLayout & AppBarLayout with app:elevation="0dp".
<?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"
>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:titleTextAppearance="#style/Toolbar.TitleText"
app:layout_scrollFlags="scroll|enterAlways"
>
//Your work
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
//Your work
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

As we know Android has some specific rules in design pattern like toolbar size, icon size, etc.
Android prefers using actionBarSize in the toolbar.
?android:attr/actionBarSize
In your case, if you need your custom size toolbar then you should create your own custom toolbar like below:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#color/colorWhite"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:elevation="0.1dp"
android:paddingEnd="10dp"
android:paddingStart="10dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways|snap"
tools:targetApi="lollipop">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/search_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="start"
android:orientation="horizontal">
<ImageView
android:id="#+id/toolbar_start_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_search_black_24dp"
/>
</LinearLayout>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/bold"
android:gravity="center"
android:text="Visit Tulsipur"
android:textColor="#color/colorBlack"
android:textSize="18sp" />
<LinearLayout
android:id="#+id/notification_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="end"
android:orientation="horizontal">
<ImageView
android:id="#+id/toolbar_end_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/ic_notifications_none_black_24dp"
/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Now you can set on click in defined ImageView/Layout.
OUTPUT

Adding items and design on toolbar toolbar

How to add the different type of designs and color to a toolbar and showing the value(value depends on user points) on toolbar gets updated whenever the user goes to another activity.

You can take RelativeLayout inside Toolbar and customize it according to your requirement. Here is sample Code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorPrimary"
app:navigationIcon="#mipmap/ic_launcher_round"
app:titleTextColor="#android:color/white">
<RelativeLayout
android:id="#+id/rl_plane_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<ImageView
android:id="#+id/tv_submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:src="#mipmap/ic_launcher_round"
android:text="Submit" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

app:elevation="0dp" hide layout inside toolbar

I have take custom layout inside the toolbar and perform action according to it.
but in some case i want make toolbar transparent so when i have set app:elevation="0dp" than it will hide my custom layout but still action will performed when click on that area.
I have used following layout inside toolbar.
Edited
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
app:elevation="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="#null"
android:padding="#dimen/activity_vertical_margin"
android:src="#drawable/ic_menu" />
<FrameLayout
android:id="#+id/frmNotification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/iv_menu"
android:layout_toRightOf="#+id/iv_menu"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:padding="#dimen/padding_5">
<ImageView
android:id="#+id/iv_notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="#null"
android:padding="#dimen/padding_5"
android:src="#drawable/ic_notification" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="#dimen/padding_5"
android:background="#drawable/bg_bage">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/eight"
android:textColor="#android:color/white"
android:textSize="#dimen/font_8" />
</FrameLayout>
</FrameLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/frmNotification"
android:contentDescription="#null"
android:src="#drawable/logo_header" />
<ImageView
android:id="#+id/ivElasticSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingLeft="#dimen/padding_10"
android:paddingRight="#dimen/padding_15"
android:src="#drawable/ic_search" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
How to overcome this issue because in some scenario we want transparent toolbar but icon inside it should be display.
Here I have attached image how actually look like.

Your idea of app:elevation="someValue" is wrong, it does not hide the toolbar.The attribute app:elevation is used to show how much you want to make the toolbar or any other view that supports that attribute raised above the surface. Consider the surface as the floor on which the views are placed, now if you want to show some view like toolbar raised to other views you use that attribute.
if you want to make it transparent do it like this.
According to Material Design Guidelines, the elevation for appbar should be 4dp. So you should not set it to 0dp.

Use android:background="#null" instead of app:elevation="0dp".
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null">
EDIT
You want to remove the shadow of the toolbar. To do that use app:elevation="0dp" only for appbar layout. Your code before revision shows you used for both toolbar and appbar. Remove it for toolbar.
UPDATE
I tested the code and the following code seemed to do the work.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#drawable/testbg">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarMain"
app:elevation="0dp"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#null"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<!-- Rest of the code -->
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
OUTPUT IMAGE

Center Toolbar Title in custom toolbar with icons and navigation drawer toggle button

I'm trying to implement a toolbar in an app with navigation drawer. Now I'm trying to center the title of my Toolbar for all fragments. My Problem is, that I sometimes have an icon to the right of the hamburger icon from the navigation drawer and i have an app icon on the left side of the toolbar. To make these extra icons visible i have to use a Relative Layout, otherwise the app icon on the left would be missing.
The XML of my Activity with the toolbar looks like this:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:context="app.activities.HomeActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/home_toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/white"
app:contentInsetStartWithNavigation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/search_toolbar_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/icon_search_hightlighted" />
<ImageView
android:id="#+id/refresh_toolbar_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/icon_refresh"
android:visibility="gone"/>
<TextView
android:id="#+id/actionbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/action_bar_title_home"
android:gravity="center"
android:textColor="#color/black"
android:textSize="18sp" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:scaleType="centerCrop"
android:layout_alignParentRight="true"
android:src="#drawable/app_logo" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<fragment
android:id="#+id/navigation_drawer"
android:name="app.fragments.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_marginTop="?attr/actionBarSize"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
I set the visibility of the toolbar icons on the left to gone or visible depending of the chosen fragment.
Does anyone know how it would be possible to center the toolbar title and still have my ImageViews visible in my toolbar?
Thanks in advance.
EDIT
My Toolbar Title isn't centered at the moment. It's positioned like in this question:
ToolBar title doesn't center
I've already read that it would be possible to center it if the the relative Layout would be gone and set the layout gravity of the TextView to center_horizontal but this doesn't work for me because my ImageView of the App wouldn't appear on the right of the toolbar.

I haven't got enough reputation to comment.
Your question is a bit unclear to me. If I understand correctly, you have already managed to center the title, but when you set the imageViews' visibility to gone, the title is no longer centered?
If that is correctly understood, have you tried setting the imageViews' visibility to invisible instead of gone? When doing so, the imageView will still take up the same space in the layout, but will not be visible to the user.

try the following property for toolbar.
<android.support.v7.widget.Toolbar
xmlns:app="schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp" />

I solved it like that now:
<android.support.v7.widget.Toolbar
android:id="#+id/home_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="center"
android:background="#color/white"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
<ImageView
android:id="#+id/search_toolbar_icon"
android:layout_width="36dp"
android:layout_height="36dp"
android:src="#drawable/icon_search_hightlighted" />
<TextView
android:id="#+id/actionbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/action_bar_title_home"
android:textColor="#color/black"
android:textSize="18sp" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/nav_icon"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp" />
<ImageView
android:id="#+id/refresh_toolbar_icon"
android:layout_width="36dp"
android:layout_height="36dp"
android:padding="8dp"
android:src="#drawable/icon_refresh"
android:visibility="gone"
tools:visibility="visible" />
</android.support.v7.widget.Toolbar>

how to place logo in the center of actionbar toolbar in android?

I want to display the logo at the centre of the Action Bar. Here's my layout code: the below code should work but it did not why? please help me
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo"
android:layout_gravity="center"
/>
</LinearLayout>
And in the onCreate()
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.custom_logo);

Your Toolbar is just like a ViewGroup that can hold other views.So an easier approach will be to place an ImageView in the Toolbar.For eg:-
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/material_blue"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/ToolbarCustomIconColor" >
<RelativeLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_content" >
<ImageView
android:id="#+id/imgLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/your_icon" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
You can create a custom Toolbar like this and manipulate it as much as you want .