Android FloatingSearchView inside Toolbar - google-play

Question

Hi i have a specific question.
Im using the library floatingsearchview (https://github.com/arimorty/floatingsearchview) in my Project.
I try implementing a google play store like Toolbar using the design support library (AppBarLayout/Toolbar that collapses when scrolling).
The Searchview is inside the Toolbar and the scrolling and disappearing works flawless (when height is set to match toolbar height). Nevertheless the searchview needs to be set to height:match_parent when you want to display any results under the searchview which will expand the Toolbar to fill the whole screen...
Any opinions on how doing so ?
This is how it works in Google Play (but you should be able to test it in your Google Play store App too)

Answer 1

From the author of the library.
The View's height determines the height if that the suggestions will have. Meaning, you can set any height for the View, but it won't look good if it's less than the full height because the suggestions won't expand to the entire screen's height.
So, no, it is impossible to use it within the Toolbar.

Answer 2

I managed to get this working by using a FrameLayout like this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<com.arlib.floatingsearchview.FloatingSearchView
android:id="#+id/floating_search_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
background="#5E5C62"
app:floatingSearch_searchBarMarginLeft="8dp"
app:floatingSearch_searchBarMarginRight="8dp"
app:floatingSearch_showMenuAction="true"
app:floatingSearch_searchHint="Search…"
app:floatingSearch_showSearchHintWhenNotFocused="true"
app:floatingSearch_showVoiceInput="false"
app:floatingSearch_showOverFlowMenu="false"
app:floatingSearch_hideOverflowMenuWhenFocused="false"
app:floatingSearch_showSearchKey="false"
app:floatingSearch_dismissOnOutsideTouch="true" />
</FrameLayout>
This might not be the best setup but it works for me and shows suggestions properly.

Answer 3

For me thats worked, edit your resources xml and add a new custom Behavior for the FloatingSearchView
activity.xml
<?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.example.HomeActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="70dp"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/searchContainer"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.arlib.floatingsearchview.FloatingSearchView
android:id="#+id/floating_search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:floatingSearch_close_search_on_keyboard_dismiss="true"
app:floatingSearch_leftActionMode="showHome"
app:floatingSearch_menu="#menu/menu_search"
app:floatingSearch_searchBarMarginLeft="#dimen/search_view_inset"
app:layout_behavior="com.example.utils.SearchBehavior"
app:floatingSearch_searchBarMarginRight="#dimen/search_view_inset"
app:floatingSearch_searchBarMarginTop="5dp"
app:floatingSearch_searchHint="Search..."
app:floatingSearch_showSearchKey="true"
app:floatingSearch_suggestionsListAnimDuration="250" />
</android.support.design.widget.CoordinatorLayout>
Then create your custom class mentioned into attribute app:layout_behavior of FloatingSearchView tag :
public class SearchBehavior extends
CoordinatorLayout.Behavior<FloatingSearchView> {
private AppBarLayout mAppBarLayout;
private android.support.design.widget.AppBarLayout.Behavior
mAppBarLayoutBehavior;
private ValueAnimator mValueAnimator;
private FloatingSearchView mSearchView;
private boolean isScrolling;
public SearchBehavior() {
}
public SearchBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
public boolean layoutDependsOn(CoordinatorLayout parent,
FloatingSearchView child, View dependency) {
if (dependency instanceof AppBarLayout) {
this.mSearchView = child;
this.mAppBarLayout = (AppBarLayout) dependency;
CoordinatorLayout.LayoutParams params =
(CoordinatorLayout.LayoutParams) this.mAppBarLayout.getLayoutParams();
if (Build.VERSION.SDK_INT >= 21) {
this.mAppBarLayout.setStateListAnimator((StateListAnimator)
null);
}
this.mAppBarLayoutBehavior =
(android.support.design.widget.AppBarLayout.Behavior)
params.getBehavior();
return true;
} else {
return super.layoutDependsOn(parent, child, dependency);
}
}
public boolean onDependentViewChanged(CoordinatorLayout parent,
FloatingSearchView child, View dependency) {
if (dependency instanceof AppBarLayout) {
this.mSearchView.setTranslationY(dependency.getY());
return true;
} else {
return super.onDependentViewChanged(parent, child, dependency);
}
}
public void onNestedPreScroll(CoordinatorLayout parent,
FloatingSearchView child, View target, int dx, int dy, int[] consumed)
{
if (dy < 0 && dy <= -10 && !this.isScrolling) {
this.isScrolling = true;
if (this.needsToAdjustSearchBar() &&
!this.isRunningAnimation()) {
int offset = this.getMinExpandHeight();
this.getValueAnimator(parent, child, -offset).start();
}
}
}
public void onNestedScroll(CoordinatorLayout coordinatorLayout,
FloatingSearchView child, View target, int dxConsumed, int dyConsumed,
int dxUnconsumed, int dyUnconsumed) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed,
dyConsumed, dxUnconsumed, dyUnconsumed);
}
public void onStopNestedScroll(CoordinatorLayout coordinatorLayout,
FloatingSearchView child, View target) {
this.isScrolling = false;
}
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
FloatingSearchView child, View directTargetChild, View target, int
nestedScrollAxes) {
return nestedScrollAxes == 2 ||
super.onStartNestedScroll(coordinatorLayout, child, directTargetChild,
target, nestedScrollAxes);
}
private int getStatusBarHeight() {
if (Build.VERSION.SDK_INT > 19) {
return 0;
} else {
int result = 0;
int resourceId = this.mSearchView.getContext().getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = this.mSearchView.getContext().getResources().getDimensionPixelSize(resourceId);
}
return result;
}
}
private ValueAnimator getValueAnimator(CoordinatorLayout parent, FloatingSearchView searchView, int offset) {
if (this.mValueAnimator == null) {
this.mValueAnimator = ValueAnimator.ofInt(new int[0]);
} else if (this.mValueAnimator.isRunning()) {
return this.mValueAnimator;
}
this.mValueAnimator.setInterpolator(new DecelerateInterpolator());
this.mValueAnimator.setIntValues(new int[]{this.mAppBarLayoutBehavior.getTopAndBottomOffset(), offset});
return this.mValueAnimator;
}
private boolean isRunningAnimation() {
return this.mValueAnimator != null && this.mValueAnimator.isRunning();
}
private boolean needsToAdjustSearchBar() {
float y = (float) Math.abs(this.mAppBarLayoutBehavior.getTopAndBottomOffset());
return y > (float) this.getMinExpandHeight();
}
private int getMinExpandHeight() {
return Build.VERSION.SDK_INT >= 16 ?
this.mAppBarLayout.getTotalScrollRange() -
this.mSearchView.getMinimumHeight() - this.getStatusBarHeight() / 2 :
this.mAppBarLayout.getTotalScrollRange() - this.mSearchView.getHeight() -
this.getStatusBarHeight() / 2;
}
}