Add custom view to the right of toolbar

Question

I am trying to achieve this(A timer in toolbar with red background):

I am trying to add customView in toolbar. It always end's up being on extreme left just beside the back arrow. Like the text YP in image below is a custom Textview added to toolbar..

The code for toolbar:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:id="@+id/base_activity_toolbar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

The code for adding the layout:

    LayoutInflater mInflater= LayoutInflater.from(context);
    View mCustomView = mInflater.inflate(R.layout.textview, null);
    toolbar.addView(mCustomView);

This is the layout I am adding right now for testing:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="wrap_content"
              android:gravity="end"
              android:layout_height="wrap_content">
    <TextView android:layout_width="wrap_content"
              android:text="yp"
              android:layout_height="wrap_content"/>
</LinearLayout>

I am missing something majorly, could not figure out. Pulling my hairs out.

Change the LinearLayout's `layout_width` to `match_parent`. – Mike M. Nov 25 '15 at 06:23 — Mike M., Nov 25 '15 at 06:23

score 30 · Answer 1 · answered Jun 14 '17 at 14:00

30

I just set layout_gravity to the rightand it worked

  <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="0dp"
    android:layout_height="?android:actionBarSize"
    app:title="NEW REQUESTS"
  >
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="blahblah"
      android:layout_gravity="right"  
      />
  </android.support.v7.widget.Toolbar>

answered Jun 14 '17 at 14:00

charlag

1,020
12
20

1

I can't believe it, that actually worked! A.S. doesn't give layout_gravity as an option for TextView inside a Toolbar, so I hadn't tried it. – Anarchofascist Feb 07 '18 at 23:17
4

@Anarchofascist, yes you are right it doesn't give layout_gravity option inside Toolbar, but if you will put it by yourself, it would be accepted. – shehzy Jul 22 '18 at 14:05

Anoop M Maddasseri · Accepted Answer · 2018-08-08T05:23:58.810

24

You can add ViewGroups inside Toolbar

          <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/toolbar_height"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <RelativeLayout
             ....
            </RelativeLayout>

           </android.support.v7.widget.Toolbar>

edited Aug 08 '18 at 05:23

answered Nov 25 '15 at 06:25

Anoop M Maddasseri

10,213
3
52
73

2

When I do something like this, though, I see the TextView I've added but it no longer shows the Toolbar title. Any idea why? – AdamMc331 Jan 04 '16 at 02:07
Have you specified `getSupportActionBar().setDisplayShowTitleEnabled(false);`? or might be the `TextView` overlaid the toolbar title. – Anoop M Maddasseri Jan 04 '16 at 04:24
Yes because the `RelativeLayout` gets added to the left of the Toolbar title. Specially if you add `alignParentRight="true"`, it pushes the title out of view. I have added another answer to address this issue, a comment with all that code would be too long. – Ali Kazi Aug 01 '16 at 01:12

score 10 · Answer 3 · answered Aug 01 '16 at 02:09

Given answers work but if you want to set a title to the toolbar (most likely you will), then adding a RelativeLayout pushes the title out of view to the right. In this case you need to disable the toolbar title by setting getSupportActionBar().setDisplayShowTitleEnabled(false) and add a custom TextView next to the other view you wish to add to Toolbar. So as an example you would add a ImageView this way:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:id="@+id/base_activity_toolbar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/custom_toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            style="@style/ActionBarTitle"/>

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:scaleType="centerCrop"
            android:adjustViewBounds="true"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/custom_toolbar_title"
            android:src="@drawable/arrow"/>

    </RelativeLayout>

</android.support.v7.widget.Toolbar>

works well, for those who need `style="@style/ActionBarTitle"` there is `style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"` — Vasile Doe, Nov 24 '17 at 09:50

score 8 · Answer 4 · answered Feb 21 '17 at 15:30

8

Just had the same issue but I found a simpler (in my humble opinion) solution.

You can slightly change your code from :

LayoutInflater mInflater= LayoutInflater.from(context);
View mCustomView = mInflater.inflate(R.layout.textview, null);
toolbar.addView(mCustomView);

To :

LayoutInflater mInflater= LayoutInflater.from(context);
View mCustomView = mInflater.inflate(R.layout.textview, null);
toolbar.addView(mCustomView, new Toolbar.LayoutParams(Gravity.RIGHT));

The view is then added with gravity set to the right !

answered Feb 21 '17 at 15:30

Sylfo

657
1
7
13

Nice one this was the perfect solution if you are building views programmatically. Thank you – Bruno Oliveira Mar 14 '18 at 11:45
Perfect solution ! Works like a charm – Emre Akcan Mar 15 '19 at 17:13
Worked perfectly. I had to change the parent layout of R.layout.textview to FrameLayout – ylinkz Jun 02 '19 at 22:12

score 0 · Answer 5 · answered Nov 25 '15 at 06:22

give it a try. change R.layout.textview to

 <RelativeLayout android:layout_height="match_parent"
                android:layout_width="match_parent"
                >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="TV"
                    android:id="@+id/textView2"
                    android:layout_centerVertical="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true" />
            </RelativeLayout>

score 0 · Answer 6 · answered May 04 '20 at 11:03

I'd simply go for

<androidx.appcompat.widget.Toolbar
 ...>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="text aligned right" />

</androidx.appcompat.widget.Toolbar>

Add custom view to the right of toolbar

6 Answers6

Linked