Tabbar and navigation drawer aligned

Question

I am trying to make an app where tab bar, navigation drawer and search all comes under the toolbar but when I try to do it in tabbar page title gets separated where I want to show the title of other fragment also Layout code

<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Boss.Main2Activity">

<android.support.design.widget.CoordinatorLayout

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

    <ImageView
        android:id="@+id/bg_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />


    <com.antonyt.infiniteviewpager.InfiniteViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <me.alexrs.fontpagertitlestrip.lib.FontPagerTitleStrip
            android:id="@+id/titlestrip"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginEnd="50dp"
            android:layout_marginStart="50dp"
            android:background="@color/material_fragment_top"

            app:fontFamily="@font/font"

            app:theme="@style/AppTheme.PopupOverlay" />

    </com.antonyt.infiniteviewpager.InfiniteViewPager>


<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="50dp"

    app:theme="@style/CustomActionBar" />

<include layout="@layout/content_main2" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

I want the layout to show the navigation drawer and tab bar and search bar icon and the page title in between the navigation drawer and search as you can see it gets too much separated. I am trying to make the toolbar like the Black Player App

Answer 1

Now what I have seen in that Black Player App, is that the title where which you want exactly the same is custom. From my point, the navigation button is not the default one it is an image on its click drawer would open and close. So in the below-given XML, I am just creating a custom top bar which in that case is a RelativeLayout and if you see it is having the default height of the action bar. Now there is just one thing that you need to do in the java file, you need to hide the toolbar from there so that automatically the custom topBar will appear on the top of it.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.bodaciousithub.myapplication.Main5Activity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="8dp"
            android:src="@drawable/ic_menu_black_24dp"
            android:layout_centerVertical="true"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/imageView"
            android:background="?attr/colorPrimary"
            android:layout_toLeftOf="@id/imageView2"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            android:layout_toEndOf="@id/imageView"
            android:layout_toStartOf="@id/imageView2"
            app:tabMode="scrollable">
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab1"/>
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab2"/>
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab3"/>

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

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_search_black_24dp"
            android:layout_alignParentEnd="true"
            android:layout_marginRight="8dp"
            android:layout_alignParentRight="true" />

    </RelativeLayout>


    <include layout="@layout/content_main5" />

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

The Last include layout statement is to add the main layout which shows the content. And the AppBar Layout is the default which comes in Navigation View so in the java file I have hidden it. You could write either getSupportActionBar().hide() or getActionBar().hide()

Below is the screenshot of the Layout that I have made.

Hope that helps!