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

Buttons not clickable in the upper half

The following buttons display_current_month and display_current_year in a fragment nested in coordinator layout are not clickable in the upper half.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_custom_calendar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp">
<Button
android:id="#+id/display_current_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"/>
<Button
android:id="#+id/display_current_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/display_current_month"
android:layout_marginTop="15dp"/>
<LinearLayout
android:id="#+id/calendar_days_of_week"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/display_current_month"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
The coordinator layout :
<android.support.design.widget.AppBarLayout
android:id="#+id/reminders_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape_rounded_rectangle">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/reminders_collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v4.view.ViewPager
android:id="#+id/calendar_view"
android:layout_width="match_parent"
android:layout_height="380dp"
android:layout_margin="5dp"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Attached screenshot with actual buttons. Any help is much appreciated.
P.S. The buttons seem to have a bottom padding, which allows the buttons to be clicked with ~ 10 dp below their border.

your view pager is located under your toolbar, that's why you can't click on your buttons and your toolbar will get your screen's touchs.
you can put below code inside your ViewPager tag in your xml.
android:layout_marginTop="?android:attr/actionBarSize"

By default buttons are clickable and should get click events callback in java file as well untill you are not setting clickListener dynamically to null.

How to add an ImageView below AppBarLayout under CoordinatorLayout?

I achieved this by adding android:layout_marginTop="112dp", is there any other way to get my ImageView just below the AppBarLayout like we do in RelativeLayout?
Also, I want this ImageView to have same drop shadow as the AppBarLayout has so the image will appear as the part of the AppBarLayout.
And I want the TextView to appear below the Image in LinearLayout.
Main Activity XML
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="112dp"
android:orientation="horizontal">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#drawable/under_tabs_triangle"/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
Fragment Main XML
<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.example.dexbyte.player.MainActivity$PlaceholderFragment">
<TextView
android:id="#+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Please check this image:

Also, I want this ImageView to have same drop shadow as the
AppBarLayout has so the image will appear as the part of the
AppBarLayout.
It can be possible by adding a CardView and the ImageView inside it or other ways for doing that but, if you want the both have the shadow, you'll probably need to remove AppBarLayout shadow since there will be shadow between the ImageView & AppBarLayout which won't look good.
And I want the TextView to appear below the Image in LinearLayout.
TextView is actually showing in the right position because you have added:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
To the ViewPager. So, everything's fine. To achieve what you want, you can add:
android:layout_marginTop="30dp" <!-- Or more ... -->
To the TextViewget to get it done.

How to center text in Android AppCompat Toolbar when Activity is added to back stack?

Trying to center a TextView in Android Toolbar, but when there's a view added to the back stack lost the centering. Seems the back item is not part of the toolbar and this causes the problem.
Here the xml for the toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
<FrameLayout
android:background="#color/primary"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This is a centered title -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_marginLeft="?attr/actionBarSize"
android:layout_marginRight="?attr/actionBarSize"
android:gravity="center_vertical|center_horizontal">
<TextView
android:id="#+id/toolbar_title"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Blah"
android:textSize="18dp"
android:textColor="#color/white"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse" />
</LinearLayout>
</FrameLayout>
When no back stack is centered:
When Activity added to back stack shows the back button and text centering is lost:

The problem is a misperception of the center TexView that you are having.
The TextView is on the center of its father(LinearLayout) but is NOT in the center of the Toolbar.
When you add a new item to the Toolbar (the navigation item), it's pushing the FrameLayout, but the TextView keep on the center of its father the LinearLayout, BUT IS NOT IN THE CENTER OF
THE TOOLBAR.
The TextView is an item of LinearLayout, and is on the center of its container the LinearLayout.
LinearLayout is an item of the FrameLayout.
FrameLayout is an item of the Toolbar.
I hope it helps you.

Set layout below navigationBar in coordinatorLayout android

The question is simple: How to set (any) layout bellow navigation bar in a coordinatorLayout?
If I use a frameLayout in a RelativeLayout, the RelativeLayout height fill the whole screen include the navigationBar.
Here is my code:
<RelativeLayout
android:id="#+id/drawer_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.design.widget.AppBarLayout
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="?android:attr/actionBarSize"
android:background="#color/primary"
app:layout_scrollFlags="scroll|enterAlways"
android:minHeight="?android:attr/actionBarSize"
app:popupTheme="#style/MaterialDrawerTheme.Light.DarkToolbar"
app:theme="#style/ToolbarTheme">
<TextView
android:id="#+id/toolbar_title"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:textColor="#color/icons" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
And the problem (after I added a fragment the frameLayout):
image 1
And the Android Studio preview screen:
image 2
(Sorry for the images, currently i haven't got enough repulation to post directly here :( )

Change android:fitsSystemWindows to false:
android:fitsSystemWindows="false"