Logicchip

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.
Exit mobile version