Why title is not centered in toolbar?

Why title is not centered in toolbar? - android

I am trying to add customized toolbar i want cart badge count so i added the relative layout to toolbar widget, when i didn't added relative layout in toolbar the title appeared in center but now removing relative layout causes problem in adding badge textview on cart, can anybody suggest what to do in this situation?
Toolbar.xml
<android.support.v7.widget.Toolbar
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/mytoolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp"
app:contentInsetRight="0dp"
app:contentInsetLeft="0dp"
android:clipToPadding="false"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetEndWithActions="0dp"
android:background="#color/header">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/displaytexttoolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:layout_margin="#dimen/activity_vertical_margin"
android:text="TEXT_VIEW"
android:textColor="#color/white" />
<RelativeLayout
android:layout_gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/cart_imagetoolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="end"
android:layout_margin="#dimen/activity_vertical_margin"
android:src="#drawable/cart_mobile_white" />
<TextView
android:id="#+id/tvBadge"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:background="#drawable/cart_circle_mobile"
android:gravity="center"
android:textColor="#color/white"
android:visibility="visible" />
</RelativeLayout>
</RelativeLayout>

It has to do with your layout_margin. Try the below:
<TextView
android:id="#+id/displaytexttoolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft|Right="?attr/actionBarSize"
android:text="TEXT_VIEW"
android:textColor="#color/white" />

Default value of the contentInsetStart (left padding in toolbar) is 16dp.
Change it to
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"

Try this code:
use a Framelayout instead of RelativeLayout and apply android:gravity="center" for the Title
<android.support.v7.widget.Toolbar 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/mytoolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:theme="#style/ThemeToolbar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/displaytexttoolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_vertical_margin"
android:gravity="center"
android:text="TEXT_VIEW"
android:textColor="#color/color_black" />
<ImageView
android:id="#+id/cart_imagetoolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="end"
android:layout_margin="#dimen/activity_vertical_margin"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/tvBadge"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:gravity="center"
android:src="#mipmap/ic_launcher"
android:textColor="#color/color_black"
android:visibility="visible" />
</FrameLayout>
</android.support.v7.widget.Toolbar>
Output

Related

Android Navigation toolbar remove end space

I want to remove the end space of the navigation bar. I want the WhatsApp icon clip to the end. I also tried app:contentInsetEnd="0dp" and app:contentInsetRight="0dp". I couldn't find the answer to removing end space. please help me to solve this UI design issue. also, I tried a negative margin but the issue remains.
<?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=".activity.dashboard.ActivityDashboard">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEndWithActions="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/colabbol"
android:gravity="center"
android:text="Home Screen"
android:textColor="#color/colorBlack"
android:textSize="#dimen/_20sdp" />
<TextView
android:id="#+id/textview_ramumunimji"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:fontFamily="#font/colabreg"
android:gravity="center"
android:text="#string/RAMU_MUNIMJI"
android:textColor="#color/black"
android:textSize="#dimen/_13sdp"
android:visibility="gone" />
<ImageView
android:layout_marginEnd="#dimen/_5sdp"
android:id="#+id/imageviewRamumunimji"
android:visibility="gone"
android:layout_width="#dimen/_20sdp"
android:layout_height="#dimen/_20sdp"
android:layout_alignParentEnd="true"
android:scaleType="centerCrop"
android:layout_centerVertical="true"
android:src="#drawable/ic_whatsapp_1" />
<ImageView
android:id="#+id/imageviewWhatsaapshare"
android:visibility="visible"
android:layout_width="#dimen/_20sdp"
android:layout_height="#dimen/_20sdp"
android:layout_alignParentEnd="true"
android:scaleType="centerCrop"
android:layout_centerVertical="true"
android:src="#drawable/ic_whatsapp_1" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_activity_dashboard" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:visibility="gone"
app:srcCompat="#android:drawable/ic_dialog_email" />
<!--android:layout_margin="#dimen/fab_margin"-->
</androidx.coordinatorlayout.widget.CoordinatorLayout>

How to remove the gap of icon when float left in the relative layout?

I want to remove the gap on the left of button_history but it's not working.
i have tried to use android:layout_alignParentStart="true" to align the button_history to the left but still not worked.
The icon on the left has a gap.
Below is my xml code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fireTopLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorDrowzyBg"
android:keepScreenOn="true"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/action_bar"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_close"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentEnd="true"
android:background="#drawable/ic_close" />
<Button
android:id="#+id/button_history"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentStart="true"
android:background="#drawable/ic_list" />
<TextView
android:id="#+id/text_view_countdown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="00:00"
android:textColor="#android:color/black"
android:textSize="30sp" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</RelativeLayout>
I expect it have no gap on the left button_history

The problem is due to the fact that the default behavior of Toolbars is to add white space between the border and where the RelativeLayout begins. To fix this add the following to your Toolbar.
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"

By default toolbar add some white space so, to ignore or remove these white space we can add these line of code in toolbar in xml layout app:contentInsetLeft="0dp" and
app:contentInsetStart="0dp"
Full Code Is:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fireTopLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorDrowzyBg"
android:keepScreenOn="true"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/action_bar"
android:elevation="4dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_close"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentEnd="true"
android:background="#drawable/ic_close" />
<Button
android:id="#+id/button_history"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentStart="true"
android:background="#drawable/ic_list" />
<TextView
android:id="#+id/text_view_countdown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="00:00"
android:textColor="#android:color/black"
android:textSize="30sp" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</RelativeLayout>

Apply this attribute to your toolbar:
app:contentInsetStart="0dp"

How do I use parallax to scroll through my content?

I have some issues with parallax for android, where I currently have an image on top (with text content in the center) and a button on the top right.
Now as I scroll, I want the text and button to remain fixed on screen. As I scroll past the appbar (toolbar), the toolbar should be fixed to the top and the button should be on top right of it, fixed to it , while the rest of the content stays scrollable.
Here's my code (without parallax), any clue how i can achieve this ?
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/cl_root_view"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<LinearLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/Toolbar"
android:background="#color/white"
android:contentInsetStart="5dp"
android:contentInsetLeft="5dp"
android:contentInsetEnd="5dp"
android:contentInsetRight="5dp"
app:contentInsetEnd="5dp"
app:contentInsetLeft="5dp"
app:contentInsetRight="5dp"
app:contentInsetStart="5dp"
app:titleTextAppearance="#style/Toolbar.TitleText">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/toolbar_title"
style="#style/Toolbar.AltTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerInParent="true"
android:drawableStart="#drawable/ic_dots"
android:gravity="center_vertical" />
<ImageButton
android:id="#+id/my_button"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="#+id/toolbar_title"
android:layout_marginEnd="20dp"
android:background="#drawable/ic_my_button"
android:tint="#color/black" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<TextView
android:id="#+id/roomsTitle"
style="#style/Headline2LeftBlack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_toStartOf="#+id/btnMore"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:text="#string/meeting_rooms"
android:textAppearance="#style/TextAppearance.Text.Chronicle"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:fontFamily="sans-serif"
android:letterSpacing="0.02"
android:lineSpacingExtra="2sp"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:text="#string/all_rooms"
android:textColor="#color/reddish"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v4.view.ViewPager
android:id="#+id/roomViewPager"
android:layout_width="match_parent"
android:layout_height="400dp"
android:clipToPadding="false"
android:overScrollMode="never"
android:paddingStart="15dp"
android:paddingTop="16dp"
android:paddingEnd="15dp"
android:paddingBottom="45dp"
app:layout_constraintTop_toBottomOf="#id/roomsTitle" />
<RelativeLayout
android:id="#+id/register_a_visitor_container"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_margin="5dp"
android:layout_marginTop="35dp"
android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/roomViewPager">
<ImageView
android:id="#+id/register_visitor_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:tint="#color/reddish"
android:src="#drawable/ic_register_visitor_icon"
/>
<TextView
android:id="#+id/register_a_visitor_button"
style="#style/Body1RegLeftBlack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:letterSpacing="0.01"
android:layout_marginStart="16dp"
android:layout_toEndOf="#+id/register_visitor_icon"
android:lineSpacingExtra="8sp"
android:text="#string/register_a_visitor"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.Text.Roboto.Regular" />
<ImageView
android:id="#+id/reset_password_chevron"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="16dp"
android:tint="#color/brownish_grey"
android:background="#drawable/ic_baseline_chevron_right_24px"
/>
</RelativeLayout>
<!-- TODO work on it after MVP -->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/container">
<TextView
android:id="#+id/upcoming_events"
style="#style/Headline3LeftGrey"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="25dp"
android:text="#string/upcoming_events" />
<android.support.v7.widget.RecyclerView
android:id="#+id/event_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/upcoming_events"
android:background="#color/black"
tools:listitem="#layout/item_repo_view" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
As you can see from the above layout. I want to add an image (and add the my_button on top right of that image) that is above the toolbar and scrolls off the screen as you scroll up while my button stays in its place until the toolbar gets on top ,after which the toolbar is affixed to the top as you scroll further up, unless you scroll down and the image is visible again and the button is no more fixed.
Please let me know if this is confusing,I will try to explain it better with diagrams if possible.
Any examples will be helpful! thanks!

Please refer below code, i have made something like you.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view_profile_parent_layout"
android:background="#color/splash_bg_color"
tools:context=".view_profile.ViewProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_barLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/view_profile_profile_app_bar_height"
android:elevation="#dimen/view_profile_app_bar_elevation"
android:theme="#style/ThemeOverlay.AppCompat.Light">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:titleEnabled="false"
android:fitsSystemWindows="true"
app:layout_scrollFlags="exitUntilCollapsed|scroll">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/view_profile_imageView"
android:layout_width="#dimen/view_profile_profile_width"
android:layout_height="#dimen/view_profile_profile_height"
android:src="#drawable/ic_profile_icon"
android:layout_centerHorizontal="true"
app:civ_border_width="#dimen/view_profile_profile_border_width"
app:civ_border_color="#color/textPrimary"/>
<TextView
android:id="#+id/view_profile_profile_name_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/view_profile_profile_name_margin_top"
android:layout_below="#id/view_profile_imageView"
android:fontFamily="#font/roboto_regular"
android:text=""
android:textSize="#dimen/view_profile_profile_name_text_size"
android:gravity="center"
android:textColor="#color/white"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="#dimen/login_btn_elevation"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/back_button"
android:layout_width="#dimen/back_btn_layout_w"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_alignParentStart="true"
android:orientation="horizontal">
<Button
android:layout_gravity="center_vertical|center_horizontal"
android:layout_width="#dimen/back_btn_w"
android:layout_height="#dimen/back_btn_w"
android:layout_marginStart="#dimen/default_padding"
android:clickable="false"
android:background="#drawable/ic_arrow_back_white_24dp"
android:elevation="#dimen/login_btn_elevation" />
</LinearLayout>
<TextView
android:id="#+id/nav_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_marginStart="#dimen/nav_outer_h_space"
android:fontFamily="#font/roboto_regular"
android:text=""
android:gravity="center"
android:textColor="#color/white"
android:textSize="#dimen/title_size" />
<Button
android:id="#+id/edit_button"
android:layout_width="#dimen/back_btn_w"
android:layout_height="#dimen/back_btn_w"
android:layout_gravity="right"
android:layout_centerInParent="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="#dimen/nav_outer_h_space"
android:background="#drawable/edit_white_icon"
android:elevation="#dimen/login_btn_elevation" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Use
app:layout_scrollFlags="exitUntilCollapsed|scroll"
in collapsing layout
app:layout_collapseMode="pin"
in Toolbar

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>

Custom Toolbar layout with edit text

I created a custom layout for toolbar with edittext but it does not fit in toolbar.
I needed toolbar like this
But got this output
I needed full width edittext. Help me to achive this
My XML Code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:gravity="center"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:navigationIcon="#drawable/icon_toolbar_back"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:titleTextAppearance="#style/ToolbarTextAppearance">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imgActionLogo"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_gravity="center"
android:src="#drawable/common_google_signin_btn_icon_dark" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_25sdp"
android:layout_marginBottom="#dimen/_5sdp"
android:layout_marginLeft="#dimen/_10sdp"
android:layout_marginRight="#dimen/_10sdp"
android:background="#drawable/toolbar_search_bg"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="#dimen/_5sdp"
android:paddingRight="#dimen/_5sdp"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:layout_width="#dimen/_20sdp"
android:layout_height="#dimen/_20sdp"
android:src="#drawable/icon_search" />
<EditText
android:id="#+id/etSearch"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/_5sdp"
android:background="#null"
android:editable="false"
android:hint="Search More Products..."
android:textColorHint="#color/text_medium"
android:textSize="#dimen/_10sdp" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
I also searched on google but not able to achieve this.

The inner content of the Toolbar will shrink if you use app:navigationIcon and/or menu items.
You can omit app:navigationIcon and menu items and create your own buttons inside Toolbar.
Then setting
<android.support.v7.widget.Toolbar
...
app:contentInsetRight="0dp"
app:contentInsetLeft="0dp">
...
</android.support.v7.widget.Toolbar>
should give you more control of content padding

When you are using toolbar it will add some margin space after menu icon. So you have to add search view below of toolbar with same background color parent and make it fixed if there are any scroll then add that scroll below of search layout. Try this.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_25sdp"
android:background="?attr/colorPrimary"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:gravity="center"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:navigationIcon="#drawable/icon_toolbar_back"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:titleTextAppearance="#style/ToolbarTextAppearance">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imgActionLogo"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_gravity="center"
android:src="#drawable/common_google_signin_btn_icon_dark"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_25sdp"
android:background="?attr/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_25sdp"
android:layout_marginBottom="#dimen/_5sdp"
android:layout_marginLeft="#dimen/_10sdp"
android:layout_marginRight="#dimen/_10sdp"
android:background="#drawable/toolbar_search_bg"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="#dimen/_5sdp"
android:paddingRight="#dimen/_5sdp"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:layout_width="#dimen/_20sdp"
android:layout_height="#dimen/_20sdp"
android:src="#drawable/icon_search" />
<EditText
android:id="#+id/etSearch"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/_5sdp"
android:background="#null"
android:editable="false"
android:hint="Search More Products..."
android:textColorHint="#color/text_medium"
android:textSize="#dimen/_10sdp" />
</LinearLayout>
</FrameLayout>
</LinearLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Why title is not centered in toolbar? - android

Default value of the contentInsetStart (left padding in toolbar) is 16dp. Change it to android:contentInsetStart="0dp" android:contentInsetLeft="0dp" app:contentInsetLeft="0dp" app:contentInsetStart="0dp"

Related

Android Navigation toolbar remove end space

How to remove the gap of icon when float left in the relative layout?

How do I use parallax to scroll through my content?

Unable to center the text in Toolbar title

Custom Toolbar layout with edit text

Categories

Resources