javaandroidandroid-coordinatorlayoutandroid-design-library

AppBarLayout showing unexpected behaviour? How do I disable app title in CollapsibleToolBarLayout?


I unable to comprehend that Why is the App Name coming in the background ?

I have copied same layout in other projects and it is showing same results (only the App Name changes to current project)

enter image description here

The above layout is given below

<?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:id="@+id/main_content"
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">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

    <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/ThemeOverlay.AppCompat.Light"
        android:fitsSystemWindows="true"
        app:layout_collapseMode="pin"
        app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.v7.widget.CardView
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:layout_marginRight="18dp"
            android:layout_marginLeft="18dp"
            android:layout_marginTop="?attr/actionBarSize"
            app:cardBackgroundColor="?attr/colorPrimary"
            app:cardCornerRadius="4dp"
            app:cardElevation="3dp"
            app:contentPadding="6dp"
            app:layout_collapseMode="pin">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <EditText
                    android:id="@+id/etSearchPos"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="18dp"/>
                <EditText
                    android:id="@+id/etSearchLoc"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="18dp"
                    android:layout_below="@id/etSearchPos"/>
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/etSearchLoc"
                    android:text="Search"
                    android:background="@android:color/transparent"/>
            </RelativeLayout>
        </android.support.v7.widget.CardView>
    </android.support.design.widget.CollapsingToolbarLayout>


    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<!--
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_done" />
    --></android.support.design.widget.CoordinatorLayout>

Solution

  • Change :

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

    To

     <android.support.v4.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <android.support.v4.view.ViewPager
                        android:id="@+id/viewpager"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                         />
    
                   // other views ...
    
    
                </LinearLayout>             
    
     </android.support.v4.widget.NestedScrollView>
    

    Edit :

    In case you are referring about the AppName, Its the title of your ToolBar. you can set it by below way. By default it will take your Application name.

    Whenever app uses CollapsingToolbarLayout , For changing the title of ToolBar we need to set title of CollapsingToolbarLayout

    Programmatic way :

     final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
    
            CollapsingToolbarLayout collapsingToolbar =
                    (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
            collapsingToolbar.setTitle("");  //Set Empty if you do not want to show anything
    

    Alternative Way :

     <android.support.design.widget.CollapsingToolbarLayout
                    android:id="@+id/collapsing_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    app:title="">
    

    Alternative way :

    oh it can be resolved using following

    app:titleEnabled="false"

    <android.support.design.widget.CollapsingToolbarLayout
                    android:id="@+id/collapsing_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    app:titleEnabled="false">