Fab to search bar

Question

I am looking to make a floating action button for my android app that turns into search bar when clicked.

I've seen them turn into actionbar toolbar ,but I want to use it for searching. Any help on making this happen would be appreciated.

Thanks!

Answer 1

You can do this in 3 steps.

1. Floating Action Button, which you can use Google Support Library, which I have explained here.

2. On click of floating action button, you need to show toolbar, For that your main page should have FAB as well as toolbar, like the following:

   <LinearLayout android:id="@+id/mainView"
                 xmlns:android="http://schemas.android.com/apk/res/android"
                 android:layout_width="0dp"
                 android:layout_height="fill_parent"
                 android:layout_weight="1.0"
                 android:orientation="vertical">
   
       <include
           android:id="@+id/toolbar"
           layout="@layout/app_bar"/>
   
       <View android:id="@+id/stripBelowToolbar"
             android:layout_height="0dp"
             android:layout_width="fill_parent"/>
   
       <android.support.design.widget.CoordinatorLayout
           android:id="@+id/rootLayout"
           android:layout_height="match_parent"
           android:layout_width="match_parent">
   
       <android.support.design.widget.FloatingActionButton
           style="@style/fab_style"
           android:id="@+id/fabBtn"
           android:layout_gravity="bottom|right"
           android:layout_height="wrap_content"
           android:layout_width="wrap_content"
           fab:backgroundTint="@color/sap_uex_dark_yellow"
           fab:rippleColor="@color/white"/>
   

   code behind files should have

   FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
   fab.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
           Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
           toolbar.setvisibility(View.VISIBLE)// show the searchbox and bla bla...
       }
   });
   

3. You need to animate the hiding of floating action button, which can be achieved like this.