Develop Reference

Android hamburger menu shouldn't have padding on the end right side

I'm having padding to the right side of my close button, how can I remove it?
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/white"
android:elevation="#dimen/elevation_default_top_app_bar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentInsetStart="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
app:contentInsetEnd="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp">
<ImageButton
android:id="#+id/buttonHamburger"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:background="#null"
android:scaleType="centerInside"
android:src="#drawable/ic_menu_black_24dp"/>
<Button
android:id="#+id/buttonClose"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
app:icon="#drawable/ic_close_black"
android:layout_gravity="end|center_vertical" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>

blank space left even after setting match_parent

i have created an Toolbar with navigation drawer and menu, now i'm trying to add a textView and edittext on the same toolbar and place them in the center, but the problem is when i add relative layout and set width as match parent, it leases some space on the left side and the items which are to be placed in the center are shifted right.
i've pasted the code below:-
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="130dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="H E A D"
android:textSize="30dp"
android:layout_centerHorizontal="true"
android:textStyle="bold"
android:id="#+id/ToolbarTextView"
style="#style/Base.TextAppearance.AppCompat.Large"
android:layout_marginTop="9dp"
android:textColor="#color/colorwhite"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ToolbarTextView"
android:layout_centerHorizontal="true"
android:text="Tagline"
android:textSize="15dp"
android:textColor="#color/colorwhite"/>
<EditText
android:layout_width="292dp"
android:layout_height="wrap_content"
android:background="#drawable/main_search"
android:padding="7dp"
android:backgroundTint="#color/colorwhite"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:hint="Search..."
android:id="#+id/ToolbarSearch1"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar></android.support.design.widget.AppBarLayout><include layout="#layout/content_main" /><android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
the xml code of the mainActivity:-
<android.support.constraint.ConstraintLayout
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.strease.user.strease.MainActivity"
android:id="#+id/layout4"
tools:showIn="#layout/app_bar_main">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:paddingTop="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/></android.support.constraint.ConstraintLayout>
the reference image is given below:-
Screenshot of the device is given below:-
P.S:- i need to omit the blank space and get the editText and textViews to the center of the layout(currently the are shifted towards right)
Navigation Drawer code in main Activity:-
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"><include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"/></android.support.v4.widget.DrawerLayout>

android:fitsSystemWindows="false"

app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
Try to add above four line in your toolbar. It will resolve your problem. And make your child layout inside width match_parent and height wrap_content. And set your sub child view alignment center to horizontally. It will resolve your problem.
If still not resolve your problem then update your XML file for your layout exactly with the included layout so we can find out what exactly problem going on with your layout.

You need to add this properties to Toolbar to remove that space.
android:contentInsetEnd="0dp"
android:contentInsetLeft="0dp"
android:contentInsetRight="0dp"
android:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
Like as below.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentInsetEnd="0dp"
android:contentInsetLeft="0dp"
android:contentInsetRight="0dp"
android:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
android:background="?attr/colorPrimary">
This will remove the default left space from Toolbar.
Here is screen shot. It seems Edit Text showing in exact center of Toolbar. Also update your minSdkVersion to 21 surely it will work.
Here is the layout code.
<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="130dp"
android:background="#android:color/holo_red_light"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorAccent"
android:contentInsetEnd="0dp"
android:contentInsetLeft="0dp"
android:contentInsetRight="0dp"
android:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/ToolbarTextView"
style="#style/Base.TextAppearance.AppCompat.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="9dp"
android:text="H E A D"
android:textColor="#android:color/white"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ToolbarTextView"
android:layout_centerHorizontal="true"
android:text="Tagline"
android:textColor="#android:color/white"
android:textSize="15dp" />
<EditText
android:id="#+id/ToolbarSearch1"
android:layout_width="292dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:background="#android:color/white"
android:backgroundTint="#android:color/white"
android:hint="Search..."
android:padding="7dp" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.AppBarLayout>
EDIT
Add another property to toolbar for Navigation Icon.
app:contentInsetStartWithNavigation="0dp"
Now your toolbar should be as below.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorAccent"
android:contentInsetEnd="0dp"
android:contentInsetLeft="0dp"
android:contentInsetRight="0dp"
android:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetStart="0dp">
EDIT 2
I have made some changes to your layout used Linear Layout instead of Relative Layout.
<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="130dp"
android:background="#android:color/holo_red_light"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorAccent"
android:contentInsetEnd="0dp"
android:contentInsetLeft="0dp"
android:contentInsetRight="0dp"
android:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/ToolbarTextView"
style="#style/Base.TextAppearance.AppCompat.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="H E A D"
android:textColor="#android:color/white"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tagline"
android:layout_marginTop="2dp"
android:textColor="#android:color/white"
android:textSize="15dp" />
<EditText
android:id="#+id/ToolbarSearch1"
android:layout_width="292dp"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:layout_marginTop="3dp"
android:backgroundTint="#android:color/white"
android:hint="Search..."
android:padding="7dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.AppBarLayout>

Unable to center the text in Toolbar title

Here is the image :
I have used a textview inside the toolbar and tried to center the textview using gravity="center". I want to center the textview without using margin shifts or padding shifts or translationX.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:title="Train App"
app:collapseIcon="#mipmap/ic_launcher"
app:titleTextColor="#color/primaryTextColor"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/appTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Train App"
android:gravity="center"
android:textSize="20sp"
android:textColor="#color/primaryTextColor"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_mood_white_24dp"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_marginRight="10dp"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>

You can try to do something like this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:theme="#style/AppTheme.AppBarOverlay"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:drawablePadding="#dimen/bounds_m"
android:fontFamily="#font/quicksand"
android:gravity="center"
android:text="#string/appname"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white"/>
</FrameLayout>
And about ic_mood_white_24dp just go with option menu instead of putting it in toolbar.

Try this..
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_light"
android:contentInsetEnd="0dp"
android:contentInsetLeft="0dp"
android:contentInsetRight="0dp"
android:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/appTitle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:text="Train App"
android:textColor="#android:color/background_dark"
android:textSize="20sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_marginRight="10dp"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

You have to add android:layout_centerHorizontal="true" property in your TextView.
Like :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/appTitle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:layout_centerHorizontal="true"
android:text="Train App"
android:textColor="#color/colorPrimary"
android:textSize="20sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_marginRight="10dp"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>

Remove left padding

I added search view to toolbar.but there is small gap in Left side between LinearLayout and toolbar.I need to remove that padding.But I did not added any padding intentionally.How can I remove that?Thanks in advance.
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/orange"
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Drawer With Swipe Tabs"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<EditText
android:id="#+id/editMobileNo"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:paddingLeft="5dp"
android:background="#drawable/login_edittext"
android:textColor="#color/orange"
android:textColorHint="#color/orange"
android:hint="#string/search"
android:drawableLeft="#drawable/search2"
android:drawablePadding="10dp"
android:gravity="left"
android:layout_weight="0.96">
</EditText>
<ImageButton
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="0.1"
android:layout_margin="5dp"
android:ems="10"
android:background="#drawable/alarm3"
android:gravity="center"
>
</ImageButton>
</LinearLayout>
</android.support.v7.widget.Toolbar>

<android.support.v7.widget.Toolbar
.
.
.
.
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp" />
Add these to remove content Inset

How to make custom toolbar like image which is given description

I am new in android development.Can anyone help me how can I customise the toolbar like the below image

<?xml version="1.0" encoding="utf-8"?>
<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/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Delivery Location"
android:layout_gravity="center"
android:textColor="#000"
android:id="#+id/toolbar_title" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jiwaji Ganj"
android:layout_gravity="center"
android:textColor="#color/tabUnselectedIconColor"
android:id="#+id/toolbar_title_location" />
</LinearLayout>