Floating Search View with Auto Hide for Android
Floating Search View with auto hide is part of material design. All major app now include floating searchview. For instance here is a simple implementation of floating searchview, with out using any dependencies or library files. It’s a simple and effective way for creating floating searchview for beginners.
Search View
SearchView is a widget that provides a user interface for the user to enter a search query and submit a request to a search provider. Shows a list of query suggestions or results, if available, and allows the user to pick a suggestion or result to launch into.
<?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"
android:fitsSystemWindows="true"
android:id="@+id/cordinatorLayoutActivityA"
tools:context="com.logicchip.blog_14_floatingsearchview.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay" />
<android.support.v7.widget.CardView
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
android:id="@+id/cardS"
app:cardBackgroundColor="@color/colorIcons"
app:cardElevation="5dp">
<android.support.v7.widget.SearchView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:id="@+id/searchViewQuery"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:queryHint="Search event"
android:textColor="@color/colorPrimaryText"
app:iconifiedByDefault="false"
app:closeIcon="@drawable/ic_close"
android:layout_marginRight="20dp" />
<ImageButton
android:layout_marginRight="5dp"
android:onClick="PopupShowMenu"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="end|center_vertical"
android:id="@+id/imageViewSearchMenu"
style="@style/Widget.AppCompat.Button.Borderless"
android:src="@drawable/ic_more"/>
</android.support.v7.widget.CardView>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:id="@+id/nestedScrollView"
android:focusableInTouchMode="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:focusableInTouchMode="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingBottom="5dp"
android:id="@+id/recycleView">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
However searchview come’s with default icon below method shows how to remove it, Else you can replace it custom icons. Furthermore you can always modify it in your own way here.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
searchViewQuery = (SearchView)findViewById(R.id.searchViewQuery);
imageViewSearchMenu = (ImageButton) findViewById(R.id.imageViewSearchMenu);
cordinatorLayoutActivityA = (CoordinatorLayout) findViewById(R.id.cordinatorLayoutActivityA);
nestedScrollView=(NestedScrollView)findViewById(R.id.nestedScrollView);
EditText searchEditText = (EditText) searchViewQuery.findViewById(android.support.v7.appcompat.R.id.search_src_text);
searchEditText.setTextColor(ResourcesCompat.getColor(getResources(),R.color.colorPrimaryText,null));
searchEditText.setHintTextColor(ResourcesCompat.getColor(getResources(),R.color.colorSecondaryText,null));
ImageView searchImage = (ImageView) searchViewQuery.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
searchImage.setVisibility(View.GONE);
ViewGroup linearLayoutSearchView =(ViewGroup) searchImage.getParent();
linearLayoutSearchView.removeView(searchImage);
linearLayoutSearchView.addView(searchImage);
searchImage.setAdjustViewBounds(true);
searchImage.setMaxWidth(0);
searchImage.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT));
searchImage.setImageDrawable(null);
recycleViewNews = (RecyclerView)findViewById(R.id.recycleView);
recycleViewNews.setHasFixedSize(true);
recycleViewNews.setLayoutManager(new LinearLayoutManager(this));
mAdapter = new AdapterForRecycle(this);
recycleViewNews.setAdapter(mAdapter);
recycleViewNews.setNestedScrollingEnabled(false);
}
Even so “Floating searchview” is explained above you can still download it from here, You can modify the code us u like. In like manner feel free to comment your doubt’s below. Does our tutorials help you then help as spread the word, like and share.
