Add custom layout to toolbar

Question

I followed this tutorial to give my app a regular toolbar with some tabs.

I want to change the toolbar so it looks more like this:

I want to add some text and images into the toolbar. How can I do this?

activity_main.xml:

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:elevation="0dp">

        <android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/primary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:theme="@style/ToolbarTheme"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextAppearance="@style/TabLayout"
            app:tabSelectedTextColor="@color/white"
            />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.design.widget.CoordinatorLayout>

that's a single line toolbar, other information is just linear layouts with the same background color. Also you can add view inside the toolbar just add a closing tag `` — NaviRamyle, Sep 25 '15 at 04:26
If I add the layout within the Toolbar tags though, does the behaviour change? What if the Toolbar is 500 pixels tall? — user5374735, Sep 25 '15 at 04:27
indirect duplicate of [Best way to create a bottom toolbar in android.](http://stackoverflow.com/questions/30063426/best-way-to-create-a-bottom-toolbar-in-android) — Elltz, Sep 25 '15 at 04:27
@Elltz This has absolutely nothing to do with a bottom toolbar. It has to do with modifying the Toolbar provided by Android. — user5374735, Sep 25 '15 at 04:28
It acts like a linear layout, it changes the height depending on the views inside the toolbar — NaviRamyle, Sep 25 '15 at 04:32
hmm what i was trying to say by that is a Toolbar is a Viewgroup, you can edit it to meet your needs like the one in my soo called "indirect dupe", hope you get it sir? — Elltz, Sep 25 '15 at 04:35
@user5374735 Have you tried to put layout in between `Toolbar` and `TableLayout` — Pratik Butani, Sep 25 '15 at 13:52

score 21 · Answer 1 · answered Sep 25 '15 at 05:14

You can try this :-

<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/main_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


        <!-   Your view --> 


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="6dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme">


      <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:id="@+id/toolbar"
         android:layout_height="?attr/actionBarSize"
         android:elevation="6dp"
         app:layout_collapseMode="pin"
         app:layout_scrollFlags="scroll|enterAlways"
         app:popupTheme="@style/AppTheme">

           <LinearLayout
               android:id="@+id/llContainer"
               android:layout_width="match_parent"
               android:orientation="vertical"
               android:background="@android:color/black"
               android:gravity="center"
               android:layout_height="300dp">

                 <!-  Your TextView / ImageView -->

            </LinearLayout>

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

      <android.support.design.widget.TabLayout
          android:id="@+id/tabs"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:tabTextAppearance="@style/TabLayout"
          app:tabSelectedTextColor="@color/white"/>

 </android.support.design.widget.AppBarLayout>

 <android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    />

</android.support.design.widget.CoordinatorLayout>

score 5 · Answer 2 · answered Oct 08 '17 at 09:13

You can define ToolBar custom layout using constraint layout as shown below, see http://www.zoftino.com/android-toolbar-tutorial for more information.

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="zoftino.com.toolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="8dp">
            <TextView
                android:id="@+id/title_m"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="16dp"
                android:text="Tennis"
                android:textAppearance="@android:style/TextAppearance.Material.Title"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>
            <TextView
                android:id="@+id/women_s"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="W Singles"
                android:textAppearance="@android:style/TextAppearance.Material.Medium"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/title_m" />
            <TextView
                android:id="@+id/wm_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:textAppearance="@android:style/TextAppearance.Material.Title"
                android:text="Serena"
                app:layout_constraintLeft_toRightOf="@+id/women_s"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/title_m" />

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


</android.support.constraint.ConstraintLayout>

score -1 · Answer 3 · answered Dec 22 '15 at 08:27

-1

The Android ActionBar is now easier to customise than ever, due to the fact that the old ActionBar element has been replaced with the more versitile Toolbar. for more detail reference link 1 and detail reference link 2

answered Dec 22 '15 at 08:27

Muhammad Waleed

2,517
4
27
75

2

This is an example of where the answer should display the important stuff from the links, in case links stops working. – jayeffkay Jan 17 '22 at 09:53

Add custom layout to toolbar

3 Answers3

Linked

Related