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

Soave

Tried to help you but seems the infiniteviewpager library is broken github.com/antonyt/InfiniteViewPager/issues/35 – Carny

@Lunatikul Sir if I change the infinite view page with normal view pager then will you be able to help me ?? – Soave

@Lunatikul if you can do it with simple viewpager it will also considered as answer – Soave

Have you used the default navigation activity of android? if yes then you need to change the layout of appBar that is created in xml. I have written the code for it but I just need to verify that you have used the default navigation activity? – Norge

Ya it's the default one @harsh jain – Soave

If you want I can put the main activity code also – Soave

there would have been one appbar layout file kindly put that here so that I could check if my code is written on the same layout only. And this appBar layout should be included in the main activity xml @NeelaySrivastava – Norge

No I am not using any appbarlayout as i cannot use the paper title in its just parallax view the top one is toolbar – Soave

I think then the activity code would be helpful. Kindly edit the post and the code.@NeelaySrivastava – Norge

@harshjain the viewpager is not the issue the pagertitle is the issue and you can not set any thing from the java that will effect much in the pagertitle if you have any solution in layout let me know – Soave

@NeelaySrivastava I have done changes in layout only not in the java code. Should I post the whole code maybe you'll get the crux out of it? – Norge

Bro are you getting the same output if not check the black player – Soave

@harsh jain really appreciate your effort bro – Soave

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!

Norge

so i have to use the tab layout that's the only possible way right ? or I can use the other way – Soave

I have use a tab layout as it would be easy to use with viewpager but if you have anything in mind specifically you should try that! @Neelay Srivastava – Norge

@NeelaySrivastava So did it help? – Norge

@NeelaySrivastava No Problem but did it help! – Norge

Ya bro the problem was I didn't see in that way as I don't use tab layout . And I have to remove the infinite view pager – Soave

@NeelaySrivastava Great if it worked. Could you also accept the answer? It would be really helpful. – Norge

I have accepted and upvoted bro may be due to the app – Soave

@NeelaySrivastava okay no problem. Thanks – Norge

bro need some help i am using style in the tablayout to change the font style and size of the font but it is only working in the landscape mode not in other mode any idea – Soave

@NeelaySrivastava can you share the code, it would help a lot. Maybe send it on a private chat. – Norge

bro how private chat i tried github but i cannot contact you here is the link pastebin.com/jKWb86yx i was trying on fb also but didnt find you p;) – Soave

@NeelaySrivastava I have updated the FB id on my stack profile. message me there I just to ask a few questions related to layout. And sorry for this late reply. – Norge