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

Extra margin in RelativeLayout

I'm using Support Android Percentage Library's RelativeLayout AKA android.support.percent.PercentRelativeLayout but it has extra margin on the left edge same as RelaytiveLayout I didn't set any margin or padding but it's still has it, Search a lot and done anything which worked for other people... but NOT SOLVED!
Activity Main Layout codes :
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mainCoordinatorLayout"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/mainAppbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/mainToolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
<TextView
android:id="#+id/mainTitle"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
android:id="#+id/mainFlexibleSpace"
android:layout_width="match_parent"
android:layout_height="180dp">
<android.support.percent.PercentRelativeLayout
android:id="#+id/mainPercentRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/mainEnterLink"
android:text="#string/str_mainMessageText"
android:gravity="center"
android:textColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.percent.PercentRelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Any Help? See This Image of my rendered Layout Code

Check if it's a issue with the toolbar too (mainFlexibleSpace). If yes then,
Declare the toolBar in java and do this.
toolBar.setContentInsetsAbsolute(0,0);

Toolbar and tablaout and fragment to share same background image

i am very new to android i am trying to display one background image to all my tool and tabs and fragment ,i got this background image to my toolbar and tab but how to show same background image to my fragment please any one help me how to do this
my Xml code
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:id="#+id/mainActivityBar"
android:layout_alignParentTop="true"
android:background="#drawable/actionbar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="President"
android:id="#+id/appname_1"
android:background="#android:color/transparent"
android:textColor="#ffffff"
android:layout_marginLeft="20dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/myCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_below="#+id/appname_1"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="false"
android:layout_alignParentLeft="false"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="false"
android:layout_alignLeft="#+id/appname_1"
app:tabGravity="fill"
app:tabMode="scrollable"/>
</RelativeLayout>
I want like below image please any one help me how to get like below image

Try to do the following:
Set the background of your TabLayout and Toolbar to transparent.
you can do that by this attribute: android:background="#android:color/transparent"
Then set the desired background image to your root view. (In your case its most probably a CoordinatorLayout - you didn't post the full layout).
If you need a code example let me know, but it should be pretty straightforward.
EDIT:
As you requested a code example. It's just as I described above.
Instead of CoordinatorLayout as the root layout you can use of course any other layout you need.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
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="#android:color/transparent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

android:fitsSystemWindows not working on Toolbar

I'm using android library Android-ObservableScrollView from ksoichiro. I use his sample Flexible Space with viewpager and i modify it.
But there's some problem. You can see in my xml there is 2 android:fitsSystemWindows. One in LinearLayout, and the other in Toolbar. In LinearLayout working good. but in Toolbar is not working. Why this happen?
Thank you. Sorry for my bad english
theres my xml code:
<FrameLayout 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="match_parent">
<com.github.ksoichiro.android.observablescrollview.TouchInterceptionFrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_background"
android:scaleType="centerCrop"
android:src="#drawable/bridge" />
<View
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_background"
android:background="?attr/colorPrimary" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="#dimen/flexible_height">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_margin="#dimen/abc_action_bar_default_padding_material"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:minHeight="?attr/actionBarSize"
android:textColor="#android:color/white"
android:textSize="20sp" />
</FrameLayout>
<com.bright.nongkrongyuk.ui.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/black"
app:sliding_textColor="#drawable/sliding_tab_profile" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light" />
</LinearLayout>
</com.github.ksoichiro.android.observablescrollview.TouchInterceptionFrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true" />
</FrameLayout>

The android:fitsSystemWindows attribute sets a padding. This means the fitting applies to the child views. You would have to apply this either to your FrameLayout or put the Toolbar into a nested Layout
It's really tricky to make a proper fullscreen layout with views fitted to the screen. I subclassed Fragment where I can declare a content-view which will get padding depending on Status- and/or Navigationbar

How to fix copy/paste layout bug in EditText

I have own EditText in layout, I use it to search. but select the text of into EditText bug in top of my layout.
please see below photo to understand my mean
layout code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:background="#000"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.tellfa.smsbox.Search_page">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<EditText
android:id="#+id/search_bar_text"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#color/primaryColor"
android:gravity="right|center_vertical"
android:hint="#string/search_page_hing"
android:maxLength="25"
android:maxLines="1"
android:singleLine="true"
android:textColor="#color/search_hint"
android:textColorHint="#color/hint_foreground_material_dark"
android:textSize="20sp"
android:windowSoftInputMode="stateAlwaysHidden" />
Appbar code :
<android.support.v7.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="wrap_content"
android:background="#color/primaryColor"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/MyCustomToolbarTheme"
android:paddingTop="15dp"
>
how to fix it or change top of layout background ?

Update your layout like:
<RelativeLayout 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="match_parent" >
..
</RelativeLayout>
Also make sure that your project uses style
Theme.AppCompat.Light.NoActionBar
Tell me if it works for you!