How do I use a FAB(floating action button) to hide or show my edit text box?

Question

I am new to material design and plugging and playing with a couple of features. Is there an example I can check out or download any sample that shows me how to hide /show my edit text box upon click? This is my code :

<EditText
            android:id="@+id/messageEdit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_toLeftOf="@+id/chatSendButton"
            android:autoText="true"
            android:hint="type message" />

        <Button
            android:id="@+id/chatSendButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@color/background_floating_material_dark"
            android:text="Send MSG"
            android:textColor="@color/background_material_light"/>

What I am trying to do is contain this in a FAB so when I click the fab button this edittext view (with button)will popup , but once it pops up it stays there until i press the FAB button again. Any such functionality already implemented I can follow? I would prefer the easiest and the most efficient approach available. Any clues?

Answer 1

You can't have those Views inside your FAB. Declare your fab in xml like this:

     <android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_edit"
    android:layout_gravity="right|bottom"
    android:id="@+id/edit"
    android:theme="@style/Widget.Design.FloatingActionButton" />

In your activity's onCreate():

    FloatingActionButton edit = (FloatingActionButton)findViewById(R.id.edit);
    edit.setOnClickListener(new OnClickListener(){
     @Override
        public void onClick(View v) {
            EditText editText = (EditText)findViewById(R.id.messageEdit);
            if(editText.getVisibility() == View.VISIBLE)
            {
                editText.setVisibility(View.INVISIBLE);
            }
            else {
                editText.setVisibility(View.VISIBLE);
            }
        }
       });