0

Today i have stucked in one of the weird problem in Toolbar custom header.
I am using the TextView in the center and ImageView which is at the right of the Toolbar. So i have used below lines of code in xml , please check it once.

<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:theme="@style/AppTheme.NoActionBar.AppBarOverlay"> <LinearLayout 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:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#3EC3D6" app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <TextView android:id="@+id/headerTxt" style="@style/Base.TextAppearance.AppCompat.Medium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="marquee" android:gravity="center" android:layout_gravity="center" android:maxLines="1" android:text="Tile" android:textColor="@android:color/black" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/chat_new_icon" android:layout_gravity="right" /> </LinearLayout> </android.support.v7.widget.Toolbar>

And getting these output from above code. enter image description here

I have used the RelativeLayout for it to come out from this problem, But it also NOT worked.Please check the below code for it

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#3EC3D6" app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/headerTxt" style="@style/Base.TextAppearance.AppCompat.Medium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="marquee" android:gravity="center" android:layout_gravity="center" android:layout_centerInParent="true" android:maxLines="1" android:text="Tile" android:textColor="@android:color/black" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/chat_new_icon" android:layout_alignParentRight="true" android:layout_gravity="right" /> </RelativeLayout> </android.support.v7.widget.Toolbar>

And getting another unexpected result please check it once. enter image description here

I have already refer this solution but it is not working for me.Please check the link once.
1. First Link
2. Second Link
3. Third Link
4. Forth Link

What i need that TextView should at the center of the Toolbar and ImageView should at the right of the Toolbar.Please help me to short out from this problem.

Improve this question
9
  • 1
    try to add app:contentInsetEnd="0dp" app:contentInsetEndWithActions="0dp" app:contentInsetLeft="0dp" app:contentInsetRight="0dp" app:contentInsetStart="0dp" app:contentInsetStartWithNavigation="0dp" in toolbar Commented Aug 10, 2017 at 13:37
  • @DivyeshPatel Have tried urs suggestion NOT worked :( Commented Aug 10, 2017 at 13:41
  • 1
    Remove the LinearLayout inside the Toolbar from the first layout you posted in the question. Commented Aug 11, 2017 at 3:40
  • 1
    No problem. Here's a somewhat similar question, and my answer there has an explanation of why that's not centering, and how exactly to setup the child Views, in case my comments aren't that clear. Do note that the LinearLayout there is used just to stack those two TextViews vertically. It doesn't fill the Toolbar, or hold everything in it. Commented Aug 11, 2017 at 4:05
  • 1
    @MikeM. Thanks for valueable comment works :) Commented Aug 11, 2017 at 6:03

4 Answers 4

Reset to default
1

This is what comes at my end 

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:local="http://schemas.android.com/tools" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#3EC3D6" app:layout_collapseMode="pin" local:popupTheme="@style/ThemeOverlay.AppCompat.Light"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/headerTxt" style="@style/Base.TextAppearance.AppCompat.Medium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:ellipsize="marquee" android:maxLines="1" android:text="Tile" android:textColor="@android:color/black" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toRightOf="@+id/headerTxt" android:src="@drawable/delete_icon" /> </RelativeLayout> </android.support.v7.widget.Toolbar>

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

What i need @MohdSaquib that , Title should be in center and image at the right..
In my solution i think your requirement is fulfilling , it will not comes at centre perfectly because of action bar property and rest of the thing is shown as in image i share.4
I need it center bro..That what i have asked the questin on SO.Thanks for urs value bale time
0

Just update your code...edited your relative layout implementation

<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/headerTxt" style="@style/Base.TextAppearance.AppCompat.Medium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="marquee" android:layout_centerInParent="true" android:maxLines="1" android:text="Tile" android:textColor="@android:color/black" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/chat_new_icon" android:layout_toRightOf="@+id/headerTxt" android:layout_centerVertical="true" /> </RelativeLayout>
Improve this answer

3 Comments

Will you please give your @style/AppTheme.NoActionBar.PopupOverlay
Please check <style name="AppTheme.NoActionBar.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
@RavindraKushwaha i have posted second answer with complete toolbar layout its working please check...
0

This is working ...

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:local="http://schemas.android.com/tools" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#3EC3D6" app:layout_collapseMode="pin" local:popupTheme="@style/ThemeOverlay.AppCompat.Light"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/headerTxt" style="@style/Base.TextAppearance.AppCompat.Medium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:ellipsize="marquee" android:maxLines="1" android:text="Tile" android:textColor="@android:color/black" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toRightOf="@+id/headerTxt" android:src="@drawable/delete_icon" /> </RelativeLayout> </android.support.v7.widget.Toolbar>
Improve this answer

2 Comments

I have tried urs second solution , but it also not working,Please check the output from above code. ibb.co/m7Zqzv
i have once again mention code and screen shot what output is coming , i posted it
0

@MikeM. suggestion has worked for me. For more detail on the issue please refer this link click here

What i have done to get rid off from the problem is that I have removed the LinearLayout inside the Toolbar and set the gravity of the view with help of android:layout_gravity, Please refer the below solution for it

 <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#3EC3D6" app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay"> <TextView android:id="@+id/headerTxt" style="@style/Base.TextAppearance.AppCompat.Medium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:ellipsize="marquee" android:maxLines="1" android:text="Tile" android:textColor="@android:color/black" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_marginRight="10dp" android:src="@drawable/chat_new_icon" /> </android.support.v7.widget.Toolbar>

And getting the expected result from above code, please check it once. Output

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.