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>

Answer 1

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>

Answer 2

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>

Answer 3

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