CollapsingToolbarLayout contains ViewPager and a search box in it. How to prevent the search box only from collapsing,while ViewPager collapses

Question

I am using CollapsingToolbarLayout in my Fragment. It contains A RelativeLayout consisting of a ViewPager and an EditText aligned in top of ViewPager. When the user scrolls down the toolbar collapses. What i want is when it collapses I want to make only the ViewPager collapse but Edit Text remain un collapsed.

This is my XML file:

<?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:orientation="vertical"
    android:layout_marginBottom="10dp"
    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:fitsSystemWindows="true">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                android:fitsSystemWindows="true"
                app:contentScrim="@color/colorPrimaryDark"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="180dp">

                    <android.support.v4.view.ViewPager
                        android:id="@+id/view_pager"
                        android:layout_width="match_parent"
                        android:layout_height="180dp"
                        android:layout_gravity="top"
                        android:scaleType="centerCrop"
                        android:background="@drawable/loading_image"
                        android:fitsSystemWindows="true"
                        app:layout_collapseMode="pin" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:id="@+id/user"
                        android:text=""
                        android:gravity="center"
                        android:layout_centerInParent="true"
                        android:textSize="16sp"
                        android:textColor="#ff0000"/>
               <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:layout_below="@+id/user"
                    android:layout_marginLeft="15dp"
                    android:layout_marginRight="15dp">

                    <EditText
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="Search here"
                        android:padding="10dp"
                        android:id="@+id/srch"
                        android:textColor="#000"
                        android:maxLines="1"
                               android:background="@drawable/search_border_grey"/>

                    <ImageButton
                        android:id="@+id/button1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:src="@drawable/search_24"
                        android:layout_centerVertical="true"
                        android:background="#fff"
                        android:layout_margin="5dp"
                        android:text="Button"/>
                </RelativeLayout> 



                    <LinearLayout
                        android:id="@+id/layoutDots"
                        android:layout_width="match_parent"
                        android:layout_height="30dp"
                        android:layout_alignParentBottom="true"
                        android:layout_marginBottom="10dp"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:orientation="horizontal"></LinearLayout>
                </RelativeLayout>
                <android.support.v7.widget.Toolbar
                    android:id="@+id/collapsing_toolbar2"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin">

                </android.support.v7.widget.Toolbar>
            </android.support.design.widget.CollapsingToolbarLayout>



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

    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:id="@+id/root_layout"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <GridView
            android:id="@+id/customgrid"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:paddingBottom="10dp"
            android:gravity="center"
            android:horizontalSpacing="10dp"
            android:numColumns="2"
            android:verticalSpacing="3dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

I have tried adding a new layout below AppBarLayout and making it visible on collapsing of Toolbar, but its having a bad user experience since it causes the ui flicker. Is there solution for my requirement. All your responses are appreciated.

Use appbarlayout behaviour and change your view at end of appbarlayout at top. — Mohamed Mohaideen AH, Oct 07 '18 at 09:33
[Check here](https://stackoverflow.com/a/51872837/4824088) how can i change view in collapse will help you..! — Mohamed Mohaideen AH, Oct 07 '18 at 09:44

score 2 · Accepted Answer · answered Oct 07 '18 at 09:42

2

When the user scrolls down the toolbar collapses. What i want is when it collapses I want to make only the ViewPager collapse but Edit Text remain un collapsed.

You have added "scroll|exitUntilCollapsed" in the CollapsingToolbarLayout which means, it will close-exit the view when it collapsed.

In order to make EditText (Search) stay in there, I'd suggest adding the EditText inside the CoordinatorLayout as it's child then, anchoring it to the AppBarLayout. Just like when we anchor a Fab inside CoordinatorLayout.

app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|center" // change it for your own porpuse

The other way I'd suggest (Not tested), would be adding :

app:layout_collapseMode="pin"

To your View (EditText or Container of that) or, changing the flags to:

app:layout_scrollFlags="scroll|snap"

In the CollapsingToolbarLayout.

It can however be done by handling AppBarLayout behavior to detect when it is collapsed or expended:

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset)
{
    if (offset == 0)
    {
        // Fully expanded
        // make your view visible or not collapsible here maybe?
    }
    else
    {
        // Not fully expanded or collapsed
    }
}

Check: How can i determine that CollapsingToolbar is collapsed?

answered Oct 07 '18 at 09:42

ʍѳђઽ૯ท

16,646
7
53
108

1

app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|center" this one works, but when scrolls down the Grid View overlaps the EditText. How can i avoid the overlapping? – visakh r Oct 07 '18 at 10:06
@visakhr Instead of `RelativeLayout`, add `NestedScrollView` and it will work fine. – ʍѳђઽ૯ท Oct 07 '18 at 10:08
It works, but when I add the EditText and GridView to NesterScrollView, Grid View not fitting the view, it shows only 1 row – visakh r Oct 07 '18 at 11:07
**Don't add the `EditText` inside `NestedScrollView`**. Here `NestedScrollView` means **the content of the layout** which we show data on it. I meant by adding the `EditText` inside `CoordinatorLayout` was to where we put or add `Fab` Button. It should be under the `AppBarLayout` and as a child of `CoordinatorLayout`. – ʍѳђઽ૯ท Oct 07 '18 at 11:10
okay, thats fine. GridView scrolls below EditText , but I couldn't set some padding between them. I have tried all combinations.Now the GridView Scroll end at the same line where EditText boarder is. – visakh r Oct 07 '18 at 11:32
Is it possible to make the background color of layout containing EditText fill whewithn the toolbar color when it collapses? – visakh r Oct 08 '18 at 05:55
Sorry. I don't get you, can you show me a screenshot or described by picture? Anyhow, this seems to be another question which should be described in another question. – ʍѳђઽ૯ท Oct 08 '18 at 07:57

CollapsingToolbarLayout contains ViewPager and a search box in it. How to prevent the search box only from collapsing,while ViewPager collapses

1 Answers1