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 som

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

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

Answer 3

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>