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.
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?